jQuery News Updates | Lessoncup Programming Blog

Friday, 8 November 2013

jQuery News Updates

Hi, today i am going to show you about facebook auto updates, as we seen in facebook at right side top of the corner we able to see the user activity updates, i have done same concept using jquery, ajax and php, let's see how we do this




HTML

in html structure take a form to enter your name and message and put it in one place, and take one more div to show the message updates and put it in right side top of the corner and give it class name messages.

put a loader div inside the messages div to display the loading image while updating the messages

take UL tag and give the id name #amsalert this tag is show the auto updates, at end of the UL tag include the messagealerts.php file to show the regular messages
<div class="lessoncup">
<div id="formbox">

    <ul class="ul">
      <li> <span> Name:</span><br/>
      <input name="name" type="text" id="name" class="forms1" placeholder="name">
      </li>
      <li>Message<span>:</span><br/><textarea name="mess" class="forms1" id="mess" placeholder="enter message"></textarea>
      </li>
      
      <li style="margin-top:5px;">
        <div class="send">Tweet</div>
      </li>
    </ul>
  </div>
</div>

<div class="messages">
<div id="loader"></div>
<ul id="amsalert">

</ul>
<?php include("messagealerts.php")?>
</div>

CSS

<style>

body{ font-family:Verdana, Geneva, sans-serif; color:#000; font-size:11px; background-color:#FFF; margin:0; padding:0;}

.lessoncup{width:300px; height:auto;border:solid #6895CC 1px;-webkit-box-shadow: 0 2px 5px #666;
box-shadow: 0 2px 5px #666; padding:10px;font-family:Arial, Helvetica, sans-serif; font-size:11px; margin:50px 0 0 400px; float:left;}

.messages{width:250px; height:638px; overflow:hidden;border:solid #8CACDD;font-family:Arial, Helvetica, sans-serif;font-size:11px; float:right; border-width:0 0 1px 1px;}

#loader{font-size:12px;display:none; margin:0 auto; width:112px; height:20px; padding:10px;}

#amsalert{ color:#fff; padding:0;list-style:none; margin:0; padding-left:1px;}

#amsalert li{ background-color:#6895CC; margin-top:1px; padding:10px; display:none; cursor:pointer;}

#amsalert li:hover{ background-color:#4E65C0; cursor:pointer;}

#msalert{ color:#fff; padding:0;list-style:none; margin:0; padding-left:1px;}

#msalert li{ background-color:#6895CC; margin-top:1px; padding:10px;}

#msalert li:hover{ background-color:#4E65C0; cursor:pointer;}

#mname{ color:#FF0; font-weight:bold;}

.ul{ margin:0; padding:0; list-style:none;}

.ul li{ padding:10px; padding-bottom:0; font-size:12px; color:#000;}

.send{ background-color:#6895CC; border:none; border-radius:5px; padding:10px; width:40px; cursor:pointer; color:#fff;}

.send:hover{ background-color:#4E65C0;}

.forms1{color:#333;padding:10px; width:200px; border:solid #6895CC 1px; font-size:14px; resize:none; margin:5px 0 5px 0; outline:none;border-radius:5px;}

#formbox{width:240px; height:auto;margin:0 auto;}

</style>

JAVASCRIPT

write the click function to send button, after complete the validation part, show the loader div and call the sendmessages.php file using ajax request inside the ajax success function and display the content inside #amsalert div and slidedown the li : first child using slidedown() method 
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script>

$(document).ready(function(){

 $('.send').click(function(){

  var name=$('#name').val();
  var mess=$('#mess').val();
 
  
  if(name==""){
   
   alert('enter your name');
   
  }else if(mess==""){
   
   alert('enter your message');
   
  }else{

   var messdata= "name="+name+"&mess="+mess;
   
   
   $("#loader").show();
   $("#loader").fadeIn(400).html('<img src="loader.gif" align="absmiddle">&nbsp;<span class="loading">Loading updates</span>');
   
   $('.send').css({ "width": "82px", "cursor": "wait" });
   $('.send').text('Tweeting wait..');
   
   $.ajax({
    
    type:"post",
    data:messdata,
    url:"sendmessage.php",
    cache:false,
    success:function(msg){

     $(".forms1").val('');
     $("#loader").hide();
     $("ul#amsalert").prepend(msg);
     $("ul#amsalert li:first").slideDown(500);
     $('.send').css({ "width": "40px", "cursor": "pointer" });
     $('.send').text('Tweet');

    }
    
   });
   
   
   
  }
 });
 
});

</script>

sendmessage.php

connect this file to database and write the query to send the content into messages table and write the query to retrive the messages and echo the column names in LI tag, this message will load as a first list item in #amsalert div
<?php
extract($_REQUEST);
include("db.php");

$sql=mysql_query("insert into messages(name,message) values('$name','$mess')");

$msql=mysql_query("select * from messages order by mid desc");
$mrow=mysql_fetch_array($msql);
?>

<li><span id="mname"><?php echo $mrow['name']?></span><br/>
<?php echo substr($mrow['message'],0,40);?>
</li>

messagealerts.php

connect this file to database and write the query to retrive the all messages from messages table and display it inside the messages div
<?php
extract($_REQUEST);
include("db.php");

$sql=mysql_query("select * from messages order by mid desc limit 0 , 20");
while($row=mysql_fetch_array($sql)){
?>
<ul id="msalert">
<li><span id="mname"><?php echo $row['name']?></span><br/>
<?php echo substr($row['message'],0,40);?>
</li>
</ul>
<?php }?>

Live Demo   Download Script

13 comments :

  1. feel free to give your comments and suggestions :-)

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. Extracting the request and then bluntly inserting user input into the query. I don't see how that could bit you in the ass, at all.

    ReplyDelete
  4. Appreciate your efforts.
    But if link is open in two different browsers.
    It should update in both browsers, simultaneously.

    ReplyDelete
    Replies
    1. yes i am working on that .. thank you

      Delete
  5. From this code console show one XHR per user interaction
    XHR finished loading: "http://demos.pixelmax.in/jquery-news-updates/sendmessage.php". jquery-1.10.2.min.js:6
    send jquery-1.10.2.min.js:6
    x.extend.ajax jquery-1.10.2.min.js:6
    (anonymous function) (index):39
    x.event.dispatch jquery-1.10.2.min.js:5
    v.handle

    Still better than twitter script, XHR requests froze console ... I know twitter consistently does that only if there is a new tweet.. not when the user timeline is idle... i think that code is buggy...

    However, great show bro!

    ReplyDelete
  6. Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in C:\*****\www\*****\jquery-news-updates\sendmessage.php on line 8

    Am i doing something wrong...??

    ReplyDelete
    Replies
    1. is this correct?
      CREATE TABLE IF NOT EXISTS `messages` (
      `name` int(11) NOT NULL AUTO_INCREMENT,
      `messages` text NOT NULL,
      PRIMARY KEY (`name`)
      )

      Delete
  7. what is the databse and table ..?

    ReplyDelete
  8. how can i use a TABLE tag here instead of UL tag..,? thanks..,

    ReplyDelete

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons