How can I update the DOM after Ajax Call (jQuery)?

Question

How can I update the DOM with a new element of an added record after a call?

Should I return the newly inserted contents of a db record on callback and then add using jquery?

I ask for advice if there is not enough data to answer the question.

$(function(){ $('#postentry').submit(function() { var tyu = $('#tittle_ent').val(); if(tyu.length <= 2) {alert('Enter More Text!'); return false;}else { $.post( "posts_in.php", $("#postentry").serialize(), function(data){ //alert(data); } ); return false; } }); }); 

Each entry is as follows:

 <div id="post349" class="myclass"> This is some text. </div> 

Answer 1

I would use $.ajax() instead of $.post() :

 $.ajax({ type:'post', url: 'posts_in.php', data: $("#postentry").serialize(), success:function(data){ var id='post349'; $('<div></div>').attr('id',id).addClass('myclass').html(data).appendTo('#records_wrapper'); } }); 

A quick demonstration of how a div will be added and populated: http://jsfiddle.net/AlienWebguy/zuPA2/1/

Answer 2

You can either return the full entry in the div environment from php, or simply get the identifier you just inserted and create an entry in javascript.

Answer 3

 $.post( "posts_in.php", $("#postentry").serialize(), function(data){ $('#myDivOnThePage').append(data); } ); 

Answer 4

If the data contains a new record, yes, analyze it and add it to where you want.

By creating a new jsfiddle.net example, I can help you a little more ...