www.webdeveloper.com
Results 1 to 10 of 10

Thread: Update live for post and comments like facebook

  1. #1
    Join Date
    Sep 2012
    Posts
    5

    Update live for post and comments like facebook

    Dear all,
    i found this post online so useful but now i have a problem i want to update live the posts and comments without having to reload (i.e. between 2 instances of browsers). How can i do that?
    http://www.9lessons.info/2011/05/fac...h-php-and.html

  2. #2
    Join Date
    Mar 2009
    Posts
    452
    Ajax

  3. #3
    Join Date
    Sep 2012
    Posts
    5
    Thanks for your reply i do understand that it is Ajax but the idea itself isn't clear and is it doable or not?

  4. #4
    Join Date
    Sep 2011
    Location
    Bristol, England, United Kingdom
    Posts
    192
    Using an AJAX call in an interval can easily achieve this. You'll need to set-up an interval with a function that can request PHP to query the database like so:

    Code:
    window.addEventListener
    (
        "load", 
        function()
        {
            var update = setInterval
            (
                get_data();
            ), 1000
        }, false 
    );
    
    function get_data()
    { 
        // IE7+, Firefox, Chrome, Opera, Safari.
        if (window.XMLHttpRequest)
            xmlhttp = new XMLHttpRequest();
        // IE6, IE5.  
        else
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
     
        xmlhttp.onreadystatechange = function()
        {
            if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
            {
                // Handle HTTP response here.
                console.log(xmlhttp.responseText);
            }
        }
     
        xmlhttp.open("GET", "some_page.php, true);
        xmlhttp.send();
    }

  5. #5
    Join Date
    Sep 2012
    Posts
    5
    First of all thanks George for your reply.
    Second i do know that i should use Ajax it is the idea itself that i can't seem to implement and i am so blocked , could you just take a look at the post and tell me how can i update automatically the data.

  6. #6
    Join Date
    Mar 2009
    Posts
    452
    Can you please post the code ? where are you blocked. asy to pta nhi chalay ga.

  7. #7
    Join Date
    Sep 2012
    Posts
    5
    Ok here what i did is steps:
    1- I get all the data at the beginning.
    2- Keep the last message id on page
    3- Get messages that their ids are higher than the number saved and then post them to page (i can repeat this using setTimeout javascript function and in that case it would be automatically updated and posted to the other users)
    4-Now regarding the comment or reply to post how could i do the same

    This is the function i use to get all data at start
    Code:
      
          function displayMsgs()
         {
    	$.ajax({ 
    		type: "post", 
    		url: "includes/getMsgs.php",
    		dataType: "xml" ,
    		success: function(data){
    	    $(data).find("message").each(function() {
    	     var msg_id = $(this).find("msg_id").text();
    	     var msg_body = $(this).find("msg_body").text();
    	     var msg_user = $(this).find("msg_user").text(); 
    	     var msg_type = $(this).find("msg_type").text(); 
    	     var user_id = $(this).find("user_id").text(); 
       	     var active_user_id = $("#active_user_id").val();
            
             var html  = '<div media="true" class="stream-item " id="'+msg_id+'">';
             html  += '<input type="hidden" value='+active_user_id+'></input>';
             html  += '<div class="stream-item-content tweet stream-tweet " html -user-id="1921671">';
             html  += '<div class="tweet-content">';
             html  += '<div class="tweet-row">';
             html  += '<span class="tweet-user-name">';
             html  += '<a class="tweet-screen-name user-profile-link" html>'+msg_user+'</a>';
             html  += '<span class="tweet-full-name"></span></span>';
             html  += '<div class="tweet-corner">';
             html  += '<div class="tweet-meta">';
             html  += '<span class="icons">';
             html  += '<div class="extra-icons">';
             html  += '<span class="inlinemedia-icons"></span>';
             html  += '</div>';  
             html  += '</span>';
             html  += '</div>';
             html  += '</div>';
             html  += '<div class="tweet-row">'+msg_body+'</div>';
             html  += '<div class="tweet-row">';
             html  += '<a class="tweet-timestamp" title=><span ></span></a>';
             html  += '<span>';
             html  += '</span>';
             html  += '<span >';
             html  += '</span><b> Msg ID '+msg_id+' '+msg_type+'</b>';
             html  += '</div><div class="tweet-row">';          
             html  += '</div>';
             html  += '</div>';
             html  += '</div>';
             $("#stream-items").append(html);
    	}); 
      }
    });
    }
    This is the code to save a message
    Code:
    function saveMsg()
    {
    	var msg = $("#msg_area").val();
    	var id = $("#msg_id").val();
    	 $.post("includes/saveToDB.php","msg_id="+id+"&msg_body="+msg,function(data)
    	 {
    	   $("#msg_area").val("");
    	     $(data).find("message").each(function() {
    	     var msg_id = $(this).find("msg_id").text();
    	     var msg_body = $(this).find("msg_body").text();
    	     var msg_user = $(this).find("msg_user").text(); 
    	     var user_id = $(this).find("user_id").text(); 
       	     var active_user_id = $("#active_user_id").val();
             
             var html  = '<div media="true" class="stream-item " html -item-type="tweet" id="'+msg_id+'">';
             html  += '<input type="hidden" value='+active_user_id+'></input>';
             html  += '<div class="stream-item-content tweet stream-tweet " html -user-id="1921671">';
             html  += '<div class="tweet-content">';
             html  += '<div class="tweet-row">';
             html  += '<span class="tweet-user-name">';
             html  += '<a class="tweet-screen-name user-profile-link" html>'+msg_user+'</a>';
             html  += '<span class="tweet-full-name"></span></span>';
             html  += '<div class="tweet-corner">';
             html  += '<div class="tweet-meta">';
             html  += '<span class="icons">';
             html  += '<div class="extra-icons">';
             html  += '<span class="inlinemedia-icons"></span>';
             html  += '</div>';  
             html  += '</span>';
             html  += '</div>';
             html  += '</div>';
             html  += '<div class="tweet-row">'+msg_body+'</div>';
             html  += '<div class="tweet-row">';
             html  += '<a class="tweet-timestamp" title=><span ></span></a>';
             html  += '<span>';
             html  += '</span>';
             html  += '<span >';
             html  += '</span><b> Msg ID '+msg_id+'</b>';
             html  += '</div><div class="tweet-row">';          
             html  += '</div>';
             html  += '</div>';
             html  += '</div>';
             $("#last_screen_id").val(msg_id);
    	    $("#stream-items").prepend(html);
    	   });
    	 });
    }
    This is PHP code to get all data at beginning
    PHP Code:
    $sql mysql_query('select msg_id,msg_body,user_name,user_id
                        from messages , users
                        where user_id = from_user
                        order by msg_id desc'
    ) or die (mysql_error());
     while (
    $result mysql_fetch_array($sql))
    {
       
    $msg_body_array[] = $result['msg_body'];
       
    $msg_id_array[] = $result['msg_id'];
       
    $msg_user_array[] = $result['user_name'];
       
    $msg_type[] = $result['msg_type'];
       
    $msg_user_id[] = $result['user_id'];
       
       
    $sql_replies mysql_query("select reply_id,reply_text,user_name,from_user
                                  from replies as r , users
                                  where parent_id = "
    .$result['msg_id']."
                                  and from_user = user_id
                                  order by reply_id desc"
    ) or die(mysql_error());

     while (
    $result_replies mysql_fetch_array($sql_replies))
      {
          
    $msg_body_array[] = $result_replies['reply_text'];
          
    $msg_id_array[] = $result_replies['reply_id'];
          
    $msg_user_array[] = $result_replies['user_name'];
          
    $msg_user_id[] = $result_replies['user_id'];
       }
      } 
          
    $xml = new dab_XML_Builder('text/xml''utf-8');
          
    $xml->add_group('messages');

         for (
    $i=0;$i<count($msg_id_array);$i++)
         { 
            
    $xml->add_group('message'); 
            
    $xml->add_tag('msg_id'$msg_id_array[$i]); 
            
    $xml->add_tag('msg_body'$msg_body_array[$i]); 
            
    $xml->add_tag('msg_user'$msg_user_array[$i]);
            
    $xml->add_tag('user_id'$msg_user_id[$i]); 
            
    $xml->close_group(); 
         }   
             
            
    $xml->close_group();  
            
    $xml->print_xml();
            
    mysql_close(); 
    Now i want to do the same with the comment for each post how can i do so?

  8. #8
    Join Date
    Mar 2009
    Posts
    452
    i am confused about ur problem, wait until someone posts a solution for ur problem.
    Last edited by ZABI; 09-24-2012 at 05:51 AM.

  9. #9
    Join Date
    Sep 2012
    Posts
    5
    I don't understand this language

  10. #10
    Join Date
    Mar 2009
    Posts
    452
    i am confused about ur problem, wait until someone posts a solution for ur problem.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles