Use JQuery or onbeforeunload for IE and FF - javascript

I'm working in a Flex4 application, using javascript, in the "index.template.html" document. I'm having an issue being able to use onbeforeunload with Firefox. The application works perfectly in IE, but the exact same one doesn't sit well with FF. (See below)
<script type="text/javascript">
window.onbeforeunload=before;
window.onunload=after;
function before(evt)
{
var flex=document.$(application)||window.$(application);
flex.unloadMethod(); //custom method to log out the user
}
function after(evt)
{
}
</script>
From what I've found, FF doesn't seem to register onbeforeunload events, so I found that the popular thing to use instead is binding with JQuery. So, I deleted the above code and replaced it with the below code, but it doesn't display a pop-up when the user tries leaving the page in both IE and FF. Anyone that seems to be using JQuery for this seems to be doing the exact same thing, so I don't know what's going on.
<script type="text/javascript">
$(window).bind("beforeunload",function(event){
return "This should create a pop-up";
});
</script>
Eventually it would be nice to call the "flex.unloadMethod" like in the first bit of code, but for the time being I'm just trying to get a pop-up to work so I know I'm on the right track. Any insight would be greatly appreciated.


Try:
<script>
$(window).on('beforeunload', function(){
return "This should create a pop-up";
});
</script>
Example: http://jsfiddle.net/AeztA/3/


Would like to add that i figured out that you can't use an empty string in firefox.
It has to be at least 1 blank for example as return.
var text = 'Exit Message';
$(window).on('beforeunload', function(){
return " " + text;
});

Related

script always working in chrome / firefox works only once in IE

In a partial view I have these lines of scripts:
<script type="text/javascript">
$(document).ready(function() {
$('#randomCard').click(function () {
alert("button clicked!");
$.get("#Url.Action("GetRandomCard")", {}, function (data) {
$('#rightSide').html(data);
});
});
})
</script>
This calls a Get method in my controller which returns a random card from a database. In chrome, this methods is 100% working. Firefox fires the event 100% of the time too. But in IE the action is fired only once while the alert always pops.
Can somebody help me figure out why?
EDIT
Following everyone's advice, I have debugged my session which made me realize that the html data was being added, not replaced. I have created an upper div #rightSide which gets updated with the data, thus resolving this small problem.
However, the problem of IE calling the partial view controller method is still active and I appreciate everyone's help to resolve this issue.

Fire up a debugger in IE. Run and see what fails.
Catch if there is an error from $.get(…).
( I bet on the randomCard-control being a anchor link and there being i subtle bug that makes the anchor get the page again. )
Don't forget to post your findings.

even if it is not an
$(document).ready(function() {
$('#randomCard').click(function (e) {
e.preventDefault();
alert("button clicked!");
//etc

onbeforeunload event not firing in my code, but other examples work?

As usual, I want to alert users to unsaved changes when leaving a page. I have this test page:
<html>
<head>
<title>Testing</title>
<script language="JavaScript1.1" src="https://127.0.0.1:8443/scripts/base.js"></script>
<script language="JavaScript1.1" src="https://127.0.0.1:8443/scripts/edit.js"></script>
<script language="JavaScript1.1">window.onbeforeupload=moveAway</script>
</head>
<body onLoad="init()">
Google
</body>
</html>
The moveAway function is defined in "edit.js" like this:
function moveAway ()
return "foo";<br>
}
The event doesn't fire, or at least it just leaves the page silently (using IE8, Firefox 15, and Chrome 20). I've tried breakpointing the function in Firebug and it never gets to the breakpoint. I've tried it from the web server (an SSL server, the test version of which runs at 127.0.0.1:8443) and I've tried opening the file directly with the browser (which is why I used absolute URLs for the first two <script> tags). I've tried removing the "src=" attribute from the script tags.
On the other hand, this page has an example which does work (at least in Firefox):
https://web.archive.org/web/20211028110528/http://www.4guysfromrolla.com/demos/OnBeforeUnloadDemo1.htm
There is also a very similar example at MSDN which also works:
http://msdn.microsoft.com/en-us/library/ms536907%28VS.85%29.aspx
I really can't see the difference between what they do and what I'm doing. can anyone tell me why their code works and mine doesn't?

use jQuery bind function.. it works great for me..
see bellow
$(window).bind('beforeunload', function() {
return "Want to leave?";
});

onbeforeupload , really ? it should be onbeforeunload. Is that a spelling mistake, or is that how your actual code is ?

You have a syntax error, the function should be:
function moveAway () {
return "foo";
}

JavaScript window.location.replace works in Firefox but not IE or Chrome

The following script works marvelously in FireFox but has no success at all in IE or Chrome....I've been pounding my head for hours on this stupidity....any help is appreciated.
<script type="text/javascript">
window.onunload = function exitConfirm()
{
var answer = confirm("Wait don't GO! I love you!");
if (answer)
{
if(!self.closed)
{
window.open("http://myKoolUrl");
}else{
window.location.replace("http://myKoolUrl");
}
}
}
</script>
The Confirm works fine for both page leave and broswer/page/tab close but no matter the selection choice in IE/Chrome no redirect is taking place. Help me to understand.
Update a much more simple example using onbeforeunload:
<body onbeforeunload=go();>
function go()
{
if(confirm("Go to Google"))
{
window.location.href = "http://www.google.com";
}
}
</body>
This also does NOT work in IE/Chrome/Safari I have used a few different machines to try to eliminate setting errors of some kind. Is this just some insane situation that I am missing something obvious...??? Why is the redirect NOT doing anything in these browsers...is it just me? I've tried all the cute JS redirects:
location
location.href
location.reload
location.open
etc
even jQuery
$(location).attr('href','http://www.google.com');
Again ALL these work fine on my machine in Fire Fox

you can do it like this also
window.location.href = 'http://myKoolUrl';

Perhaps Chrome pre-fetches the URL and knows its bogus, thus not redirecting. Trying it with a valid URL has worked for me.

$(window).load(function()-how it works with FF

I have a jquery code.
$(window).load(function() {
document.title = $("#myid").text(); //not working in FF
});
Here I have used $(window).load(function() because in the #myid I am getting value through another javascript, if I use ready(), its giving me error. so I am first loading the window then start reading value.
Now in IE, after the window loads itself , I am getting the value of document.title,
but for FF its coming as blank.undefined.
Why? any idea or alternate sln.

It might be a rendering/timing issue.
How are you setting the #myid text? Im assuming you are running this code on page load?
Personaly on another note, i like to use the shorthand version of jQuery DOM ready, this might also fix your problem too.
jQuery(function(){
document.title = jQuery("#myid").text();
});
And i would make sure that you call it at the end of the body or ideally in the head tag.

I think it is possible that firefox triggers ready and load at the same time when it loads quickly (localhost, small experiment page with one div, etc.)
Why not put the title setting in the ready function right after getting it? If You put it in a div, You can put it in the title too.

I didn't check this code and it isn't a good way, but maybe it help you...
If your code isn't working in Firefox only, you can check browser by Javascript and execute my code for Firefox only.
<script type="text/javascript">
var timerId = 0;
function checkElement() {
// If don't work: try .html() or $("#myid").text() != undefined or smth like this
if($("#myid").text()) {
document.title = $("#myid").text();
clearInterval(timerId);
}
}
$(document).ready(function() {
timerId = setInterval('checkElement()', 500);
});
</script>

windows.location.href not working on Firefox3

We have a JavaScript function named "move" which does just "windows.location.href = any given anchor".
This function works on IE, Opera and Safari, but somehow is ignored in Firefox. Researching on Google doesn't produce a satisfactory answer why it doesn't work.
Does any JavaScript guru knows about this behavior, and what would be the best practice to jump to an anchor via JavaScript?

Have you tried just using
window.location = 'url';
In some browsers, window.location.href is a read-only property and is not the best way to set the location (even though technically it should allow you to). If you use the location property on its own, that should redirect for you in all browsers.
Mozilla's documentation has a pretty detailed explanation of how to use the window.location object.
https://developer.mozilla.org/en/DOM/window.location

If you are trying to call this javascript code after an event that is followed by a callback then you must add another line to your function:
function JSNavSomewhere()
{
window.location.href = myUrl;
return false;
}
in your markup for the page, the control that calls this function on click must return this function's value
<asp:button ........ onclick="return JSNavSomewhere();" />
The false return value will cancel the callback and the redirection will now work. Why this works in IE? Well I guess they were thinking differently on the issue when they prioritized the redirection over the callback.
Hope this helps!

One observation to ensure in such a scenario
Following will work in IE, but neither in Chrome nor in Firefox (the versions I tested)
window.location.href("http://stackoverflow.com");
Following will work all the three
window.location.href = "http://stackoverflow.com";

Maybe it's just a typo in your post and not in your code, but it's window and not windows

I am not sure to follow you.
I just tried: going with FF3 to Lua 5.1 Reference Manual (long and with lot of anchors).
Pasting javascript:window.location.href="#2.5"; alert(window.location.href); in the address bar, I went to the right anchor and it displayed the right URL. Works also with a full URL, of course.
Alternative code: javascript:(function () { window.location.href="#2.5"; })();
Perhaps you forgot the #. Common problem, also with image maps.

I have the same problem and I guess this is related to a click event.
I have a function that moves the browser to a specific page. I attach that function to some click events: in a button and in a image. AlsoI execute the function when the user press escape (document onkeypress event).
The results are that in all cases the function is called and executed, but only when there is a click the browser goes to the address I want.
Update
I got it working! with a
setTimeout( "location.replace('whatever.html');", 0 );
I don't know why the location.replace wasn't working when the event was a keypress, but with the settimeout it works :)
Update
Returning false after the event when you press escape makes the redirection works. If you return true or nothing the browser will not follow

You've got to add return false; after the window.location.href as mentioned above.
function thisWorks()
{
window.location.href = "http://www.google.com";
return false;
}
function thisDoesNotWork()
{
window.location.href = "http://www.google.com";
}

window.location.href works fine in all versions of Firefox, as does document.location.href I think that there is something else in your code that is breaking things.
drop this in a blank page, if it works, it indicates there is something else wrong on your page.
<script>
window.location.href = 'http://www.google.com/';
</script>

You could also use window.location.replace to jump to an anchor without register it in the browser history:
This article illustrates how to jump to an anchor and uses href as read-only property.
function navigateNext()
{
if (!window.location.hash)
{
window.location.replace(window.location.href + unescape("#2"))
}
else
{
newItem = nextItem(window.location.hash)
if (document.getElementById(newItem))
{
window.location.replace(stripHash(window.location) + "#" + newItem)
}
else
{
window.location.replace(stripHash(window.location) + "#1")
}
}
}

Have you tried this?
Response.Write("<script type='text/javaScript'> window.location = '#myAnchor'; </script>";);

please add full javascript script tag
<script type="text/javascript" language="javascript"></script>

window.location.hash = "#gallery";

For reference I had the same problem.
onclick = "javascript: window.location('example.html');" didn't work under FF (latest)
I just had to rewrite to onclick = "javascript: window.location = 'example.html';" to get it working

I just overcome the same problem. and the problem is not in javascript, but the href attribute on the <a> element.
my js code
function sebelum_hapus()
{
var setuju = confirm ("Anda akan menghapus data...")
if (setuju)
window.location = "index.php";
}
my previous html was
Klik here
and I update it to
Klik here
or remove the href attribute
hope this helps.

window.location.assign("link to next page") should work in both (chrome and firefox) browsers.
window.location.assign("link to next page")

Another option:
document.location.href ="..."

Categories