javascript - Showing data after being submitted with ajax -

javascript - Showing data after being submitted with ajax -

i trying display info after beingness submitted ajax. ajax works far when submitting, have refresh see it.

here's jquery:

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

the php in add.php:

require('includes/connect.php'); $quote = $_post['quote']; $quotes = mysql_real_escape_string($quote); echo $quotes . "added database"; mysql_query("insert entries (quote) values('$quotes')") or die(mysql_error());

here's html/php utilize fetch info , display it:

<?php require("includes/connect.php"); $result = mysql_query("select * 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 form:

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

ajax works when submitting, need display after beingness sent also, how can this?

the data variable in success callback function stores server response. add together server response 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>' + info + '</p></div></div>'); }); homecoming false; });

if need utilize event delegate (e.g. form isn't nowadays in dom) utilize .delegate() instead of .live() latter has been depreciated of jquery 1.7.

also don't need cache $(this).serialize() in variable since beingness used 1 time (creating variable unnecessary overhead).

since php code outputting echo $quotes . "added database";, server response quote "added database` appended string, added 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>'); }); homecoming false; });

notice no longer referencing server response (in fact removed data variable together). instead saving value of name="quote" element within form beingness submitted , using after ajax request comes (this way quote added database before beingness added dom). move .append() code outside success callback run right form submitted (in submit event handler).

update

if want create dom element append rather concocting string:

$(document).delegate("'#submit-quote'", "submit", function(){ var quoteval = $(this).find('[name="quote"]').val(); $.post("add.php", $(this).serialize(), function() { //create parent div , add together classes $('<div />').addclass('quote-wrap group').append( //append "like" span parent div $('<span />').text('like'); ).append( //also append .quote div parent div $('<div />').addclass('quote').append( //then append paragraph tag quote text .quote div $('<p />').text(quoteval) ) //then after we're done making our dom elements, append them .inner element ).appendto('.inner'); }); homecoming false; });

javascript php jquery ajax