Jquery page refresh without reload() ?

Discussion in 'jQuery' started by murugesan, Oct 1, 2010.

0
  1. #1
    Hi All,

    I need to update data dynamically without reloading the page each and every time, data will be getting for every 10 seconds. Please help with jquery code.
     
    murugesan, Oct 1, 2010 IP
  2. wab

    wab Member

    Messages:
    57
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    43
    #2
    You can use the jquery load() function which allow you to refresh the content of a div without refreshing the entire page, and the delay() function to refresh the div every 10 seconds.
    Let say you have your html page index.html, inside this page a div 'mydiv' with your data you want to refresh, and a php page 'page.php' to manipulate your data, so you could do something like:
    
<html>
  <head>
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
     <script type="text/javascript">
          $(document).ready(function () {
             $('#mydiv').delay(10000).load('page.php');
          });
      </script>

  </head>
  <body>
     <div id="mydiv"></div>
  <body>
</html>
    Code (markup):
    Not sure if it will refresh every 10 seconds, or just one time after 10 seconds, as I didn't try it, but if you modify it, maybe with a setTimeout("myfunction()", 10000), it might work.
     
    wab, Oct 1, 2010 IP
  3. murugesan

    murugesan Peon

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Hi wab,
    Thanks for the reply, i tried, but if load the page.php in mydiv the whole page with header and footer are loading into the mydiv, i need only the content to be loaded.
     
    murugesan, Oct 1, 2010 IP
  4. wab

    wab Member

    Messages:
    57
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    43
    #4
    if your page.php is only a function accessing a database for example, and building a table around your data, so only this table will be sent to mydiv. That will work perfectly if mydiv is only the container of the content you want to refresh every 10 second and if page.php is used only for your data.
     
    wab, Oct 1, 2010 IP
  5. murugesan

    murugesan Peon

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    will you able give me the example with source code, if you dont mind post or else private message me
     
    murugesan, Oct 1, 2010 IP
  6. GFX_Lover

    GFX_Lover Peon

    Messages:
    60
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    How about this.

    $(document).ready(function(){
    setInterval(function(){
    $.get("page.php", function(data){
    $("#header").html(data);
    });
    }, 10000);
    });
     
    GFX_Lover, Oct 3, 2010 IP
  7. murugesan

    murugesan Peon

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    then javascript in the header is not function or calling y?....
     
    murugesan, Oct 14, 2010 IP
  8. viron86

    viron86 Active Member

    Messages:
    426
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    60
    #8
    try json
    you can use getJson function to load only dynamic data
     
    viron86, Oct 15, 2010 IP
  9. gapz101

    gapz101 Well-Known Member

    Messages:
    524
    Likes Received:
    8
    Best Answers:
    2
    Trophy Points:
    150
    #9
    hi, you might want to use this
    
$(document).ready(function(){
   setInterval(function(){
      $("#header").load('page.php #content_div');
   }, 10000);
});
    PHP:
    where #content_div is the thing you only want to display
     
    gapz101, Oct 25, 2010 IP
  10. murugesan

    murugesan Peon

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    yes, i need to load only in the #content_div.. Thanks for the reply let me try...
     
    murugesan, Oct 25, 2010 IP
  11. murugesan

    murugesan Peon

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Not working....
     
    murugesan, Oct 25, 2010 IP
  12. anh2.info

    anh2.info Peon

    Messages:
    26
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #12
    the same problem with me , it's not working,anybody have other way?
     
    anh2.info, Oct 27, 2010 IP
  13. Serggg

    Serggg Well-Known Member

    Messages:
    38
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    113
    #13
    here's the solution I've applied on one site (adapted, mine was using link click as a trigger):
    
setInterval(function(){
var $container = $('#container');
var url = 'your_url_to_load_data'; // must return html, even if you type the url in address bar of your browser
  $.ajax(url).done(function(response){
    $container.html(response);
  });
}, 10000);
    Code (Javascript):
     
    Serggg, Aug 21, 2019 IP