Search jQuery

jQuery Forum

Reload jquery mobile styles after ajax call

in jQuery Mobile • 12 years ago

I an currently refreshing the data in a div panel by making ajax calls, but the the content is comming as plain HTML and jquery mobile is not able to apply its styles as it do when full page reload is done.

I have a table in the web page and when i reload the page, buttons comes fully styled. But when i make ajax calls the buttuns are not styled at all.

Code for buttons:
<div style="text-align: center;" data-type="horizontal" data-role="controlgroup">
      <a href="#" data-role="button"> < </a>
      <a href="#" data-role="button"> 10 </a>
      <a href="#" data-role="button"> > </a>
</div>

Is there any jQuery mobile function which i can call to style the elements after ajax call is made.

Thanks

Replies(5)

mluhring

Re: Reload jquery mobile styles after ajax call

12 years ago

I can get around this to some extent in my app because I am displaying a series of lists. In the pagehide event I am making ajax calls to get data for the next page. I can update the lists and then call $('ul').listview('refresh') which will apply the styling to my lists. I have not seen a way to "refresh" the entire page though.

yves.jque..

Re: Reload jquery mobile styles after ajax call

11 years ago

        $txt = '';

        $txt += '<div id="btn-page" data-role="controlgroup" data-type="horizontal">';
        for ($i=1; $i<=4; $i++) {
        $txt += '<a data-theme="e" href="#" data-role="button">' + $i + '</a>';
        }
        $txt += '</div>';


        $('#content-1').html($txt);
        $('#btn-page a').buttonMarkup();
        $('#btn-page').controlgroup();

david.mcm..

Re: Reload jquery mobile styles after ajax call

11 years ago

Try this

$("#page").trigger("pagecreate");

It will apply enhancements for all added content within the page.

You will still need to refresh lists using $('ul').listview('refresh').

Ex.

$(document).delegate('#mypage', "pageshow", function() {
var page = $(this);

// load data

page.trigger('pagecreate');
$("ul").listview('refresh');

});

mgbrake

Re: Reload jquery mobile styles after ajax call

10 years ago

I was using .load and running into problems. Looks like using a get with html can allow the create trigger to be called properly, which can work for partial page replacement.

$.get('urltoload', function (data) {
$('#divOfContentsToReplace').html(data).trigger("create");
});

watusiware

Re: Reload jquery mobile styles after ajax call

10 years ago

There's no reason you can't use .load(). .load() has an optional complete callback function that it will call after it is done. You can put your .trigger('create') call in there.

Top Reply

Response title

Attachments

jQuery Forum

Reload jquery mobile styles after ajax call

Replies(5)

Re: Reload jquery mobile styles after ajax call

Re: Reload jquery mobile styles after ajax call

Re: Reload jquery mobile styles after ajax call

Re: Reload jquery mobile styles after ajax call

Re: Reload jquery mobile styles after ajax call

Statistics

Tags

Actions