I am using the .load() function like this:
<script>
$(document).ready(function() {
$.ajaxSetup({ cache: false });
$("#id").load('file.php');
var refreshId = setInterval(function() {
$("#id").load('file.php?randval='+ Math.random());
}, 4000);
});
</script>
It works perfectly in FF and Chrome. It also works perfectly in IE7.
BUT:
It displays an error message in the bottom bar of IE7 which says:
The object does not support this property or method.
I guess this is because IE7 doesn't support the .load() function.
Is there any way to get rid of this message? It looks really ugly and I'm not sure my boss will approve.
EDIT:
I found the reason!
It was because I used the online version of jQuery.
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
It works fine if I switch to a local copy of jQuery.
<script type="text/javascript" src="custom/js/jquery-1.7.1.js"></script>
maybe check if your function is a function.
if(typeof $("#id").load == 'function')
or replace it with a $.get
$.get("file.php", function (data) {
like the following post jQuery's .load() not working in IE - but fine in Firefox, Chrome and Safari
I found the reason!
It was because I used the online version of jQuery.
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
It works fine if I switch to a local copy of jQuery.
<script type="text/javascript" src="custom/js/jquery-1.7.1.js"></script>
Related
I have jQuery-2.1.4.min.js called before the tag, but when I write something like:
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
alert('hi, world.');
});
</script>
On my PC it is fired of course, but on ten different Android devices it just does not. This is purely HTML/CSS/jQuery rendered site (no phonegap, or anything).
My goal was to have a button do ajax request after it's being tapped, but I can't even test that, because the .ready() function is not firing at all on mobile chrome.
The jQuery is being served from the official CDN, any help would be very much appreciated.
Tried both:
$(function() {
alert('hi, world.');
});
And
jQuery(document).ready(function() {
alert('hi, world.');
});
Same thing.
As suggested I also tried:
window.onload = function()
{
if (window.jQuery)
{
alert('jQuery is loaded');
}
else
{
alert('jQuery is not loaded');
}
}
And it alerts 'jQuery is loaded'.
As per jQuery docs it says: "Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute" - which would mean that DOM is not ready for JavaScript code to execute? But when I try like:
<script type="text/javascript">
alert('hi world');
</script>
It executes on mobile Chrome.
Okay, after extensive investigation it seems that JS breaks on mobile chrome if you have document.ready() function twice, I had one in my core.js file and one in-line on the page.
It works okay on PC (all browsers), but on mobile it works up to the point of second ready() call and breaks all JS after that.
Hopefully this saves some time to others in the future.
JS breaks on mobile view becouse same js use multiple time in file. Check and remove redundancy.
I used the following script to fade-in an image when the page loads:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('img').load(function() {
$(this).fadeIn(4000);
});
});
</script>
The css is set to display none.
This works in all the major browsers, but not in IE. In IE, the image is just not displayed at all. How can I get the fade-in to work in IE?
IE seems to have issues with fading in and out (see reference). You can write a little custom function to handle this:
EDIT: I simplified the code to the following
$(document).ready(function() {
$('img').fadeIn(4000, function (){
$(this).get(0).style.removeAttribute('filter');
});
});
I'm using the scrollTo jquery library in a page I'm building, and it works with Chrome, Safari, and IE 8/9, but not with firefox. Firebug tells me,
TypeError: $("#wrapper").scrollTo is not a function
Here is the line that includes the scrollTo library
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>
Here is the function where I use scrollTo
function scrollPage(currentpage,scrollpage) {
$(scrollpage).find('.text').fadeOut();
$(currentpage).find('.text').fadeOut( function(){
$('#wrapper').scrollTo( scrollpage, 1500, {
onAfter:function(){
$(scrollpage).find('.text').fadeIn();
}
});
});
}
Why would firefox not think scrollTo was a function, while all other browsers I've tried do?
EDIT: It seems that my files work on other computers, but not on my current install of firefox. I am going to re-install and see that helps.
SOLUTION:
Well, it seems a popup blocker caused a conflict! The OP found that Kaspersky installed a security add on in firefox, and was blocking scrollTo.
More: http://github.com/mootools/mootools-core/issues/2202
ORIGINAL POST:
I sometimes get that error when my jQuery code is not enclosed in a $(document).ready(function() {...your jquery statements here ...}); block.
Your function doesn't have to be inside doc ready but the statement that calls it should be.
Works for me (fiddle). Did you include jQuery in your html?
This is how you can do it (BEFORE your ScrollTo library, of course):
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
Instead of using scrollTo I used scrollIntoView and it worked in FireFox, Chrome and IE.
Example :
var element = document.querySelector('.navbar-brand');
element.scrollIntoView();
I'm having a lot of problems with IE7/IE8 and Javascript/jQuery, which I don't have in Chrome or FireFox.
I have this Javascript function:
function changeImg(img,bla){
$('#open_case').css("background-image", "url('"+img+"')");
getIngo(bla);
navigation_image(bla);
}
And this is my onclick function:
<div class="cImage" style="background-image:url('http://bla.com/images/this_image.jpg');" onclick="changeImg('http://bla.com/images/this_image.jpg','2');"></div>
But it's like the function isn't called at all, 'cause if I change the changeImg function to an alert function:
function changeImg(img,bla){
alert('hi!');
}
It still doesn't work.
The only error IE7/IE8 gives is Expecting Object(roughly translated)
What am I doing wrong?
Thanks in advance!
[Edit:]
These are lines IE7/IE8 is pointing at;
<script type="text/javascript" src="Scripts/swfobject.js"></script>
<script type="application/javascript" language="javascript">
function clearText(textfield){
if (textfield.defaultValue == textfield.value){
textfield.value = '';
$(textfield).css('color','#000000');
}
}
function addText(textfield){
if (textfield.value == ''){
textfield.value = textfield.defaultValue;
$(textfield).css('color','#999999');
}
}
If the error is object expected. Then try this
Change your
<script type="application/javascript" language="javascript">
To
<script type="text/javascript">
Is there a reason you're using javascript here? It looks like you're changing the image on a navigation item? You could just just the CSS :hover classes. Regardless, using onmouseover isn't really the "proper" way to be handling this sort of thing in javascript, if you really cannot use just CSS, at the very least look into handling the mouse over envent properly in jQuery.
I have a website using the prootype framework and I am looking to use a jquery plugin. Everything works just not in IE8. It works in ie7 which amazes me. Any idea what maybe wrong?
IE8 gives me object doesnt support this property or method where line jQuery.noConflict(); is
<script src="/my/docs/jquery.js" type="text/javascript"></script>
<script src="/my/docs/jquery.simplyscroll.js" type="text/javascript"> </script>
<script type="text/javascript">
jQuery.noConflict();
function OpenUp(sURL){
window.open(sURL,null,'height=560,width=820,status=yes,toolbar=yes,menubar=yes,location=yes,resizable=yes,scrollbars=yes',false);
}
jQuery(document).ready(function($) {
$("head").append("<link>");
css = $("head").children(":last");
css.attr({
rel: "stylesheet",
type: "text/css",
href: "/my/docs/jquery.simplyscroll.css"
});
$("#scroller").simplyScroll({
autoMode: 'loop',
framerate: 1,
speed: 1
});
});
</script>
I also tired the following: var $j = jQuery.noConflict(); var j = jQuery.noConflict();
everythig works just not in IE8 alone.
I've run into this also using jQuery-1.4.4.js. Everything works fine except in IE8. IE8 does not recognize jQuery() anything. I was able to resolve the problem by loading jQuery and running $.noconflict() prior to loading Prototype and it all runs fine on all my test browsers including IE8. This sequence is contrary to the jQuery documentation and therefore I'm nervous about it. Can't find anything on the jQuery site about it.
t22harris
The only way I was able to fix this, for IE8 (which was the only one with the problem) and other browsers was to put jQuery and the noConflict() call in the head immediately after initializing the other library. Like so:
<script type="text/javascript" src="/path/to/prototype.js"></script>
<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript">var $j = jQuery.noConflict(); </script>
... followed by any other scripts that use either jQuery or Prototype.
I've been having a similar problem. The solution that I'm currently using is to save the $ variable in a temporary variable, loading jquery(I'm loading jquery from js code), running jquery dependent code (with jQuery.noConflict), the setting the $ variable back.
It's dirty, but it seem to have done the trick for me.
My function which adds jquery (if necessary) is:
function getJQueryAndGo(callback) {
var thisPageUsingOtherJSLibrary = false;
var tempDollar = $;
// Only do anything if jQuery isn't defined
if (typeof jQuery == 'undefined') {
if (typeof $ == 'function') {
thisPageUsingOtherJSLibrary = true;
}
loadToHead('script','http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js', function() {
if (typeof jQuery=='undefined') {
//alert('Super failsafe - still somehow failed...')
} else {
jQuery.noConflict();
(function($) {
callback($);
})(jQuery);
}
});
}
else
{ // jQuery was already loaded
jQuery.noConflict(); // This may not be necessary
(function($) {
callback($);
})(jQuery);
}
$ = tempDollar;
}
The loadToHead simply loads the script into the head tag somewhere and runs the callback function when the script is loaded.
Most of this code I have found online and tweeked it. Unfortunately I don't remember where to give the credit as of now.
Ive had a simular problem in the past and worked around it by using the emulate ie7 meta tag
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
Im not sure if this is the best work around though.
Just had the same problem. IE 8 does not like:
var jQuery = jQuery.noConflict();
changed it to:
var jq = jQuery.noConflict();
worked fine.
I've had strange problems in the past with IE8 on machines with multiple versions of IE installed. In my case an error was popping when I tried to open a link in a new window via javascript. The same code worked fine on IE6 and 7, and a machine with only IE8 installed ran it fine as well.
This is an issue I also discovered. The way I fixed it was to upgrade my jQuery to 1.4. Version 1.3.2 fails with newer prototype on IE8. Sorry this answer is late.
I have the exact same error with 1.4.4 and 1.4.3 loading jquery after prototype and only in IE8, not even in Ie7 or Ie6
Jquery 1.4 solved this for me.