Binding dynamically generated jQuery mobile elements to Javascript events - javascript

I have multiple pages in my jQuery mobile app and the "infamous" back button is being inserted dynamically; what I mean is that when the main page loads the back button does not show up on the second page in the DOM. As soon as I navigate to the second page jQuery mobile inserts the back button.
I am using the
data-add-back-btn="true"
on the header div of the page to get the back button.
I want to run some of my own functions when the user clicks on the back button. My question is how can I target this dynamically generated content via JavaScript or jQuery?

Related

How to focus on previous tab in all browsers using jQuery?

I'm stuck with an issue; on OpenTwoPages link button click, I'm redirecting to an example.aspx page and in the example.aspx Page_Load event I'm redirecting to example1.aspx page, when click on OpenTwoPages button two pages (example.aspx and example1.aspx) will open in different tabs, browsers will consider example1.aspx will be the current tab, but I need to make an example.aspx page will be the default page when clicking on the OpenTwoPages button.
how can I do this using Jquery or C#?
Thank you.

JS Disable browser back button as soon as your page is ready

I am trying to disable the browser back button via JS code and have already seen lot of answers like
How can I stop the browser back button using JavaScript?
and
Trying to disable the browser's back button
But my problem is unique, The issue is that once my page is loaded and I don't click inside the document (Anywhere on the page) my browser back button still function the way it use to.
But If I click inside the document/page, all the above scripts and code works properly.
So the I want to ask that if there is any way I can make the document(page) active somehow so that if the user click directly on back button without clicking inside the page, They should not go back.

Trigger Click on Dynamic/ Relative Parent Frame Modal Button from within an Iframe

On this page I want to trigger a click on the home button from within the iframe, by both a click trigger and timeout trigger.
The home button can be found by navigating into either category
Then either form.
The iframe displays a fake form submission button**, when clicked it goes to a success page. The home button is at the top right.
The trigger button is the green button on the success page.
The home button on each form is named dynamically relative to each form being viewed ( #successhome1, #successhome2, #successhome3, etc. ) and contains the functions to close it's relative modal (*and not mess with other modals).
How can I implement Javascript/Jquery (sorry for my ignorance if either is not appropriate) so that a click on the green button within the iframe, or a timeout of 3 seconds after page load, causes the relative parent frame home button to be clicked?
*NB:The original version of my home button had non-dynamic IDs, but this causes the toggle of shared ID/class elements - thus displaying hidden modals whilst hiding the active modal.
** I'm using a fake form submission button, as when live, the form submission will be handled cross-domain, limiting what can be achieved between parent frame and iframe.

jQuery Mobile Load Content Via Ajax Before Page Shown

I am very experienced with jquery, but jquery mobile is very new to me. I am developing an app using cordova and jquery mobile.
So i have a multi page setup in the html, with navigation bars that switch the pages. All works great there, however, i need to load the page content via ajax when the page is changed.
I am managing to do this with a post request to an external web server that generates the content, then caches it inside a local database via the app. I am currently doing this with the "pagebeforeshow" event.
The problem is, when the user clicks the menu item, jquery mobile has already switched the page before the ajax call in "pagebeforeshow" is fired, which means we see a blank page delay while the content is requested.
So my question is: Is there a way to either prevent jquery mobile from switching the page automatically on menu click so that i can catch the event, grab the content and then manually display the page with changePage() or is there an event i can hook into that fires well before the transition takes place?
So the idea is they click the menu item, a full screen loader shows (which works) , load the content and then display the page, not display the page then load the content....
Make sense?
The way I'd go about it would be to not use pagebeforeshow and instead have the page initally covered by a splash screen.
Then when the splash screen is loaded and displayed (image onLoad or similar) start the AJAX call, which once finished, fades out the splash screen and shows the actual content.

Check if page change request is result of browser back/forward button in JQueryMobile

What I got working so far:
Store a few pages in the DOM so that when the user uses the browser's back or forward button it will quickly show the page without reloading it.
What I need help with:
When a user clicks a link to a page that is already in the DOM (for back/forward functionality), I want to remove the requested page from the DOM before jqm processes the request so that the requested page is retrieved from the server rather than the DOM.
If this is possible I'm guessing I need to somehow use the pagebeforechange event.
Basically, I want jqm to use the DOM only for back/forward navigation. Otherwise I want the page to be retrieved from the server.

Categories

Resources