$('#id').trigger('create'); Does not seem to handle data-role=header

[ahutch]

I would like to dynamically add a header with button(s) that I can set the title and urls.

http://jsfiddle.net/HFbpE/40/

I was able to modify an existing header but not add or remove buttons from it

http://jsfiddle.net/HFbpE/42/

[MauriceG]

Could you try pagebeforecreate instead of pagebeforeshow ?

[ahutch]

I would like to change the header on the page depending on the content and each time it is viewed. What you are suggesting would only allow me to change the header the first time the page is loaded.

[MauriceG]

so you keep the page in the dom-cache?

[ahutch]

Yes, one of several role='page' that are in the same page. It is cached by default. I would not want it to be removed as there is no url to re-fetch it.

[brunosabot]

I solve this problem by using trigger("pagecreate") instead of trigger("create")

[ahutch]

I would not advise calling pagecreate an a page that has already been created. I have read other posts on this board saying not to do it.

[brunosabot]

So there's no solution to handle your problem unless the event used for rendering the header also bind create or whatever you want

It seems to be the one at line 3741 in the RC2 unminified

FYI, I'm using the pagecreate on a website and it seems to have no side effect... yet

[fcheslack]

this appears to be the same issue as #2215 #2215 (just a friendly link for the people triaging)

[CarloMendola]

I confirm the behaviour, i tried to use dynamic header but no way to get it work with .trigger("create")

my example: http://jsfiddle.net/Km8gb/

The only way seems to be 'safe' to call (by now) which allow to achieve the wanted result is using trigger("pagecreate") instead of trigger("create") as suggested by brunosabot

[ghost]

I also confirm this behaviour. trigger('pagecreate') does enhance the dynamically injected header but clicking the back button does not route back.

And there is another bug: if you add dynamically a header and footer widget, with data-position="fixed", trigger('create') on the page jQM injects

class="ui-footer-fixed slideup"

in both, the header and footer div.

Can we expect a fix?

[ricksuggs]

I have a use case for this as well:

-add the header to a home page dynamically, so that it doesn't show before a login appears after a failed authentication check.

[ghost]

This is really a nasty bug. There seems to be no way to reset focus of a nav-btn of a navbar in a header element when the page is create dynamically.

Trying this:
$('#featured-btn').attr('class', 'ui-btn-active');
$("div:jqmData(role='header')").trigger('create');

doesn't enhance featured-btn.

And using

$('#featured-btn').focus();

doesn't change the forcus to this nav-btn.

[rbu]

I have the same problem. Isn't it possible to extract the header/footer/content enhancing into a create function on the elements so this can be called multiple times and works as documented for the other widgets?

[jaspermdegroot]

I am going to close this ticket as duplicate in favor of #2215 (high priority and assigned to a team member). Thanks for the pointer @fcheslack !

[frequent]

@uGoMobi: sure this works? I'm sitting over a header which I had been inserting fully enhanced with a note to this issue. I tried with JQM 1.3RC1 latest (few days ago) and I cannot trigger("create") the header when sending unenhanced markup.

[arschmitz]

Triggering create must be done on parent container not on header itself

[frequent]

@arschmitz: sorry to have to bother you again with this, but it's not working.

Here is a sample page

First attempt is with renderjs, a plugin I'm using to load gadgets (widget+logic). The header will be appended to the gadget, I call create on the gadget (parent).

2nd attempt, click the button to remove existing headers and insert a new header, plus calling create on the parent (page).

Both don't work with latest JQM from just now. I added consoles in the widget in JQM. Pagecreate/Create are registered, but _create never fires on the toolbars.

Anything I'm doing terribly wrong?

Thanks!

[jaspermdegroot]

@frequent

Triggering create won't work for header and footers, because we only bind to pagecreate in page.sections.js

Update: see also my comment here #2215 (comment)

[frequent]

@uGoMobi:

Thanks. So the issue should be: "page.section enhancements can't be applied to new injected html"... hm. I'm still stuck with a naked header ;-)

[jaspermdegroot]

@frequent

