Question

I am trying to display data after being submitted with ajax. The ajax works so far when submitting, but I have to refresh to see it.

Here’s the jquery:

$('#submit-quote').live("submit", function(){
    var formdata = $(this).serialize();
    $.post("add.php", formdata, function(data) {
        console.log("success"); 
    });
    return false;
});

The php in add.php:

require('includes/connect.php');

$quote = $_POST['quote'];
$quotes = mysql_real_escape_string($quote);

echo $quotes . "Added to database";

mysql_query("INSERT INTO entries (quote) VALUES('$quotes')")
or die(mysql_error());

Here’s the HTML/PHP that I use to fetch the data and display it:

<?php 
    require("includes/connect.php");

    $result = mysql_query("SELECT * FROM entries", $link);
    while($row = mysql_fetch_array($result)){ ?>
        <div class="quote-wrap group">
            <span>Like</span>
            <div class="quote">
                <p>
                <?php echo htmlentities($row['quote']); ?>
                </p>
            </div><!-- /.quote -->
        </div><!-- /.quote-wrap -->

 <?php } ?>

If needed, here’s the form:

<form id="submit-quote" method="post" >
     <h2> Submit A Quote </h2>
     <textarea name="quote">
     </textarea>
     <input type="submit" name="submit" value="Submit!">
</form>

Ajax works when submitting, but I need to display it after being sent also, how can I do this?

Answer 1

The data variable in your success callback function stores the server response. So to add the server response to the DOM:

$(document).delegate("'#submit-quote'", "submit", function(){
    $.post("add.php", $(this).serialize(), function(data) {
        $('.inner').append('<div class="quote-wrap group"><span>Like</span><div class="quote"><p>' + data + '</p></div></div>');
    });
    return false;
});

If you need to use event delegate (e.g. the form isn’t always present in the DOM) then use .delegate() instead of .live() as the latter has been depreciated as of jQuery 1.7.

Also you don’t really need to cache $(this).serialize() in a variable since it is only being used once (creating the variable is unnecessary overhead).

Since your PHP code is outputting echo $quotes . "Added to database";, the server response will be the quote with “Added to database` appended to the string, which will be added to your list of quotes.

UPDATE

$(document).delegate("'#submit-quote'", "submit", function(){
    var quoteVal = $(this).find('[name="quote"]').val();
    $.post("add.php", $(this).serialize(), function() {
        $('.inner').append('<div class="quote-wrap group"><span>Like</span><div class="quote"><p>' + quoteVal+ '</p></div></div>');
    });
    return false;
});

Notice that I am no longer referencing the server response (in fact I removed the data variable all together). Instead I am saving the value of the name="quote" element within the form being submitted and using it after the AJAX request comes back (this way the quote is added to the database before being added to the DOM). You could move the .append() code outside the success callback to run it right as the form is submitted (in the submit event handler).

UPDATE

If you want to create a DOM element to append rather than concocting a string:

$(document).delegate("'#submit-quote'", "submit", function(){
    var quoteVal = $(this).find('[name="quote"]').val();
    $.post("add.php", $(this).serialize(), function() {

        //create parent div and add classes to it
        $('<div />').addClass('quote-wrap group').append(

            //append the "like" span to the parent div
            $('<span />').text('Like');
        ).append(

            //also append the .quote div to the parent div
            $('<div />').addClass('quote').append(

                //then finally append the paragraph tag with the quote text to the .quote div
                $('<p />').text(quoteVal)
            )

        //then after we're done making our DOM elements, we append them all to the .inner element
        ).appendTo('.inner');
    });
    return false;
});