I need to do something when leaving page (page '#first').
It's really simple:
$(document).on('pagebeforehide', '#first', function(event, ui) {alert('leaving page');});
No problem when I leave page by "inner" links something like this one:
Open something
here event fired and handler executed.
But when I want to open external link like this one:
Open something
here event not fired and handler not executed.
Doesn't matter is page content simple or complex - I found that this depends only on fact whether link inner or external.
What's wrong?
rel="external" means that page will be opened as an external page and all previous page content (including its scripts) will be lost, that will also trigger a full page refresh so your pagebeforehide event is not going to trigger because it will no longer exist.
jQuery Mobile page events can occur only during normal page changes. Basically what I want to say is you need to go to the other jQuery Mobile page for this event to trigger. In your case you are forcing app to do a full page refresh, at this point, page refresh will occur before pagebeforehide event.
EDIT :
While there isn't any crossbrowser solution for this you can always cheat.
Instead of having href link inside your button, replace your link http://www.google.com with # and add it an id so we can identify it, like this:
Open something
Now add a click event to this button and do what ever needs to be done before changing page to www.google.com:
$(document).on('click', '#change-page', function(){
// Do something here then change page
});
Or link your button to another dummy inner page (use this inner page only for this purpose), catch pagebeforehide on it:
$(document).on('pagebeforehide ', function(){
// Again do something here and manualy change the page
});
Related
I have an HTML page that includes only a script tag, I don't control the script and I can't change it (so I can't fire my custom event for example).
The script ends with a redirect (using window.location).
Is there a way to add a new script to the page that will listen to the page events and "catch" the redirect (actually it's better for me to catch the new loaded document)?
Something like:
window.addEventListener('redirected', function() {
// do staff
});
(I know there is no "redirected" event, it's just for the example).
It's very important to make it clear that the redirect isn't caused by an anchor click or back/forward button click, so I can't use events like click or popstate.
You might want to look at the onpagehide event or the onunload event, both of which occur when the user navigates away from the page.
However, if you wish to interfere or prevent the redirection itself, onbeforeunload is what you want.
Just take a look at :
unload function w3school or mozilla developper network
beacon function for sending a final XMLHttpRequest
I develope a chrome extension; with a content script I inject some code in the page. What I want is an event that triggers if the current tab is going to update.
I tried to catch the click event of an a-element and it does work in somehow 80% of all cases. I already check if it's an anchor, but there are still many links which don't reload the page or forward to another.
$('a', document).click(function (e) {
// ...
});
So, what I want is described in the following three steps:
Event: the page is going to reload
prevent it from reloading, execute some code
trigger reloading the page afterwards
Depending on your requirements, have you considered listening to beforeunload event? It's fired when the page is about to unload (also including refresh the current page).
I am having a big of an issue.
I have some third party js includes and they popup some info on a button click, that is in an iframe. Of course, I don't have access to this iframe. But the 3rd party captures clicks and closes the iframe popup. So the behaviour is like so -
I am a user, I click on this "3rd party button, an iframe popups up anchored bottom right". Now, if click anywhere on the main parent page (my page), the iframe closes.
Here is the problem. I have some custom form fields/spans etc.... in which I capture the clicks before they bubble up so the document.body never get that "click".
How can I fake this out? I tried "mousedown" and that seems to propagate up. So I then said something like:
jQuery(document.body).mousedown(function(){
jQuery(document.body).click();
})
so, no matter what is mousedown, I try to say there is a click happening. BUT that doesn't work. Not sure why? If I attach that click onto a div and alert - it alerts, but perhaps "natively" it isn't the same.
Any ideas of to truly simulate a body click event when/if the element clicked on has had its native clicked event captures before it can bubble up?
EDIT: I have tried various things.
ie:
<div id="captureclick"></div>
<script>
jQuery(document.body).mousedown(function(){
jQuery("#captureclick").click();
})
</script>
I also tried:
jQuery's trigger function trigger('click');
Not working. I haven't tried using a button as the "click traget", yet.
Thanks.
I have an aspx page on my SharePoint site, which I have included tags. For some reason, every button on the page will reload the page when clicked. Even the buttons with no attributes (id, class, etc) or functions will reload the page when clicked. How can I fix this issue? I can't even see what's going on in the debugger because I'm not calling any reload functions, so I have no idea where to place a breakpoint.
Thank you in advance for your help, I really appreciate it.
The problem here is with the <button> tag. Its default behavior is to act as a submit button unless otherwise declared and will reload.
To keep your <button> tag, add type='button' to the button element. I think that prevents the reload.
Or you could go with the ole <input> tag with a type='button'. That keeps the reload from happening as well.
Or some other html element with an onclick event will work too.
First search for a function called doPostback and set a breakpoint on the entry point and click a button. If you hit this breakpoint it could mean that auto post back is turned on for the control generating the button. However if you trigger that breakpoint you should be able to look at the stack trace to figure out how you got there.
If that doesn't work, use the F12 tools in the browser, start with the HTML section and search (Ctrl-F) for the word "click". Then go to the script tab and do the same for each JavaScript file. If all of the buttons exhibit the behavior there is most likely a click event registered. Possibly with jQuery that looks like this $('button') so that it matches all buttons on the page and registers a click handler.
If that doesn't find it, and you have access download one of the master pages from http://startermasterpages.codeplex.com/ and temporarily replace your master page with one of these. Take a screenshot of the scripts that are loading on your page first. Then add them to the starter master page one at a time until the unwanted behavior returns. Then set a breakpoint on every function entry point in that script and click a button and see where you land.
I've got a browser plug-in I'm working on and I want it to behave a certain way when the user clicks things. Not limited to, but including, a behavior for links!
The problem is that the plug-in has to work for a wide variety of sites, and some of those sites use the dreaded pseudo-protocol such as:
Show Element
Currently my behavior is added to the anchor tag via
anchor.addEventListener('click', superAwesomeFunction);
Unfortunately this has a problem where the click listener only fires once. If I preventDefault() of course the click listener sticks around, but I've now broken the host site! Otherwise, clicking the link fires the click listener but only on the first click. I'm wondering why my superAwesomeFunction() doesn't fire again if the link is clicked a second time. Is href="javascript:things()" doing more than I know?
It is possible to add an event listener to a link that has a JavaScript function call set in the href attribute.
Here's a jsFiddle that shows it working. Both functions fire each time the link is clicked.
There must be something else going on with your code beyond what we can see in what you gave us.
If you must wait user some time and going on url then, you may add some code to your superAwesomeFunction's process end:
document.location.href = $(this).attr("href");