Thursday, November 3, 2011

jQuery Plugn for Refreshable DIV


I have created a jQuery plugin which can be used in an Ajax enabled websites to refresh the div content. The plugin can be found here.

Where to Use:
         If you have AJAX enabled website and you want to refresh some div contents based on some event on the web page in that case this plugin can be used.
        
How to use:
         In an html page add the script tag for jQuery and refresher plugin script.
        

          <script type="text/javascript" src="jquery.js"></script>
          <script type="text/javascript" src="jquery.refresh.js"></script>

         
          For demo purpose will take a simple example where I have say three DIV's whose contents need to be refresehd with the current date and time when "Refresh Div" link is clicked.
         
          So in body we will write
         
          <body>
             <a id="refreshDiv" href="#">Refresh Div</a>
             <div id="first" >First Div: Content to replace</div>
             <div id="second">Second Div: Content to replace</div>
             <div id="third" style="display:none">Third Div: Content to replace</div>
           </body>

         
          We will add a click event handler on the link using jQuery.
          Line $("div").refresh(); will select all the div's in the page and will call the refresh method on it.
         
          $(document).ready(function() {
                $("#refreshDiv").click(function() {
                   $("div").refresh();
                });
           });
   
          Now we will define three Javascript functions which will actually refresh the content of the DIV.
         
          first_refresh = function(){
                var time = new Date();
                $("#first").html("First Div: "+time); //your code will go here
            }
            second_refresh = function(){
                    var time = new Date();
                    $("#second").html("Second Div: "+time); //your code will go here
            }
            third_refresh = function(){
                    var time = new Date();
                    $("#third").html("Third Div: "+time); //your code will go here
              }
           
 Then initialize the div's which can be refrehsed on an event. Below is the code snippet where I have defined three method which refreshes the content of three div's
          And then register these functions with the respective div.

          <script type="text/javascript">
             
              first_refresh = function(){
                  var time = new Date();
                  $("#first").html("First Div: "+time); //your code will go here
              }
              second_refresh = function(){
                      var time = new Date();
                      $("#second").html("Second Div: "+time); //your code will go here
              }
              third_refresh = function(){
                      var time = new Date();
                      $("#third").html("Third Div: "+time); //your code will go here
              }
        
             $(document).ready(function() {
                $("#first").refresh('callback_method',first_refresh);
                $("#second").refresh('callback_method',second_refresh);
                $("#third").refresh('callback_method',third_refresh);
               
                $("#refreshDiv").click(function() {
                                   $("div").refresh();
                });
              });
        </script>
 The output should look like something below

Before refresh click:

After refresh click: