Comment posting system working explained with full code and demo example; both jQuery and JavaScript versions

  1. Previous
  2. Next
  3. Recent

    1. Signs 'He' May be Cheating on You
    2. 7 Vows of Hindu Marriage - Know What 'Saat Vachans' Mean
    3. RuPay vs Visa vs Mastercard vs American Express- A Comparison
    4. What is RuPay? Everything You Need to Know About India's Domestic Payment System!
    5. Top 10 Online Portals to Find a High Paying Job in India
    6. Top Indians who Revolutionized the IT Sector in India
    7. 8 Initiatives by Narendra Modi that Could Change the Future of the Nation
    8. 8 Work-from-home Jobs for Housewives, Students, and Part timers
    9. Complete Company Registration Process in India - Explained
    10. Change Name in India in 5 Steps - Filing Affidavit, Newspaper Ad & Gazette Notification

Social networking sites are all about posting comments, tweeting and sending messages. You must be commenting all day long on Facebook and posting tweets on Twitter. Blogging sites also asks you to post comments and feedback on articles. Though we use this service 24×7 yet most of us don’t know how the comment posting system in a website works?

Its because of Ajax – Ajax sends data to and fro between remote server and your browser without reloading the page.

When you post comment, it’s sent to the server, and the server returns back the result back to your browser, either a ‘thanks for replying’ message or any other data – all without a page reload. We can put some animation or message while Ajax requests are made to the server.

Today, with the help of a live example and stepwise instructions w’ll see how comment posting is carried out in social media sites like Facebook, twitter and others. You should first check the demo comment posting system; both JavaScript and jQuery before we move onto the the tutorial section.

Before we start the tutorial, lets see how comment posting system works.

The entire coding for both is same except swapping the lengthy JavaScript code with jQuery. You should download the files to better understand the coding.

Working explained

  1. Actually when you fill details and post comment, it’s sent to a remote server. Social networking sites and others store this to their database. We are not doing so here.
  2. Server responds. It can send something like ‘Thanks for posting’ or similar message. Here server is sending the entered data back to browser, that’s showing below the form as comment.

Animation can be added while Ajax is processing the data.

The Code

Note: Use absolute path for files and images.

  1. Client side: CSS file

    <style>
    
    .data
    {
     width:300px;
     padding:5px;
     margin:5px;
     border:1px solid #BEDCFF;
     -moz-border-radius:3px;
     -webkit-border-radius:3px;
     border-radius:3px;
    }
    
    .data:focus
    {
     background:#E1EEFE;
    }
    
    #combutt
    {
     width:150px;
     font-size:13px;
     font-weight:bold;
     background:#E1EEFE;
     margin:10px;
     border:none;
     padding:1px;
    }
    
    #comresource
    {
     width:300px;
     background:#E1EEFE;
     overflow:hidden;
    }
    
    </style>
    
  2. Client side: Comment Form

    <form name='form' id='comform' >
    
     Name:<input type='text' name='uname' class='data'>
     Email:<input type='text' name='uemail' class='data'>
     Comment:<textarea type='com' name='udata' cols=40 rows=4 class='data'></textarea>
     <input type='button' onclick='post_it_com()' value='Post Comment' id='combutt'>
    
     <p id='display'></p>
    
    </form>
    
  3. Client side: AJAX file

    ———-if using Javascript———-

    
    <script language='Javascript'>
    
    function post_it_com() Function called when button is clicked---3
    {
    document.getElementById('display').innerHTML="<span style='color:#57A5FE;font-weight:bold;'>Processing...</span><img src='../blogdata/loader2.gif'>"; Animation while data is processed
    var uname=form.uname.value;
    var uemail=form.uemail.value;
    var udata=form.udata.value;
    if (window.XMLHttpRequest)
    {
    xmlhttp=new XMLHttpRequest(); Object for IE7+, Firefox, Chrome, Opera, Safari---4
    }
    else
    {
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); Object for IE6, IE5---4
    }
    xmlhttp.onreadystatechange=function()
    {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById('display').innerHTML=xmlhttp.responseText; Receiving data from processcomment.php---8
    }
    }
    xmlhttp.open("GET","../blogdata/processcomment.php?uname="+uname+"&uemail="+uemail+"&udata="+udata,true); Sending data to processcomment.php---5
    xmlhttp.send(null);
    }
    
    </script>
    
    

    ———-if using jQuery———-

    </span>
    
    <script language=’Javascript’>
    
    function post_it_com()
    {
    $.get("blogdata/processcomment.php",function(data){$('#display').html(data).hide().fadeIn(100);}); Steps 3-8 everything in a single LOC
    }
    
    </script>
    
    <span style="color: #000000;">

  4. Server side code: process the sent data (processcomment.php)

    </div>
    <div>
    
    <div id='comresource'>
    <img src='http://yourravi.com/design-dev-demo/social-media-comment-demo-ravi-sharma/blogdata/avatar.jpg' style='float:left'>
    <?php
    echo "<span style='color:#57A5FE;font-weight:bold;'>".$_GET['uname']." says </span>".$_GET['udata']; Fetching and Sending data back to browser---6
    sleep(1); 1 sec wait to reduce server load---7
    ?>
    </div>
    
    </div>
    <div>

How Code is working (follow numbers in code)

  1. Form takes your name, email and comment.
  2. To prevent page refresh, we don’t submit the form and would use button instead. Button has onclick event attached to it.
  3. When the button is clicked, the data(name, email and comment) is sent to post_it_com() JavaScript/jQuery function.
  4. Within post_it_com(), we create an Ajax object that carries data between server and the browser. Syntax is different for older IE and other browsers. Animation starts to appear now.
  5. The object carries data (name, email and comment) to a php file called processcomment.php placed on server, invisible to client/user.
  6. Processcomment.php processes the data and returns back the response to the users browser. Social networking sites  saves this data to their database that’s why they are displayed whenever you open your account.
  7. We put a wait for 1 seconds to reduce server load and allow animation/fadeIn effect to be visible for at least a second.
  8. Data received from processcomment.php is displayed.
blog comments powered by Disqus