jquery mobile dialog closes after page loads - javascript

folks, i've got a problem i'm hoping someone can help with. when my jquery mobile app loads, it checks with my server to see if a native app exists for the platform the user is on. if it does, i pop a dialog asking if they'd like to download the native app. here is the problem, it doesn't seem to matter where i put this check, when the page finishes loading in mobile safari, the dialog disappears. here is my code to start the check:
$( document ).ready(function() {
checkRedirect();
});
but i've also tried in the pageinit and pagecreate. checkRedirect() makes an ajax call and based on the result pops the dialog with a "$.mobile.changePage"
it seems the browser still thinks the original page is loading and then somehow dismisses the dialog when the page is done loading. sorry i don't have more details. i think what i need is an event that happens after the whole page is loaded (and after all ajax background loading), but i haven't been able to find that. any help or suggestions is appreciated.
UPDATE: after a discussion with Omar, it turned out that using a "Popup" instead of a dialog worked for what i wanted.

Firstly, using .ready() in jQuery Mobile isn't correct, use jQuery Mobile events.
You need to delay opening dialog/popup once any page event occur to make sure that the page is fully loaded.
setTimeout(function () {
$.mobile.changePage('#dialog');
}, 50);
update:
Based on our discussion, using jQM popup widget is more reliable in your case.

Related

Chrome executing all JS again on browser back button

