jQuery, Ajax, and PHP Help

Strider64 · August 6, 2013

First I'll explain what I'm trying to do, I have already created a CMS for my website using OOP in PHP and it works great. Now, I want it so the page doesn't reload when a person adds/edits a comment. I have no problem in retrieving the data from a php file:

data.php

<?php

require('includes/utilities.inc.php');

$id = 80;

try {
    $query = 'SELECT id, creatorId, sticky, title, content, DATE_FORMAT(dateUpdated, "%e %M %Y") as dateUpdated FROM pages WHERE id=:id';
    $stmt = $pdo->prepare($query);
    $result = $stmt->execute(array(':id' => htmlspecialchars($id)));

    // If the query ran OK, fetch the record into an object:
    if ($result) {
        $stmt->setFetchMode(PDO::FETCH_CLASS, 'Page');
        $page = $stmt->fetch();
        $title = $page->getTitle();
        $content = nl2br($page->getContent());
    } else {
        throw new Exception('An invalid page ID was provided to this page');
    }
    
} catch (Exception $e) { // Catch generic exceptions
    include('views/error.html');
}

class ReadPage {

    public $title;
    public $content;

    public function __construct($title, $content) {
        $this->title = $title;
        $this->content = $content;
    }

}

$e = new ReadPage($title, $content);


echo json_encode($e);
?>

and pulling it from Jquery.

index.html (I decided to post the whole javascript/html file)

<!DOCTYPE html>
<html>
    <head>
        <title>Demo JSON, AJAX and CMS Website</title>
        <link href="css/stylesheet.css" rel="stylesheet">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" ></script>
        <script type="text/javascript">

            $(document).ready(function() {



                $.getJSON("data.php", function(info) { // Load data:

                    var updateTitle = document.getElementById('titleCMS');
                    updateTitle.innerHTML = info.title;
                    var updateContent = document.getElementById('contentCMS');
                    updateContent.innerHTML = info.content;



                }); //getJSON

                $("#save").click(function() {
                    
                    var content = $('#contentCMS').html();
                    
                    $.ajax(
                            {
                                type: "POST",
                                url: "save_data.php",                              
                                data: {content: content},
                                success: function(data) {
                                    $("#debug_message").html("saved file");
                                },
                                failure: function() {
                                    $("#debug_message").html(
                                            "An error has occured trying to save the file");
                                }
                            });
                });

            }); // ready

        </script>
    </head>
    <body>
        <section>
            <header></header>
            <article>
                <div id="debug_message"></div>
                <div id="title"><h1 id="titleCMS"></h1></div>
                <div id="content" contentEditable="true"><p id="contentCMS"></p></div>
                <button id="save">Save</button>
            </article>
            <footer></footer>
        </section>
    </body>
</html>

The problem is when I go to put the "edited" data back into the database:

save_data.php:

<?php
$id = 80;
$content = $_POST['content'];
   
require('includes/utilities.inc.php');

   // Update the edited text:	 
    $query = 'UPDATE  pages SET content=:content, dateUpdated=NOW() WHERE id=:id';

    // Prepare the Statement:
    $stmt = $pdo->prepare($query);

    $data = array('content' => $content);



    // execute the statement:
    $show_details = $stmt->execute(array(':content' => $content, ':id' => $id));
?>

Using firebug in Firefox I see that it adds <font size="2" face="Arial"> and other extra HTML, obvioulsy I don't want that for I have my own css styling and what have you. I am just testing this code out on my server with hopes of modifying my existing CMS website once I get this perfected. Any useful help will be greatly appreciated.

Thanks John

Edited August 6, 2013 by Strider64

mac_gyver · August 7, 2013

there's nothing specific in the posted code/data/css that would do this (and didn't when i tried with just the posted code.) i suspect the problem in the use of var content = $('#contentCMS').html(); getting the actual html of the element, with any css styling you are applying on the page. try using the .text() method.

Strider64 · August 7, 2013

Your answer got me thinking that I can control what is coming and going back from jQuery/Ajax and with a few modifications solve the problem. mac_gyver - Thanks for the help

Edited August 7, 2013 by Strider64

Sign In

jQuery, Ajax, and PHP Help

Recommended Posts

Strider64

Link to comment

Share on other sites

mac_gyver

Link to comment

Share on other sites

Strider64

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information