I want to load some data with ajax and manipulate the DOM of a given "detail page". BEFORE the page is being shown. Important is that nothing of the "detail page" should be visible till all of the loading and manipulating of this page has finished. During the loading process the loading widget should also appear.
I tried this with:
$( '#page_series_detail' ).live( 'pageinit',function(event)
{
AjaxSeriesDetail();
});
But in this case all of the loading and manipulating happens after the page is being shown.
Has anyone a hint for me ?
You should try the pagebeforeshow event of jQuery Mobile. This event will fire before showing the page to the user.
As per the documentation
Triggered on the "toPage" we are transitioning to, before the actual
transition animation is kicked off.
Related
Picture a very common use-case described in the official Handbook: a <turbo-frame> that contains pagination links.
So, turbo supports (encourages?) annotating these pagination links with data-turbo-action="replace", and the resulting experience is very nice: browser URL gets updated, a page reload will load the correct pagination and the browser back button will show the last page loaded correcly. 🎉
However, as soon as you add data-turbo-action="replace" on any link, they start firing a turbo:load event on the page when clicked, even tough they are inside a <turbo-frame>; in my mind, turbo:load should be analogous to a DOMContentLoaded event, and it should fire only ONCE per page loaded; if a turbo frame is being navigated by pagination, I don't want my event handlers designed for the page that contains the turbo-frame to be fired again and again each time a frame within the page paginates.
Note that this ONLY happens if data-turbo-action is present; otherwise, the links inside the turbo-frame will not trigger a turbo:load on the page.
Lastly, the turbo:load event being fired is indistinguishable from the one on the first page load or from a full turbo visit outside the turbo-frame; it's target is the page's root html element, so I can't even detect it was a turbo:load coming from a turbo-frame.
So, how to avoid links clicked inside a <turbo-frame> that were marked with data-turbo-action="replace" to trigger turbo:load on the page, or at least distinguish these events from the sole turbo:load fired as soon as the page loads for the first time?
Please see this jsbin test page that illustrates the issue
I have a simple jqm page with two page divs. The only initialization is being done inside a $(document).on('pageshow', function(){}); block. Inside the block, I initialize a fullcalendar.js calendar.
If I load the page as an external page (the first link in the menu) it loads without a hitch (but it's not using ajax, so the page flickers and there's no transition).
If I load the page using the jqm convention of linking to the id of the second page div with an anchor tag, it loads the calendar div as a page with no data.
If I then refresh the page, the data is displayed. Subsequent use of the menu displays both page divs as pages without issue.
I've seen a lot of discussion about which event of the pagecontainer widget to use, and I'm aware that document.ready() is not the way to go. I've tried all the possibilities, I think (pagebeforeshow, pageshow, pageinit, etc.) There's more detail in the demo, where you can see all the code. If I need to post it here, too, I can do that, but it's easier to see the issue if you load the test at jsbin. I suggest running it in a separate window, so you can refresh the page.
If anyone else has solved this or has an idea what I'm doing wrong, I'd really appreciate the help and / or suggestions.
I put all of the pagecontainer events into my test jsbin code and stepped through them. (Thanks to Gajotres for providing useful documentation on the various pagecontainer hooks). It turns out that the one I needed was 'pagecontainerhide' instead of pageshow, pageinit, or any of the others. Once I modified the code to use that event, the calendar displayed properly on the page div, with transition, and I no longer had to click on refresh to see load the "page".
Since I have all the events there, perhaps others with page change issues can benefit from the test page....
Working on my first jQuery Mobile app. There is a localStorage value that must have a value throughout the application, so I tapped into the pageshow event to check this value:
$(function () {
$("div[data-role='page']").on("pageshow", function (event, ui) {
if (getValue() == null) {
// show the dialog
$.mobile.changePage("#dialog");
}
});
});
This works when navigating through the various pages, but never gets called when the first page loads. I tried to copy the above If statement again below the part where I add the pageshow listener, but it has the effect of showing the dialog, hiding it, then showing it again.
On that first page, it seems like opening the dialog is triggering pageshow (which is strange, considering my selector), which in turn triggers another dialog. Does anyone have advice on how to get around this, or a better way to go about the whole thing?
UPDATE #1: I tried
$.mobile.changePage( "#mypage", { allowSamePageTransition: true, transition: "none" } );
but it had the same effect as my original problem where it launches the dialog, then hides it, then shows it again. It seems like somehow launching the dialog is firing the pageshow event, even though I tried to filter that out in my selector. Note that if you remove the transition: "none" option, the dialog does not appear at all.
UPDATE #2: I also tried to create a blank initial page, then do a simple page transition
$.mobile.changePage("#mypage");
but it still does not have the correct behavior. In this scenario, it does take me to the next page, but the pageshow event does not fire, because my dialog does not appear. I know it is not firing because I can select another page from my navigation menu and the dialog does appear.
UPDATE #3: I changed my selector where I attach the pageshow listener. Instead of selecting where data-role="page", I am selecting the specific pages by their id. Then I re-tried both of the approaches I described in my previous two updates, but it still works incorrectly. First, when I try to refresh the initial page using allowSamePageTransition, it seems that pageshow fires twice, because the dialog launches twice. Then, when I try using a blank initial page, and then do a redirect immediately after I attach the pageshow listener, nothing happens and the dialog never appears. If I navigate to any other page, the dialog works as expected. I don't understand why this first page is so troublesome.
Set a time interval to show the dialog, rather than call it once the page is shown.
$(document).on('pageshow', '#myPage' ,function () {
if (getValue() == null) {
setTimeout(function () {
$.mobile.changePage('#dialog');
}, 100); // delay above zero
}
});
This way, the dialog will popup on pageshow event and only once.
update
I found this interesting jQueryMobile events diagram on this blog. It explains why a dialog or a popup is fired twice on the first page and not on the rest of the pages in case of multi-pages structure. It seems it fires once the page is ready into DOM and again when on pageshow. Setting a timeout prevents the dialog from firing on pageinit, and therefore skips that event until pageshow is triggered.
Image / diagram source: http://bradbroulik.blogspot.co.nz/2011/12/jquery-mobile-events-diagram.html
Most probably is that on first page, that event is already fired when your piece of code is executed. Which explains why you get nothing only on the first page.
About your second point, it's normal since, changePage will "change" the page to the dialog, and once you close the dialog, it will return to your previous page. Thus, the if is executed 2 times.
My suggestion is that for the first time you enter the first page, you can re-transition to the same page just after you register the callback for the pageshow event.
I used "pagecreate" and that seems to solve my problem (so far...)
$(document).on('pagecreate', "#page-formyID", function () {
//whatever
});
sometimes, It will show, sometimes, not, so, how to ensure the ajax loading indicator show in jquery mobile?
Unless there's a major problem in your app, what you have described is a normal situation.
While page transition can take a lot of time (usual page loading/transition time on desktop browsers is 670 ms), page loading into the DOM takes only few miliseconds (usually 3-5 ms). AJAX loader will show only if page loading (into the DOM) takes more then 10ms. Other page transition actions don't count into AJAX call so animation will not be shown after page has been loaded into the DOM.
Actions during page loading/transition:
Page load and processing: 3ms (AJAX loader will show only during this action, if it takes more then 10ms)
Page enhance: 45ms
Transition: 604ms
To read more about this take a look at my other ARTICLE, or find it HERE, search for the chapter called: Page Change Times
One more thing, unless you are using normal page loading AJAX loader will not be show (if your link has an attribute rel="external" or data-ajax="false").
In order to ensure that ajax navigation is done by default Jquery Mobile will add ajax navigation to pages loaded into the DOM so long as you do NOT add the data-ajax="false" attribute to your links and buttons. Otherwise chances are you may have added a global modification that has disabled ajax navigation on certain pages.
OR you could have rel="external" as an attribute in some of your links and buttons, which disables ajax navigation.
If you could be more specific, ie post a jsfiddle example of your problem, I could give you a better explanation. Also please mention what version of Jquery Mobile you are using.
when you do this:
$.mobile.changePage( "#page-home", { transition: "none"} );
add this:
$.mobile.showPageLoadingMsg();
don't forget to add
$.mobile.hidePageLoadingMsg();
at the end of the pageLoad function
Using jQuery Mobile (jquery.mobile-1.0b3.min.js). If i apply a click event to a form, the back button seems to get the click event binding as well. It does this no matter how specifically targeted to an element the selector is. For example:
Using this to set the back button:
Copy code
<div id="pagename-page" data-role="page" data-add-back-btn="true" data-back-btn-theme="b">
And this in a script file:
Copy code
$('#awards-details-page').live('pagecreate', function(event){
$('#awards-details-page input[name=submit]').bind('vclick', function() {
console.log('I'm going to be hijacked by the back button.');
});
});
Clicking on the back button will produce the message in the console when tested in a browser.
Every time you visit the page with the script, it will add another duplicate binding. Attempts to unbind the click event on the pagehide event worked with the targeted element, but back button's bindings persisted.
Can anyone shed some light on this?
Thank you in advance.
dont use vclick you will ge ghost, they have improved CLICK so just use that
also live is not bind... bind is to an element that exist, live is for all elements that have that shared property, before after and during. you past pages exist so you have a set of binded items now not just one for the page you are on. i would scrap the whole back button element and have your own clickable item, for this you can do your own back code and add attributes like data-backto = "#page1", you can then control better what happens when a back button is clicked, especially as android phones have there own back button too.