I have the below code to reload the CAPTCHA image on a page of mine whenever the page is reloaded (mainly for when people hit the back button to edit a two-page form). The code works perfectly on Chrome and Firefox, but does not function on IE (the CAPTCHA simply does not reload). How can I edit the code so that it works in IE? I don't know the differences between the browsers well enough to figure it out.
This is in IE 11, using jQuery 1.10.2. The console does not return any errors in any browser, IE included.
jQuery(document).ready(function() {
jQuery(window).load(function() {
Recaptcha.reload();
});
})
Some browsers (and by some, I mean IE in particular) don't like to execute document.ready when you hit the back button, so the code simply doesn't run.
Add this in your script and it should resolve the problem (it fixed similar issues for me)...
window.onunload = function () { };
Related
I have added code to change web page color on beforeunload event:
window.onbeforeunload = function (){
$('.navbar-collapse').css({background: 'blue'});
console.log("Hello unload");
return null;
}
This code works properly on Chrome and Firefox but it doesn't work on Safari browser.
However, when I debug this code in Safari, when stepping over each line of code in the callback function, id DOES changes background color.
When I navigate by clicking on an url on page and then click back button on browser, the background color is changed.
Any idea?
window.onbeforenload is "magic" in the sense that it is special and more and more browsers are restricting what it can do.
Some browsers will let you display a custom message, other browers are free to ignore this event entirely.
In short: Don't try to do anything but return a null or non-null value and hope for the best. It is out of your hands.
You might want to see this answer too: window.onbeforeunload and window.onunload is not working in Firefox , Safari , Opera?
I'm working on a Drupal 7 site, the mobile version of the site which uses Bootsrap as theme.
There is a custom block (created w/ drupal) using jQuery to move some elements on a page, changing some classes and IDs. This block works just fine.
My problem is in a custom module which renders a block. I have some jQuery code in the module's template that is not running on refresh in Safari, but it runs if I go on the address bar and hit "Go" on the keyboard.
edit: IE and Chrome seem to also have a problem, but the jQuery code runs sometimes, doesn't matter if is a refresh, clear cache or whatever.
Nothing special in browser's console.
My jQuery code is supposed to move some elements in the page, on jQuery(document).ready, but is not even working for a simple alert.
p.s.: the jQuery in my custom module's template doesn't have anything to do with the code or the HTML elements affected by the custom block, but I thought maybe it would be good to mention it.
I hope you can understand the issue :)
Thanks.
I was using jQuery(document).ready to execute my code. I changed to jQuery(window).load and now it works fine. The code executes on first page load and on every refresh.
After like two weeks and almost killing myself, this is only thing that worked for ios safari.
$(window).on('load', function () {
setTimeout(() => {
DoLoad();
}, 180);
});
I had a similar problem and tried probably a dozen or more ways to address an issue with Safari. It looks like Safari triggers $(window).on('load',...) jQuery call before DOM completely builds. Or perhaps there is some kind of timing/racing condition. In my case, it was causing an issue, but only after page reloads, only with Safari, and only with a certain cloud provider. Chrome was fine, on prem hosting was fine. The only way which worked somewhat reliably was to introduce an artificial delay via setTimeout() function.
$(window).on('load', function () {
setTimeout(() => {
$.getScript('{{url}}').done(function(){
$("#element").js_function({
arguments
});
});
}, 360);
});
I am facing a really weird problem. I am calling window.print() from a javascript file. This is working fine in Safari, IE, Firefox... and until two hours ago it worked in Chrome, too. (Version 29.0.1547.57)
I did not change anything essential in my javascript file (really - I just removed some comments...), but what now happens is really weird: In Chrome, the print dialogue does not open when window.print() is called. Nothing happens. But then, when I press reload, the print dialogue opens immediately.
The behaviour in the other browser did not change. And while debugging in Chrome I can see that window.print() is called as expected and the script goes on after that. Only the print dialogue is not shown until pressing reload.
Has anybody ever experienced something like that? I also tried to call window.print() in setTimeout(), but this did not change anything. When I debug the content of the page which shall be printed appears to be perfectly loaded.
I am sorry to ask, but I did not find anything while researching. Any help would be appreciated!
Thank you!
Wasiim is right, there is a Chrome bug where window.print() does not work when there is a <video> tag in the DOM. I solved it by calling this function:
function printPage() {
window.print();
//workaround for Chrome bug - https://code.google.com/p/chromium/issues/detail?id=141633
if (window.stop) {
location.reload(); //triggering unload (e.g. reloading the page) makes the print dialog appear
window.stop(); //immediately stop reloading
}
return false;
}
From my experience this is due to continued background traffic, e.g. ajax calls and the like that prevent Chrome from feeling the that page is loaded completely. The reload breaks all traffic and thus the print dialog pops up.
This is a particular gotcha in Visual Studio 2013 where BrowserLink continually ticks away in the background.
This can be tested by disabling BrowserLink via the setting below:
<configuration>
<appSettings>
<add key="vs:EnableBrowserLink" value="false"/>
</appSettings>
</configuration>
I have exactly same problem with Chrome. You need to manually reload page:
Print
If by any chance someone is using VS2013 with chrome, this problem is caused by the BrowserLink funcionality.
see SO answer here
Similar behavior in Safari. It is caused by opened HTTP request(s) on background.
When any HTTP request is in progress, window.print() is executed successfully, but no dialog is opened!
You will have this issue, when you use a long polling (for server push). Because client will have already opened HTTP connection for a long time, window.print() will never work.
I am most certain you are experiencing this issue because you have a video element on your page - most probably an MP4.
If you disable this video / or have an OGV video instead, the printing should work fine.
It is a bug in chrome itself due to limitations of Chrome's video implementation. It is also important to note that if the user prints manually with ctrl-p / cmd-p, print functions correctly
http://code.google.com/p/chromium/issues/detail?id=141633
Hope this helps :)
I've an anchor in an Asp.Net user control. I've wired some code to the onclick event. For some reason in Internet Explorer 10, the event is not firing. The markup is structured as
where myFunction is a simple JavaScript function. For those who want to see the page in action, here is the link:
http://alt.thedominion.ca/TheBrokerAdvantage/LocateABroker.aspx
Any help is greatly appreciated!
The problem is with your server side code, not the browser or JavaScript.
If you check the JavaScript console in IE10 you will see the following error when clicking the link:
SCRIPT5009: 'ValidatorValidate' is undefined
Which points to the second line in the function:
function doSearch() {
var regExValidate = document.getElementById("ctl00_BrokerSearchMiddle_ctl00_ValidPostalCode");
ValidatorValidate(regExValidate);
var postalCode = $find("ctl00_BrokerSearchMiddle_ctl00_PostalCode").get_value();
if (regExValidate.isvalid && postalCode.indexOf("e.g") == -1) {
document.location.href = "?postalCode=" + postalCode;
}
}
This means the onclick is working just fine, you simply have JS error.
Now the question is why ValidatorValidate exists in other browsers (even IE9) but not in IE10. Well, in IE10 the script where it's being defined is not included, meaning the server never put the line <script src="..."> with that URL as part of the output to the browser.
I can only guess that the server side code is checking the browser version and according to that include certain scripts. Check that code and get rid of such things as it's never a good idea.
After some research I found what's going on. You are using Sitefinity version 3.7 to build your site (according to this question of yours) and as officially stated here:
I want to inform you that unfortunately Sitefinity 3.7 does not support Internet Explorer 10 and your Sitefinity 3.7 might not work properly with this browser version. Apologies for the inconvenience
You will have to upgrade your Sitefinity if you want IE10 support.
The below code works on every major browser (I just tested it on IE10, IE9, Chrome 26.0.1410.64, and the latest firefox release).
click me
<script type="text/javascript">
function myFunction(){
alert("Anchor was clicked");
}
</script>
In other words, your syntax is fine, but the anchor tag simply will not appear without inner text unless you use CSS to force a width and height.
CSS option:
a{
display: block;
width: 100px;
height: 20px;
}
Working CSS Example
I am having a strange problem in Google Chrome. I am including a js file via script src tag. I place alert('test') in the file and when I load the page in Chrome, It alerts twice. In every other browser it alerts once. Is there any known cause for this?
Here is the code that loads the JS:
<script type="text/javascript" src="/js/main.js"></script>
It appears this happens in Safari as well. Does not occur in IE and firefox.
I had this recently and eventually found out it was a chrome extension, specifically the cache killer extension
This might be helpful
Webkit browsers (Chrome, Safari) are loading pages redirected from .htaccess twice!
I've noticed this same problem in Chrome. I have some code that runs when the page loads and I have an alert inside that code. In every browser other than Chrome this code is run once, thus the alert displays once. In chrome the alert shows twice. I am not doing anything special, just running code when the onload event is triggered within <body onload="somefunction()">. I am not using links, iframes, or the Cache Killer extension. I tested it in Safari and the code is only being called once. This seems to be a Chrome specific problem.
I did some research and it appears this is a bug with Chrome. I found this link https://code.google.com/p/chromium/issues/detail?id=64810
Depending on your specific situation, this page may give you a work around for the problem.
The problem does not seem to be fixed as of yet.