Question

I’m working on my first Single Page Application, and I’m not sure the best way to go about storing the page data.

I have it set up so that the page contents is saved in my database, and when a user clicks on one of the navigation links, it does an ajax call to a process file which extracts the page contents, formats it as json and echos it back so that the jQuery can populate the page.

The issue I’m having is that if any of the page contents in the database contains PHP, the PHP is not being processed or even displayed (however if I view source I see the raw php). Is their a better way to go about this so that the code will run?

My Ajax Call:

$("nav a").click(function(e) {
    e.preventDefault();
    var page = $(this).attr("href");
    $("nav a").removeClass("menuSelected");
    $(this).addClass("menuSelected");

    form_data = {
        action: "load",
        page: page,
        is_ajax: 1
    }

    $.ajax({
        type: "post",
        url: "process.php",
        dataType: "json",
        data: form_data,
        success: function(data) {
            if(data.success === "true") {
                $("#asideLeft").html(data.aside_left);
                $("#contentMiddle").html(data.content_middle);
                $("#asideRight").html(data.aside_right);
            } else {
                $("#contentMiddle").html("<h1>AJAX Failure</h1>");
            }
        }
    });

My PHP Code that get called when a user clicks on the link:

if($action == "load") {
    $pms->connect();
    $result = $pms->dbh->prepare("SELECT * FROM pages WHERE name=:name");
    $result->execute(array(':name' => $page));
    $page = $result->fetch(PDO::FETCH_OBJ);
    $data['success'] = "true";
    $data['aside_left'] = $page->aside_left;
    $data['content_middle'] = $page->content_middle;
    $data['aside_right'] = $page->aside_right;
    echo json_encode($data);
}

and a sample of the HTML/PHP that is being saved in the database:

<h1>Content Middle</h1>
<p>Today is <?php echo date("Y-m-d H:i:s"); ?> </p>

Thank you for any help or suggestions you can provide.

Answer 1

+1 for the question. I agree that php code and the html (from the database) should be separated. In particular, while assembling the json data on the server side, you should invoke all the php code that you are now storing in the database. So, instead of storing in the database something like:

<p>Today is <?php echo date("Y-m-d H:i:s"); ?> </p>

You could write something like:

$data['success'] = "true";
$data['aside_left'] = $page->aside_left;
$data['content_middle'] = $page->content_middle;
$data['aside_right'] = "<p>Today is" . date("Y-m-d H:i:s") . "</p>";
echo json_encode($data);

Yes, this is not as clean as just retrieving data from the database, but all the server-side scripts should be executed on the server side. Problems like this one in particular – like printing today’s date and similar – can be solved using JavaScript, which can be stored in the database hassle-free (e.g. you store in the database a function that,once loaded on the server side, returns current date). This can be achieved if you store in the database a record like this one:

"<p><script>(new Date()).toString('dddd, MMMM ,yyyy');</script></p>"

Once loaded, it will display the current date inside the p tags.

Another solution, if JavaScript simply isn’t an option and you have to use PHP, this could be achieved with another request to the server side, as such:

.
.
$data['aside_right'] = "<p>Today is:<script> $.ajax({type:'post',url:'processSomeMore.php',dataType:'json',data:form_data,success:function(data) {...}});
</script></p>";
echo json_encode($data);

Once the JavaScript code is sent to the client along with the rest of the html retrieved from the database, it will issue another request to the server, demanding for additional data through ajax. Hope this is not too confusing :-).