Am I going about this the wrong way?
Added 2 code examples!
Probably simple to someone else on here, I'm new to Amp html and mustache and I'm having a frustrating problem creating AMP pages with forms, It's almost there though!
I must of rewrote this a few times and its always the same outcome! I'm trying to always return the correct value submitted via form and then pulled from the database, it only works the second time around if the page is refreshed ie* pressing f5 and trying again, otherwise it displays the same content.
It basically loads the div with what is returned from the database, if it exists or not.
The issue I think is with the session, I had to create a success and error variable to show different content depending on whether the data exists in the database or not exists as a XHR response will always be successful unless something is broke.
No matter where I place a session unset value it either does nothing or makes the request not work.
Session based Example:
<?php
session_start();
header("Access-Control-Allow-Credentials: true");
header("AMP-Same-Origin : true");
header("Access-Control-Allow-Origin: *.ampproject.org");
header("AMP-Access-Control-Allow-Source-Origin: http://www.example.com");
header("Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin");
include_once('../includes/dbcon.php');
if(isset($_POST['value'])){
$value = isset($_POST['value']) ? $_POST['value'] : '';
//json
header("Content-Type: application/json");
//remove out any spaces from $_post value
$value = str_replace(" ", "", $_POST['value']);
//make session the same as $_post value
$_SESSION["value"] = $value;
$value = $_SESSION["value"];
//check the db
$query = $db->prepare("SELECT * FROM posts WHERE value = '" . $value . "'");
$query->execute();
$rows = $query->fetchAll(PDO::FETCH_ASSOC);
if( $query->rowCount() > 0){
foreach($rows as $row) {
// value exists
$_SESSION['msg'] = 'success';
$output = $_SESSION['msg'];
echo json_encode($output);
}
} else {
// value does not exist
$_SESSION['msg'] = 'error';
$output = $_SESSION['msg'];
echo json_encode($output);
}
} else { //show page
include_once('includes/header.php'); //includes the amped form and mustache.js files etc
?>
<h1>Check value.</h1>
<form method="POST" action-xhr="//www.example.com/test" target="_blank">
<fieldset>
<label>
<span>Check VALUE</span>
<input type="text" name="value" required>
</label>
<input type="submit" value="Check">
</fieldset>
<div submit-success>
<template type="amp-mustache">
<?php
$response = $_SESSION['msg'];
//echo $response .' ( '.$_SESSION['value'] .' ) '; //test the session value returned
if($response==='success') {
echo 'Value already exists! do something here';
} else if($response==='error') {
echo 'Value does not exist! do something here';
}
?>
</template>
</div>
<div submit-error>
<template type="amp-mustache">
Something has gone wrong! (todo) If there is no response from xhr request then this error is displayed.
</template>
</div>
</form>
<?php include_once('includes/footer.php');
}
?>
Original version below using amp-mustache, working (kind of) fine but impossible and useless as I cannot render the html to the browser from the error or success message or manipulate or compare the mustache tag with PHP logic.
It has to be possible... For instance returning back the json array which reads:
"Success! Value found click here: <a href="#">link</a>"
is not html so impossible to add a button etc.
That's all I need to accomplish after checking the value.
Version using the mustache tag
<?php
header("Access-Control-Allow-Credentials: true");
header("AMP-Same-Origin : true");
header("Access-Control-Allow-Origin: *.ampproject.org");
header("AMP-Access-Control-Allow-Source-Origin: http://www.example.com");
header("Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin");
header("Cache-Control:private");
include_once('../includes/dbcon.php');
if(isset($_POST['value'])){
$value = isset($_POST['value']) ? $_POST['value'] : '';
//json
header("Content-Type: application/json");
//take out any spaces from the value first
$value = str_replace(" ", "", $_POST['value']);
//check db
$query = $db->prepare("SELECT * FROM posts WHERE value = '" . $value . "'");
$query->execute();
$rows = $query->fetchAll(PDO::FETCH_ASSOC);
if( $query->rowCount() > 0){
foreach($rows as $row) {
// value exists
echo json_encode(array('value'=>'My success message.'));
}
} else {
// value does not exist
echo json_encode(array('value'=>'error.<a href="#">test</a>')); //does not display as html
}
} else { //show page
include_once('includes/header.php'); //includes the amped form and mustache.js files etc
?>
<h1>Check value.</h1>
<form method="POST" action-xhr="//www.example.com/test" target="_blank">
<fieldset>
<label>
<span>Check Value</span>
<input type="text" name="value" required>
</label>
<input type="submit" value="Check">
</fieldset>
<div submit-success>
<template type="amp-mustache">
{{value}}
</template>
</div>
<div submit-error>
<template type="amp-mustache">
Something has gone wrong! (todo) If no response from xhr request then this error is displayed.
</template>
</div>
</form>
<?php include_once('includes/footer.php');
}
?>
I'm an idiot, I figured it out the mustache way (Method 2), I can't believe I didn't try it - a long day I guess at a day job which doesn't involve programming!
Simply change both checks to:
//success part
$url="http://example.com/success-page";
$title="my success title tag text";
echo json_encode(array(
'value'=>'My <strong>success</strong> message',
'url'=> $url,
'title' => $title
)); // add more variables to build up the JSON array and display them as mustache tags
//error part
$url="http://example.com/error-page";
$title="my error title tag text";
echo json_encode(array(
'value'=>'My error message',
'url'=> $url,
'title' => $title
)); // add more variables to build up the JSON array and display them as mustache tags
and finally change the mustache tag part to:
{{{value}}} <a href="{{url}}" title="{{title}}">Click me</a>
3 curly brackets un-escape simple HTML tags.