CODEWITHSUNDEEP
htmljquery-mobilerender
Zero_73
Zero_73

Reputation: 183

render div using JQuery mobile

I have a div that refresh every 3 sec but when the the div refresh the css is not render. This is my code.

in html

 <div id="statusbar"></div>

in js

$( document ).ready(function(){
update2();
function update2() {
        $('#statusbar').load('statusbar.php');
        $('#statusbar').trigger('create');
        statustimeout = setTimeout("update2()", 3000);
}
});

Im using JQuery mobile. I'm newbie so be please specific. TY in advance!

Upvotes: 1

Views: 433

Answers (3)

Gajotres
Gajotres

Reputation: 57309

You are doing this incorrectly.

Load is asynchronous AJAX function so you can't just call trigger('create') directly after. Basically code will never wait for async functions to end, code execution will simply go further and trigger('create') will not have anything to enhance.

To do this correctly you need to execute load function and wait for successful callback to trigger, something like this:

$('#statusbar').load("statusbar.php", function() {
    alert( "Load was performed." );
    $('#statusbar').trigger('create');
});

Second thing, you are using trigger('create') in the wrong way. It should be triggered on data-role="content" div because it main purpose is to enhance whole content, not part of it. Just like that trigger('pagecreate') is used to enhance whole page and it should be called on data-role="page" div. If you are using jQuery Mobile 1.4 then you should use enhanceWithin().

So everything should look like this:

$('#statusbar').load("statusbar.php", function() {
    alert( "Load was performed." );
    $('#statusbar').enhanceWithin();
});

Upvotes: 1

lindsay
lindsay

Reputation: 972

E Rullmann summed it up. You'll want to do something like that. Or maybe consider doing something like this.

$(document).ready(function () {
   var update2 = function () {

      $('#statusbar').load('statusbar.php');
      $('#statusbar').trigger('create');

   };

   setTimeout(function () {
      update2(); 
      /* this function isn't hoisted, 
         so you can only call it after it's declared */
      }, 5000 /*your timeout value*/);
});

Upvotes: 0

E Rullmann
E Rullmann

Reputation: 344

update2() cannot be a string, it needs to be a function (so just put function(){ update2() } instead of "update2()"). Also your function call needs to be after the definition.

See this fiddle for an example.

Upvotes: 1

Related Questions