CODEWITHSUNDEEP
javascriptjqueryhtmljquery-mobile
Dr.Kameleon
Dr.Kameleon

Reputation: 22820

Refreshing jQuery Mobile elements after 'manual' manipulation

OK, so here's what I'm trying to do :

However (and that was pretty much expected), the changes won't show up.

How am I supposed to make the page refresh? (wait I don't want the original page, but the final one with the tweaks, rebuilt).

Any ideas?

UPDATE:

Hmmm... after countless (blind) experiments I think I'm rather close to a solution :

$.mobile.pageContainer.trigger("create");

Upvotes: 0

Views: 77

Answers (2)

Omar
Omar

Reputation: 31732

When doing changing or appending toolbars (header/footer) dynamically to active page, you have to call two functions.

  • To enhance toolbar when dynamically added:

    $.mobile.activePage.trigger("pagecreate");

  • To modify options of existing toolbar

    $(".selector").fixedtoolbar();

To reset page's height and remove extra padding after adding toolbar dynamically or modify options.

$.mobile.resetActivePageHeight(); /* works only on 1.3.2 and later */

Demo

Update:

Alternatively, you can fix toolbars using $(".selector").fixedtoolbar(); instead of $(".selector").attr("data-position", "fixed");. In this case, you don't need to call .trigger("pagecreate"), unless you append them dynamically into active page.

Upvotes: 1

Ved
Ved

Reputation: 2701

$("#the-header").css({ 'data-position': 'fixed' });

OR 

$("#the-header").attr('style','data-position:fixed');

Upvotes: 0

Related Questions