CODEWITHSUNDEEP
phpjquery-mobile
MYR
MYR

Reputation: 391

How do I get jQuery Mobile to dynamically refresh a div, when the refresh time changes?

Writing code in php and jQueryMobile.

I am trying to get a div to refresh based on a variable refreshTime

<div id="dynamicContent">
<em><?= $this->subtitle ?></em>
<img src="<?= $this->image ?>"/>
<em><?= $this->synopsis ?></em>
<br/> set refresh: <?= $this->refreshTime?> time on server: <?= date("H:i",time());?>  
<h2><a href="<?=$this->irrelaventLink ?>"> More Details</a></h2>
</div>

<script>
setTimeout(function() {
                $('#dynamicContent').load('/url/that/generates/plain/html/');
            },<?= $this->refreshTime ?>*1000);
</script>

So this code will fire once and refresh the div dynamicContent after refreshTime has lapsed. The problem is that I want to keep refreshing with the new value of refreshTime that will be set once the refresh has happened.

I have scoured the web, looking for a jQuery Mobile way to do this, although if a jQuery way works I am happy to try that and see what that looks like on a mobile.

Note that the line:

<br/> set refresh: <?= $this->refreshTime?> time on server: <?= date("H:i",time());?>

Is only there for debugging

Any comments/thoughts/answers appreciated.

Cheers

Upvotes: 1

Views: 549

Answers (1)

Marc B
Marc B

Reputation: 360762

You've hard coded the refresh time into the setTimeout function. It looks dynamic, but only because the value is set when the page is generated and PHP fills in the value. After that, it's hardcoded into the HTML and doesn't change.

If the refreshTime depends on whatever's happening on th eserver, you'd have to get the server to return that new time interval along with the dynamically generated content:

var refreshTime = <?= $this->refreshTime ?>; // set initial value

function refreshContent() {
    $.ajax({
      url: '/url/that/generates/no/longer/plain/html',
      dataType: 'json',
      success: function(data) {
          refreshTime  = data.refreshTime;   
          $('#dynamicContent').html(data.content);
          setTimeout(refreshContent, refreshTime);
      }
    });
}
refreshContent();

Then you'll have to modify the script generating the URL to return a json data structure which contains the new content, as well as the new refresh time.

Upvotes: 3

Related Questions