I am developing a web application. And I wrote some JS script to be executed on document ready. But in chrome when we click on back button and go back to previous page it is executing all the js script again. But when I use same on firefox it do not execute the JS.
I have an accordion on a page and when user open any accordion and go on one of the link under the accordion and after that if again clicks the back button on the accordion page chrome is closing all the accordions as I have written the script to close all these on document ready. But firefox do not close.
Is there any way to fix this with javascript? So that I can put any condition like if(history.forward.length < 1){ do this....}
You can use the pageshow event to guarantee you always detect navigation to a particular page, regardless of whether the user presses the back/forward button or selects a link, and regardless of which browser is being used.
Then you can perform checks regarding the state of UI and perform logic as required (i.e. modify UI, prevent execution of additional JS).
window.addEventListener('pageshow', function(event) {
// check state of UI, etc.
});
The solution that came to my mind is using sessionStorage to know if it is a first time loading or not. Or even better, you can keep state of your accordions in session storage so it always be the way the user want.
In my case, the iframe was a hidden iframe (width and height zero).
This iframe is just an workaround from legacy system, developed 12 years ago. But still using nowadays on current application.
To solve it, i just redirected the page loaded into iframe to the blank page.
Example:
page_loaded_into_iframe.php
<?php
//do the php stuffs
?>
<script>
alert("hello world");
location.href = "about:blank"; // here, where the the magic happens!
</script>
Once pressed the "back button", the browser will reload a blank page.
Be aware that this might be not applicable if your case is not similar to mine.
In the Chrome Extension you can use the function:
chrome.webNavigation.onCommitted.addListener(function callback)
and in the callback function you may take a look to the arguments:
transitionType + transitionQualifiers
to look for:
"forward_back" The user used the Forward or Back button to initiate the navigation.
For deatils see chrome.webNavigation
Of course, this event can be communicated to the content script with the usual message model (refer to: Message Passing

Jquery mobile page seen much after the pageshow event on an android phone

I am building a cordova/phonegap app using Jquery Mobile. My app feels very sluggish right now and I see that the main reason is that the page only shows up after about a second after I see the pageshow event being fired. Ideally, I expected it to be shown when the pageshow event is fired.
Also, during this meantime(after the pageshow before the page is actually shown) if I touch on the page at a certain point it fires the ontouch event on the item that is supposed to be present at that point. So the page is already there but maybe it's taking this time to render.
Do you know how to make this page render faster using JQuery Mobile? Is there something I can do with the custom Jquery Mobile builder that helps Jquery Mobile not do stuff that's not required?
Please note that I have turned off transitions globally on my app using
$.mobile.defaultPageTransition = 'none';
The mobile browsers has a delay of 300ms delay for touch events. To disable this you can use fastclick. It can remove that 300ms delay in your app.
https://github.com/ftlabs/fastclick
This can help you too to make it work faster.
The browsers wait for 300ms to check if the user has done a single click or is going to do a double tab. If the user has not touched again before 300ms, its considered as a single touch click.. else it's considered as double tab.
Just posting another answer as I think this would be the solution for your updated question.
If my understanding of your problem is correct, disabling the DOM cache will solve it.
$(document).bind("mobileinit", function(){
$.mobile.page.prototype.options.domCache = false;
});

IE9 firing onbeforeunload event when the window opens

I'm building a site using the JFileUpload applet and want to handle the closing of a page in a certain way. JSTransferCancelled is called when the applet is cancelled. The following code is what I'm using to handle these events and it works in all browsers except IE.
function JSTransferCancelled(){
bCancel=false;
$.post("cancel.php");
self.close();
}
$(window).load(function(){
$(window).bind('beforeunload',function(){
document.uploader.setEnabled(false);
if(bCancel){ document.uploader.cancel();}
});
});
I open the page with the uploader on it in a new tab from the main site and want to close it when they cancel the upload. When I open the tab in IE, however, I instantly get the alert saying The webpage you are viewing is trying to close this tab. Do you want to close this tab? [OK] [Cancel] and my uploader is both inaccessible because of the setEnabled(false) call and cancelled because of the cancel() call.
What I'm looking for is the same functionality, just in IE. I know there are many many many issues in IE with events like onbeforeunload with it triggering in response to different things, but I've checked for all of those problems in my site and haven't found anything. I haven't run into anything online that deals with the kind of problem I'm having.
I've tried wrapping the onbeforeunload function in different things such as the load function above as well as $(document).ready(), but they either give me the same problems or create new ones.
Check Microsoft's Ridiculous Documentation Then make sure none of the code you are using does anything they list as a trigger to invoke beforeunload, which includes several things that do not actually unload the page (go Microsoft!)

Popup a message upon exiting a webpage

We'd like to have a message popup when a visitor to specific webpages leave those webpages. So we could tie some Javascript to the links on those webpages, but then we can't control if the user exited the webpage by typing in a URL, using a bookmark or just closing the window...
I assume we have limited options if the user tries closing the browser window... but I do know it's possible because Google Docs' Documents offers the chance to cancel closing the window if you have unsaved work while closing the browser.
What are my options? Can I have Javascript called upon going to another webpage? Can I control the text in the popup when trying to close the window?
I'm using jQuery, so if there are good solutions implemented with jQuery that's perfectly fine.
Yes.
https://developer.mozilla.org/en/DOM/window.onbeforeunload
jQuery UI Dialog OnBeforeUnload
There is onunload event you can bind to, first example:
http://www.codetoad.com/javascript/miscellaneous/onunload_event.asp

Weird IE & Javascript issue

So I'm creating some HTML using javascript based on where the user clicks on the page. On page load the script replaces an empty div with a ul and some data. The user clicks on that data to receive more and so on. Now when the user navigates off the page and then hits the back button to go back to the page, IE displays a blank page with the replaced divs, in all other browsers, FF, Opera, Safari, the page either reloads to the initial ul or goes back to the last state with the dynamic data in it.
Anyone have an idea as to what might be happening here? Any help is appreciated.
It sounds like you need to manage the history and state of your page. Check our Brad Neuberg's Really Simple History.
The behaviour of onload events when navigating backwards and forwards is not standard cross browser. As a general rule, I have found that when you click back, onload events tend not to work as the browser is loading it from cache rather than re-requesting the page. What you can try is using the dom ready event rather than window load.
Trull's answer is along the right lines. Opera and later Firefox(>1.5) do not consider loading a page from the cache as requiring to trigger an onload event as the complete DOM state is also cached.
This is trivial to standardise across browsers, as Opera and Firefox do not exhibit this behaviour if you define a window.onunload event. See http://developer.mozilla.org/en/Using_Firefox_1.5_caching

Categories