php - How can I update the DOM after Ajax Call (jQuery)? - Stack Overflow

admin管理员组

文章数量:1289584

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

Should I return the newly inserted db record contents on call back then append using jquery?

Please advice if not enough data to answer 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 record look like this:

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

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

Should I return the newly inserted db record contents on call back then append using jquery?

Please advice if not enough data to answer 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 record look like this:

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

• php
• javascript
• jquery
• ajax

Share Improve this question Follow edited Jul 23, 2011 at 1:35 Codex73 asked Jul 15, 2011 at 22:40 Codex73Codex73 5,7761313 gold badges5858 silver badges7777 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

I'd 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');
    }
});

Quick demo of how the div will be appended and populated: http://jsfiddle/AlienWebguy/zuPA2/1/

You can either return a plete record in the surrounding div from php or you can just get the newly inserted ID and build the record in javascript.

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

If data contains new record, so yes, parse it and append where and like you want.

By creating a new jsfiddle with an example, I can help you a little bit more...

In your JS file you could write this

 $.ajax({
    type: 'POST',
    url: posts_in.php,
    data: {
       action: 'updateDomAfterAjaxCall',
       post_id: postentry
   },

   success: function(data, textStatus, XMLHttpRequest) {

       var linkid = '#' + postentry;
       jQuery(linkid).html('');
       jQuery(linkid).append(data);

   },
   error: function(MLHttpRequest, textStatus, errorThrown) {
       alert(errorThrown);
   }
 });
 

In your backend code, you could do this. In this case, I used PHP.

 function updateDomAfterAjaxCall() {

    $post_ID = $_POST['post_id'];
    // Carefully tranverse the dom to 
    // Update records of the DOM that is 
    // affected by the new entry
    // so that it behave almost like
    // headless browser
    // Target footer-postentry
    // header-postentry, sidebar-postentry, content-postentry

    $result = '';
    $record_from_db = ""

    $results.='<div class="myclass" >'.$record_from_db.'</div>';
    die($result);
  }

本文标签： phpHow can I update the DOM after Ajax Call (jQuery)Stack Overflow