Any ideas how to intercept the browser back button via jQuery, so I can run my event function?
I don't need to use jQuery BBQ or jQuery Address, only prevent the default behaviour and run it later after some animate.
Thank you!
d
Have not tried but i guess this do what you want.
window.onbeforeunload = function () {
// stuff do do before the window is unloaded here.
}
with jQuery you could try the .unload() function
The unload event is sent to the window
element when the user navigates away
from the page. This could mean one of
many things. The user could have
clicked on a link to leave the page,
or typed in a new URL in the address
bar. The forward and back buttons will
trigger the event. Closing the browser
window will cause the event to be
triggered. Even a page reload will
first create an unload event.
In jQuery land:
$(window).unload( function () { /*code here*/ });
EDIT- There was a parentheses instead of a close bracket
EDIT - Removed Extra Semicolin
Related
Is it possible to alter DOM in beforeunload handler? Chrome seems to apply DOM modifications after the user pressed "stay" in browser alert about leaving the page, and I want a part of the page to be hidden while this alert is visible.
See the demo:
<script>
window.onbeforeunload = function(e){ document.getElementById('a').style.display = "none"; e.returnValue = "adios";}
</script>
<div id=a >This text should disappear when the user tries to leave the page</div>
https://jsfiddle.net/qmatic/6sLp7rmq/
The only solution I have so far is to animate the div to opacity:0 and to have a code in setInterval that constantly resets this animation. While the code is running the div is always visible. Chrome stops all the code when it shows an alert, so the animation finally runs till the end and hides the div. But it's a terrible solution - I'm constantly updating the DOM to reset the animation. Does anyone have any better ideas?
The process being executed by Chrome appears to be:
1) call the handler, waiting synchronously for its return value
2) if the return (event.returnValue) is suitably undefined, continue the unload
3) otherwise present a modal popup of some kind, getting the user's permission to cancel the navigation.
4) if navigation is cancelled, stay on the page and apply a refresh cycle to the page view.
I have stepped through an onbeforeunload handler in the debugger, and when I do so, style changes WILL take effect before the modal dialog appears instead of after it closes. This seems to indicate that using the debugger introduces additional DOM refresh cycles that would otherwise not occur in normal running. I am trying to find a way to get one of these refresh cycles to occur programmatically from within the handler, but so far no luck.
In other browsers, there seems to be refresh cycles inserted between steps 1-4 above, giving the desired behavior.
I need to know when the crossrider's extension closes so I can throw some message in the background. It was easy on the other way around
appAPI.ready(function() {
}
This is what I'm using on popup.html to determine if the extension is opened. So what I need is something like appAPI.close(function() {}) but I can't find it on the Crossrider's doc http://docs.crossrider.com/
Thanks,
Kevin
So if you want to monitor "popup page close" event, just listen to unload event for popup page.
window.addEventListener("unload", function() {
// Your logic here
}, false);
Please be aware you can't use console.log in the function, since by the time the unload event fires it is already too late. See this post for more details.
when I open an XPage with a lot of ssjs in it. I have always the problem, that when I click a button (with ssjs in it) directly after opening the page, nothing happens. When I wait 1 or 2 seconds, every thing works as expected. It seems, that not everything is loaded fast enough.
Is there an event to see if the document is completly loaded? I tried the jquery and dojo onready events and as well the onClientLoad event. But all these events trigert directly after the page is open (but not finish loaded).
You can add the following onClientLoad event as a client side javascript:
XSP.addOnLoad(new function() {
// this will run when everything is ready...
});
That's also why you see a lag for button events. All event handlers are binded via the same mechanism as above.
It was my fault. I just recognized that there are more than 30 panels there all have an empty onClientLoad method in it. After I removed the events, my page need to load 500ms insted of 2,5s and also the XSP.addOnLoad event to see if the page is ready now works as expected.
Thanks #Serdar Basegmez for your help.
I'm trying to work on a chrome extension and am trying to clean up some of my code by relying on the sendMessage. However the callback function activates before the page has finished loading so in the case of a new tab, nobody receives and in the case of an existing tab the page that is being moved from is getting the message (but that isn't what I want). I've looked for other people asking about that problem with new tabs and there wasn't a clear answer, the best suggestion I've seen is to create a global variable and create a listener for tab loads and compare it against this global variable.
So the question is, is there a way to wait in the callback function until the page has loaded, or do I create an array of JS objects that contain the tab I'm waiting on and the information I want to send to that tab.
For reference here is the relevant code in the background javascript file.
chrome.tabs.sendMessage(tab.id, {info: "info"}, function(response)
{
//This line isn't used when I am navigating without changing tabs
chrome.tabs.create({url: response.info.linkUrl}, function(tab1)
{
chrome.tabs.update(tab1.id, {url: response.info.linkUrl}, function(tab2)
{
chrome.tabs.sendMessage(tab2.id, {info: "More Info"});
});
});
});
Otherwise I am able to confirm that all of my tab side code works, once my sendMessage was delayed enough for me to see that with my own eyes. My code is able to consistently make it past validation on the page being navigated away from, confirmed by checking document.url.
You can try injecting a second content script instead of a message.
It will execute in the same context as your other script.
Something along the lines of
chrome.tabs.executeScript(tab2.id,
{code: 'showInfo("More Info);', runAt: 'document_idle'}
);
where showInfo does the same as your message handler.
It's a bit of a hack and I'm not 100% sure the load order will be correct.
Other possible solutions are more complex.
For example, you can make the content script report back that it is ready and have a handler for that, for instance you can register a listener for onMessage in the background that waits for a message from that specific tab.id, sends "More Info" and then deregisters or disables itself.
Or, you could potentially switch to programmatic injection of your content script, which would let you control load order.
I have a search dialog that I am popping up and filling with jquery templates. After they make a selection I set a value on the current page. As such I don't need hashTags or anything like that, I just need a pop-up dialog that I can open and close programatically. I am currently opening the dialog with
$.mobile.changePage(dialog, { transition: "slide", changeHash: false });
and closing it with
dialog.dialog('close');
However, in certain cases (when the page is navigated to), closing the dialog refreshes the current page.
Is there a better way to interact with this?
Update:
I think I figured out what is going on. So for some reason, jquery mobile usually keeps 2 pages loaded on the DOM - one of which is invisible, you can verify this by running $('[data-role=page]') in the console. One page is the page you're on, the other is the page that you initially navigated to. Not quite sure why they choose to do that, but there you have it.
So they treat dialogs as a page navigation with a different transition even if the dialog is already in the DOM. Therefore, if you go directly to the page and then trigger a dialog, modifying the current page and closing it works fine - because the original page is always loaded in the DOM. However if you go to another page, than navigate to the page that triggers the dialog, and THEN trigger the dialog it destroys the current page so that the pages in the DOM are the initial one and the dialog. In that case it reloads that dialog-launching page entirely and you never get a chance to make any modifications.
Jeez. How do I interact with the jqm dialog widget directly?
You can try two other things. Both should work:
1 set DomChache
How about overriding JQM to keep the page your are firing the dialog from in the DOM? The docs say you can set data-dom-chache and override cleaning the page from the DOM.
If it only happens when you load this page in via AJAX (vs. loading it directly) you could make DOM-keeping dependend on your trigger page having data-page-external, assign DOM-chache="true" only when the dialog is openend and remove it again once the dialog is closed.
2 override JQM
I had the same problem you described and got it to work like this (requires hacking into JQM though...):
// inside transitionPages function
if ( !$(toPage).jqmData('internal-page')
{fromPage.data( "page" )._trigger( "hide", null, { nextPage: toPage } );}
}
My problem was that pagechanging to certain pages (same as dialog) caused the preceding page (where the dialog fired from) to be removed from the DOM, so I had a blank screen (when trying to go back). I added data-internal-page="true" to the pages, which should keep the preceding page intact and added the if-clause in JQM.
So now pageHide (and DOMcleanup) only fires, if I'm not going to a page labelled with data-internal-page="true"
Cheers!
I think I was having a similar problem. What I wanted to do was based on certain parameters, pop a dialog window on load (with that content on the same page), which they can close and view the page that loaded.
I could get it to pop on load using load, or the pageshow events, but when I clicked close that sent you back to the previous page in history, instead of just closing the dialog.
//target your 1st page content, here its id=success
//the modal content is in a page id=dialog and data-role="dialog"
$('#success').live('pageshow',function(){
window.setTimeout(function(){
$.mobile.changePage('#dialog','pop',false,false);
},1);
}
Its a hack, and just allows the page load to beat the dialog so it gets stuck in history. Then the default dialog close behavior for the dialog works as expected. Talk about a PITA, if they took a little more for the JQuery UI dialog it would have made things a ton easier.
And regarding your question: Have you looked at Jquery Mobile Actionsheet plugin
If you don't really require a page to be loaded, that should be ok.
Also helpful could be Cagintranet iPad popover, although you have to tweak the design to be fullscreen on mobile devices. If you require CSS/Jquery to do that let me know (I'm using this in a JQM plugin I'm writing)
Hope that helps.