Using a window.load function in Internet Explorer - javascript

I want to run some code after everything on the target page is done loading AND rendering. It was suggested to me to use the Window.load function and it is working perfectly in Firefox and Chrome. I just can't get it to work in IE. Is there another way of doing this?
Edit: Ok so here is what I have:
appAPI.ready(function($) {
if (appAPI.isMatchPages("192.168.1.156/test/*"))
{
$("body").css("display","none");
if ( $('.welcome p').text().indexOf("user") >= 0 )
{
if ( $('h1').text().indexOf("header") >= 0 )
{
//alert("Found data");
$('td:contains("testdata")').text("newdata");
}
}
$(window).load(function () {
$("body").css("display","block");
});
}
});
Basically before there was code flickering, I could see the data being changed as the page loaded so I asked for some advice and the solution I got was to set the body style to display:none and use window.load to set it back to block once everything is loaded. This works perfectly in Firefox and Chrome but not in IE. The actual code that changes the data works in IE tho.

You should have no issue with this in IE, I use it frequently when I need to ensure all resources have been downloaded:
$( window ).load(function() {
// Run code
});
"Run a function when the page is fully loaded including graphics." ref: http://api.jquery.com/load-event/

Related

jquery IE8/9/10 Bind to click not working

Facing an issue with IE and jquery. The code is working in all other browsers but breaks when used in IE. Fairly simple implementation. But I am javascript novice.
console.log('hi ie');
jQuery(document).ready(function () {
setTimeout(function () {
jQuery(".controlApply").on("click", function (event) {
pollVisibility();
console.log('after poll');
});
}, 1000);
});
//This method checks is a specific div is shown. Dirty way to check if a report is being processed
function pollVisibility() {
console.log('poll');
if (microstrategy.bones.rwb_viewer.objectID == '7647F4F611E2B39B923E0080EF058C78') {
if (!jQuery('#divWaitBox').attr('style')) {
console.log('divWaitBox');
//wait did not appear
microstrategy.getViewerBone().commands.exec('refresh');
} else if (jQuery('#divWaitBox').attr('style').indexOf('hidden') != -1) {
console.log('hidden');
microstrategy.getViewerBone().commands.exec('refresh');
} else {
console.log('other');
setTimeout(pollVisibility, 800);
}
} else {}
}
The console.log never is called however the document.ready seems to work in IE
The doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
If its wrong, I cannot change it. This is an extension of the MicroStrategy BI application.
Depending on your jQuery version, your issue is likely the .bind() which should be performed with .on() like this
HTML
<div class="class" style="height:40px; width:40px; background-color:#ff0000;"></div>
jQuery
$(document).ready(function () {
$(".class").on("click", function (event) {
console.log('We clicked!');
poll(); // <-- wtf does this do exactly??
});
});
The problem with this javascript is that it was attempting to alter a page which is being built with some ajax framework. Its the MicroStrategy BI application. if I put a break point after document ready there is no content renderd on the page.
The solutions on this page helped me get here which should cover if/ff/chrome
jQuery( document ).ready(function() {
setTimeout(test, 1000);
jQuery(".controlApply").on("click", function (event) {
pollVisibility();
});
});
function test(){
jQuery('.mstrTransform').on('click', '.controlApply', function(){
pollVisibility();
});
}
I just have been having a night mare with this exact same issue in IE 11. I was trying to jQuery append() information to a div element. While running the console, the action intermittently worked. If console was closed, nothing happened, it was as if the script was completely ignored. This included an alert statement.
By commenting out the console.log statements IE 11 behaved as expected (which still feels incorrect). I ran the same script in MS Edge and Chrome with the console.logs and everything ran as expected. What I have learned is that console.log is the culprit. This is a common thing between our codes and I am working on IE 11 and the issue still persists. :(

Howto check if images have loaded using Javascript?

In the OnLoad handler of my webpage I'm trying to check if all images have loaded correctly.
I'm iterating over all <img> tags and check them with my isImageLoaded() function. Unfortunately my function only works with Firefox and IE up to version 8.
Any suggestions how I can get it to work in IE 9 and 10?
function isImageLoaded(img) {
// check for IE
if (!img.complete) {
return false;
}
// check for Firefox
if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) {
return false;
}
// assume it's ok
return true;
}
Update: It turns out the main culprit is that OnLoad can be fired before all image are loaded by IE9+. What would be a better trigger to check the images in the page ? I would prefer to check them all at once and not with individual OnLoad / OnError handlers.
In the OnLoad handler of my webpage I'm trying to check if all images have loaded correctly.
I'm assuming you are using body.onload or <body onload="">? This should still mean that all images are all loaded — however, by using:
window.addEventListener('load', function(){
/// everything in the page has loaded now
});
Or for older versions of IE:
window.attachEvent('onload', function(){
/// everything in the page has loaded now
});
You'll get a more consistent behaviour across browsers, and I know for a fact that window.onload will only trigger once everthing has loaded (that includes all other resources like javascript and css however). This link could be interesting:
window.onload vs <body onload=""/>
So the above should make your function a little redundent, unless you are injecting images into the page after the onload event has fired. If however, you wanted to speed things up and not have to wait for everything to download you could use a dom ready listener and then implement the method mentioned by kennypu:
Cross Browser Dom Ready
Just as an added note, as far as I'm aware, image.complete should work for all modern browsers:
https://developer.mozilla.org/en-US/docs/DOM/HTMLImageElement

