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

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.

Related

Javascript not working when located in external file

my Javascript (jQuery) is working fine in newer browsers (Chrome, Firefox, safari 10+) but not in slightly older Browers (Safari 9, IE 11..).
It however does work fine, when I include it directly on the page and dont try to load it from an external file. I have been at it for hours and I cant figure out what the problem is..
My Javascript:
$( document ).ready(function($) {
$(".monatsInput").on("click", function () {
console.log("clicked");
$(".monatsWahl").css("border-color", "lightgrey")
$(this).parent().css("border-color", "#4CA3D8");
var newPrice = $(this).val();
$(this).parent().parent().parent().parent().find(".angebotsPreis").html(newPrice);
})
// Mobile Nav
// --------------------------------------------------
// --------------------------------------------------
$("#burgerNav").on("click", function () {
$(".navList").toggle("display");
});
// Back to previous page
function goBack() {
window.history.back();
}
$(document).foundation();
})
Im not sure which part of the HTML to include, so the entire page can be viewed here:
www.immobilienheld24.de
I hope someone has an idea.
Thanks

Using a window.load function in Internet Explorer

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/

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. :(

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

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