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?
Related
I have a screen I am creating to manipulate a document. As part of the web form I have a table of page thumbnails on the left side with controls for the current page in the main portion of the screen. When a thumbnail is clicked an UpdatePanel in the body section is updated with the info for that page.
I have just added the ability to change the order of the pages by dragging the thumbnails up and down. This uses JqueryUI's Sortable feature with a hidden asp:Button to communicate the changes back to the server.
All of that works when used separately. However, when I click a thumbnail to select a page the table that they are in looses the sortable property. I can easily re-establish it using a JavaScript command. But how do I call a Javascript command at the end of the WebForms event?
It is strange that after clicking on a thumbnail the script is broken. But you would have to post some source code and ASPX/ASCX to investigate that.
But it is possible to execute some javascript at the end of a postback. Have a look at this documentation:
https://learn.microsoft.com/en-us/previous-versions/aspnet/bb398976(v=vs.100)
I think you want to have a look at the 'pageLoaded' or 'endRequest' events, maybe you can call your javascript from there.
I'm trying to set up automatically focus on first loaded article. (f.e. user clicks on the button "load more" and new articles are loaded).
My react implementation:
I'm using ref attribute in <Link> component, which is from react-router library and then I'm calling focus() method in lifecycle method componentDidMount().
It works on all devices except iOS. If I turn on voiceover on iphone and then on webpage I click on the button, it doesn't automatically focus on first loaded article). It works just with html anchor tag.
I read some articles before and it looks that it's not possible to do this in this way but only with firing some event f.e. click event.
Can someone confirm that it's not possible to solve it in this way or there is any workaround without using jquery ?
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....
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
When I change page using:
$.mobile.changePage('#newPage');
the browser's url changes correctly, but I see blank page, and I have to refresh the page (F5) to see it.
I use PHP to place all pages in one HTML (tiny app, of 3 pages), and tried also:
$.mobile.changePage('#newPage', { allowSamePageTransition:true });
It looks like it starts the animation and then stops for some reason.
More than that: if I go back and forward using the browser's buttons, all pages are displayed blank, unless I refresh.
Any suggestion ?