$(document).ready only firing once in IE but works in Firefox

this is driving me nutz. Just another issue that works fine in everything but IE -aaargh. Anyway, I have some script that should run everytime the page is loaded. Works fine in Firefox but in IE it only executes the first time I go the page. If I leave the page and then go back it will not execute.
<script type="text/javascript">
$(document).ready(function () {
jQuery.ajaxSetup({ async: false });
var leftHeight = $('#Interface_Content').height();
$('#Interface_Nav').css({ 'height': leftHeight });
//This line calls the Controller and populates the corresponding MEssageDesc Drop down
$.get('#Url.Action("GetCompanyName","Company")', {}, function (data) {
$('#Interface_Header_CONAME').replaceWith(data);
});
$.get('#Url.Action("GetLoginStatus", "Company")', {}, function (data) {
if (data == 'True') {
$('#Nav_Links').show();
}
else {
$('#Nav_Links').hide();
}
});
});
</script>
If there is no compulsion on using JQuery-1.4.4, I suggest you replace it with JQuery-1.8.2 the least. With JQuery 1.8.2, I wrote a sample app and ran it on IE 8,9 and it worked fine.
P.S - Before you jump and download the latest JQuery 1.9, fair warning there are quite a few major changes they have made like replacing $.browser with feature detection, etc which might create an issue if you are using it.

jquery not working in IE after ajax call

I am using organictabs plugin, which I initiate in every page load in this form:
$(function() {
$("#example-one").organicTabs();
$("#example-two").organicTabs({
"speed": 200
});
});
The tabs work fine in all browsers, and then I perform an ajax call which regenerates the tabs with the following code:
if(xmlHttp.readyState == 4)
{
HandleResponse(xmlHttp.responseText,'page-wrap');
$(function() {
$("#example-two").organicTabs({
"speed": 200
});
});
}
Again, the tabs are regenerated properly and everything works fine in all browsers EXCEPT in IE, when I try to switch tabs it doesn't work. I am initiating the jquery code onreadystate change, and i really can't figure out what can the problem be with IE?
Any help will be greatly appreciated.
All the best
The problem was with how IE handles the ("a.sample_class").attr("href") attribute. In Chrome/FF the relative path is returned(in this case just the anchor #tag), whereas in IE, after I was calling an ajax page, the absolute path was being returned(http://www.mysite.com/#tag), hence trying to find the entire anchor(string) in the current page.
More information regarding this issue you can read in this article: http://www.glennjones.net/2006/02/getattribute-href-bug/
Hope this is of help to someone, as it really took a few days of my time

$(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>

Categories