Jump to content

jQuery, Ajax, and PHP Help

Go to solution Solved by mac_gyver,

Recommended Posts

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:





$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

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>
        <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();
                                type: "POST",
                                url: "save_data.php",                              
                                data: {content: content},
                                success: function(data) {
                                    $("#debug_message").html("saved file");
                                failure: function() {
                                            "An error has occured trying to save the file");

            }); // ready

                <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>

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



$id = 80;
$content = $_POST['content'];

   // 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 by Strider64
Link to comment
Share on other sites

  • Solution

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.