PHP/jQuery: Fadein/refresh after insert

Question

Hi, i have a "wall" on each profile, and i wish to make it smarter, so you don't need to update the page to view your inserted message you just put up.

When you insert a message, it makes a ajax call and inserts to the database, and you receive a message about it has been inserted. But right now you need to refresh the page to see your inserted message. What i want to do is if you insert a new message, it should fadein /refresh the wall with messages that is right under the form. How can I do this?

I have worked on it alittle and tried to make a new file, inserted all coding to show comments and then i set timeout to refresh each 2 seconds

 function ajax_update() {
    var wrapperId = '#box';
    var profileID = document.getElementById('profileID');
    var postFile = 'showcomments.php?id='+ profileID.value;

    _v++;
    _v2++;

    $.post(postFile, { v2: _v2 , v: _v},
      function(data){
        $(wrapperId).html(data);
      });
    setTimeout('ajax_update()', 2000);
  }   

but this isnt good, as it makes too many server calls, so hope you can help me out, since i dont know how i should do this in a cool way

Form with ajax call: http://phpbin.net/x/838833504

And my current php code that grab from db and list in messages: http://phpbin.net/x/2145692361

Answer 1

One way is to return the newly updated wall listing from your .post() handler on the server. Then in the callback, repaint the wall area with that content (forget about using setTimeout()). You could also do the same thing, but working message by message, adding the latest message to the top of the "stack" in your wall content area.

So, repainting the whole wall:

$.post(postFile, { v2: _v2 , v: _v},
  function(data){
    // make your server return the updated wall content
    // return data.whatever
    //        data.wallcontent
    $('#wrapperId').html(data.wallcontent);
});

or message by message:

$.post(postFile, { v2: _v2 , v: _v},
  function(data){
    // make your server return the new message ready for insert
    // return data.whatever
    //        data.message_you_just_posted_formatted
    $('#wrapperId')
      .prepend( data.message_you_just_posted_formatted );
});

That's the basic idea.

Answer 2

I would suggest a slight methodology change:

1. submit the new post to the database via AJAX
2. in the success callback for that AJAX post, create an element with the content that was submitted and append it to the list of posts on the page.
3. if you want it to look cool just use some of the built in animation effects (fadeIn, show, etc).

This way, you're not polling for changes all the time, and you only have to request things from the server upon page loads.

function DoWallInsert(){

  var wrapperId = '#box';
  var profileID = document.getElementById('profileID');
  $("#insert_response").html("Laddar..");

  $.ajax({ 
   type: "POST",
   url: "misc/insertWall.php",
   data: {
       value: 'y',
       BuID : $('#BuID').val(),
       uID : $('#uID').val(),
       message : $('#message').val() 
   },
   success: function(msg){
       // in here you will have to add the message to the top of the list of wall posts
       // to do this you use prepend whatever html and the message in whatever way you 
       // are using to display the messages.
       $(wrapperId).prepend("<div>" + $('#message').val() + "</div>");
   }
 });
}

html might look like this before:

<form action="javascript:DoWallInsert()" method="post">
    <input name="message" type="text" id="message" value="" size="40">
    <input type="hidden" name="BuID" id="BuID" value="123123">
    <input type="hidden" name="uID" id="uID" value="53425">
    <input name="submit" type="submit" id="submit" value="Skicka">
</form>

<div id="box">
    <div id="post-1">Some stuff</div>
    <div id="post-2">Some other stuff</div>
</div>

html should look like this after:

<form action="javascript:DoWallInsert()" method="post">
    <input name="message" type="text" id="message" value="" size="40">
    <input type="hidden" name="BuID" id="BuID" value="123123">
    <input type="hidden" name="uID" id="uID" value="53425">
    <input name="submit" type="submit" id="submit" value="Skicka">
</form>

<div id="box">
    <div>Whatever was typed in the box</div>
    <div id="post-1">Some stuff</div>
    <div id="post-2">Some other stuff</div>
</div>

If the html you want to append to the list of posts has php in it then my best suggestion is to return the html for the new div in the response from the server on the on the AJAX call to this: misc/insertWall.php

insertWall.php should return "<a href='profil.php?id=".$userinfo[id]."'>".$userinfo["full_name"]."</a>". then you can process it and display it in the success part of DoWallInsert():

   success: function(msg){
       // in here you are receiving a response, you should display it in the page
       // this assumes that you are fully formatting the message before returning it
       // and you just want to insert it here.
       $(wrapperId).prepend(msg);
   }