Javascript not working when located in external file - javascript

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

Related

jQuery not working on IE11 but working on Chrome, Firefox and Edge?

My scripts are working fine on all other browsers EXCEPT IE11. For example
jQuery('#btnblacklist').click(function(){
jQuery('#popUpBlackList').css("display","block");
jQuery('.cover').css('display','block');
});
is not returning anything on IE11. Even Microsoft Edge is okay with it.
I have already called the script in my header.
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
Any idea?
Try this solution, you need to wrap our code in a .ready function.
$(document).ready(function () {
jQuery('#btnblacklist').click(function () {
jQuery('#popUpBlackList').css("display", "block");
jQuery('.cover').css('display', 'block');
});
});
So you're code will start to run when the document is finished loading.

window.scroll event does't work on android web view

I've created a web view recently & everything seems to be working fine except the window.scroll event. I'm loading content in my mobile website once user reaches the end of the screen, unfortunately that doesn't work in Android Webview.
I've enabled javascript in Android Webview.
Here is the simple code I'm using in PHP:
$(window).scroll(function(){
alert('H'); //This never happens
});
In main_activity.java, this line is included:
webSettings.setJavaScriptEnabled(true);
What could be the possible reason behind this? Any solution?
make sure jQuery loaded finish, then your code can work fine
put the code after </html> :
<script type="text/javascript">
window.onload = function() {
if (window.jQuery) {
// jQuery is loaded
alert("Yeah!");
} else {
// jQuery is not loaded
alert("Doesn't Work");
}
}
</script>
if alert "Yeah!", just replace alert("Yeah!") to your code.

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/

$(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 iframe scroll event (IE)

Can't listen to the scroll event in Internet Explorer 7.
I've tried:
$("#myIframe").scroll(function() { alert('hi'); })
Works for FF:
$($("#myIframe").contents().get(0)).scroll(function() { alert('hi'); })
Getting keypresses work:
$($("#myIframe").contents().get(0)).keydown(function() { alert('hi'); })
As much as I love jQuery. I can't get this to work. However, I tried this in plain old javascript and it worked just fine in IE, FF,Safari and Chrome.
<script type="text/javascript">
window.onload = function() {
var frm = document.getElementById("myIframe").contentWindow;
frm.onscroll = function(){
alert("EUREKA");
}
}
</script>
EDIT: The following works in FF, Safari and Chrome when using window.load(). When using document.ready it only works in FF. For whatever reason it doesn't work in IE8 in either event.
$(window).load(function(){
$($('#myIframe').contents()).scroll(function(){
alert('frame scrolled in jquery');
});
});
I know it's an old thread, but some people could find it useful.
$(document).scroll() can be replaced by $(window).scroll(), and it has worked for me so far.
Try this:
2 things must happen before you can traverse the dom of a nested browsing context.
You need to know that the iframe exists, taken care of with the document ready event.
And you need to make sure that the iframe has loaded.
ie:
$(document).ready(function(){
// #page is the id of the iframe
$('#page').load(function(){
// $(this)[0].contentWindow is the window of your nested browsing context/ iframe
$($(this)[0].contentWindow).scroll(function(){
console.log($(this).scrollTop());
});
});
});
One thing to note is that this will definitely not work cross browser in Firefox.
Put this on the parent:
var childScrollHandler = function () {
alert('Scrolling going on');
}
And then put this on the iframe content:
$(document).bind('scroll', function(ev){
parent.childScrollHandler(ev);
});
replace $(document) by whatever element you are trying to listen into.

Categories