auto refresh ajax div running on php page

Question

Please see my code below. I want to auto refresh a div on a php page. I tried to refresh through javascript and html header, but it is slowly slowing down my computer.

page2.php

<?php

if($_GET['type']!='ajax'){
    include 'header.php';
    echo "<div id='main-content'>";
}
?>
Itm 1</br>
Itm 2

<img class="ajax-loader" src="ajax-loader.gif" alt="loading..." />

<?php
if($_GET['type']!='ajax'){
    echo "</div>";
    include 'footer.php';
}?>

app.js

$.cergis = $.cergis || {};
$.cergis.loadContent = function () {
    $('.ajax-loader').show();
     $.ajax({
         url: pageUrl + '?type=ajax',
        success: function (data) {
            $('#main-content').html(data);
            // hide ajax loader
            $('.ajax-loader').hide();

  }
    });
    if (pageUrl != window.location) {
        window.history.pushState({ path: pageUrl }, '', pageUrl);
    }
}
$.cergis.backForwardButtons = function () {
    $(window).on('popstate', function () {
        $.ajax({
            url: location.pathname + '?type=ajax',
            success: function (data) {
                $('#main-content').html(data);
            }
        });
    });
}
$("a").on('click', function (e) {
    pageUrl = $(this).attr('href');
    $.cergis.loadContent();
    e.preventDefault();
});
$.cergis.backForwardButtons();

i have tried different variation but no luck. please help me.

thanks.

app.js changed...

function myTimer() {
  $('.ajax-loader').show();
  $.ajax({
      url: pageUrl + '?type=ajax',
      success: function (data) {
          $('#main-content').html(data);
          // hide ajax loader
          $('.ajax-loader').hide();
        }
  });

}

setInterval(function(){myTimer()}, 1000);

'showing down'? you sure?

Strawberry
– Strawberry

2013-07-22 13:09:30 +00:00
Commented Jul 22, 2013 at 13:09 — Strawberry
– Strawberry, Commented Jul 22, 2013 at 13:09
sorry its slowing down....

fin
– fin

2013-07-22 13:13:29 +00:00
Commented Jul 22, 2013 at 13:13 — fin
– fin, Commented Jul 22, 2013 at 13:13

Korvo · Accepted Answer · 2013-07-22 14:09:26Z

1

Try setTimeout:

function myTimer() {
  $('.ajax-loader').show();
  $.ajax({
      url: pageUrl + '?type=ajax',
      success: function (data) {
          $('#main-content').html(data);
          // hide ajax loader
          $('.ajax-loader').hide();
          setTimeout(myTimer,1000);//so that the request ends setTimeout calls a new request.
      },
      error: function () {
          setTimeout(myTimer,1000);//If there is an error in the request the "autoupdate" can continue.
      }
  });
}
myTimer();//fire

this way setTimeout() waiting to finish the request to invoke a new request.

setInterval() does not wait, which makes simuntaneos generate multiple events, which causes the slowness.

edited Jul 22, 2013 at 14:09

answered Jul 22, 2013 at 13:36

Korvo

9,8069 gold badges61 silver badges129 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Yabada · Accepted Answer · 2013-07-22 13:07:02Z

0

You can use setTimeout($.cergis.loadContent, 1000); to refresh once or setInterval($.cergis.loadContent, 1000); to refresh each seconds (1000 milliseconds = 1second).

See http://www.w3schools.com/js/js_timing.asp

edited Jul 22, 2013 at 13:07

answered Jul 22, 2013 at 12:57

Yabada

1,7581 gold badge16 silver badges36 bronze badges

4 Comments

fin Over a year ago

i tried both of them....actually this time its starts but not end the action...stuck in middle...

Yabada Over a year ago

What these functions will do is start the function you give in parameter. So if it doesn't end it's because the function you give is not doing what you call "end the action".

fin Over a year ago

i changed app.js at the end of original post...basically this ajax changed the div on click....what i want it should change auto...

Yabada Over a year ago

$(function(){ setInterval(myTimer, 1000);} will start the interval when DOM is ready

Collectives™ on Stack Overflow

auto refresh ajax div running on php page

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related