Yeah, this is still something we need to work on. It's on the planning for 1.4 now.
You could trigger "pagecreate" but I am not sure if there is anything else bound to that event (besides widget enhancement) that could cause problems.

[frequent]

@uGoMobi, @arschmitz

Ok. I got it working for my purpose (I needed JQM to apply all "non-markup things" on the widget, which on toolbars works on create when calling on the parent page).

Update: As @uGoMobi said, I'm missing the enhancements done in page.sections.js, but as I'm doing these myself anyway, triggering create is "just what I need"

[LandMark13]

Having the same issue using latest version 1.3RC1 any solution for this? I tried several examples posted here but none of them work, the header is not properly created and the title floats to the left

[frequent]

@LandMark13 : you can call trigger create (which will set some things) but you will have to generate the enhanced markup yourself.

[ivansammartino]

That's my problem too!! I was trying to inject an AJAX response like this:

$('#home div[data-role=header]').html(response).trigger('create');

But no luck at all; I also tried:

$('#home div[data-role=header]').html(response).trigger('pagecreate');

But I get an error at line 5421 of jquery.mobile-1.3.0.js:

TypeError: $page.data(...) is undefined
o = $page.data( "mobile-page" ).options,

Any help, please? Thanks in advance!

[frequent]

To follow up:

I can only get it to work consistently if I'm calling pagecreate manually on the page on pageshow. Otherwise my dynamic content does not get enhanced, especially once re-visiting pages and re-inserting content.

@ivanhalen: It should work if you call pagecreate on the page(!) not the header. When calling on the header, the error you get makes sense, doesn't it ;-)

I'm also thinking whether a some sort of callback event makes sense so one could listen for when a widget is done enhancing.

[arschmitz]

Just as an update on this issue i'm currently rewriting the toolbars into a widget which will solve this issue.

[ivansammartino]

@frequent : mmmm.. sorry, I began using jQuery Mobile yesterday and I'm still learning :-)
Do you say like:

$('#home').trigger('pagecreate'); ?

I tried it with the following code, but the Firebug console show me infinite (literally infinite) calls to 'myhome.php'

function loadPage(page){
$.ajax({
url: 'ajax/' + page + '.php',
success: function(data) {
$('#home div[data-role=header]').html(data);
$('#home').trigger('pagecreate');
}
})
}

$(document).bind("pagecreate", function(){
loadPage('myhome');
})

[LandMark13]

That's because you have an infinite loop in there. loadPage calls pagecreate event, you have a bind that binds loadPage to the pagecreate event so it goes on and on.

[frequent]

I think you better ask this on the JQM-Forum or SO.

Look at what you are setting up: The loadpage function is loading data and triggers pagecreate. Inside the function call you set a binding for pagecreate which re-triggers loadpage. Actually you have created an exponential infinite loop because you are also adding an additional binding on every call of loadpage ;-)

[ivansammartino]

Oh, I see!!! Thanks a lot, I changed with the "classic":

$(function() {
loadPage('home');
});

Don't know if I'm right but it works now! Many many thanks!

[jaspermdegroot]

@arschmitz added the new toolbar widget. Closing as fixed.

[mgmarino]

It would be nice to have a comment on this as to how this fix (link to the fix?) solved the problem and how we should be implementing dynamic header loads instead.

[jaspermdegroot]

@mgmarino

It's fixed by adding a new toolbar widget, that will land in 1.4 (alpha release in two weeks). So this is not a small/simple fix that you can apply in current or previous versions.

What you can do now is enhance the header yourself. Check which classes are added by the framework if the header would already be in place (ui-header, ui-bar-* theme class, etc.) and add those classes to the markup that you inject. You also have to add class ui-title to the heading inside your header. If you have buttons inside your header you can add class ui-btn-left|right to position them.

[mgmarino]

@uGoMobi

Awesome, that's very helpful. I dug through already and found that it was in the 1.4.0-pre build so I've started using that (calling e.g. $('#myobj').find("[data-role=header]").trigger("create").toolbar() ). If I see stability issues using this, I will revert to the solution you suggest.