IE8 only - Object doesn't support property or method 'widget' - javascript

I am getting an error related to [jCoverflip][1] that only occurs in IE8. The following error occurs:
SCRIPT438: Object doesn't support property or method 'widget'
jquery.jcoverflip.js, line 508 character 1
which relates to the following code:
$.widget( 'ui.jcoverflip', {
I have jQuery and jQueryUI both included, before the script, plus the script runs fine in all other browsers.
Whats causing the issue?

You seem to be loading jquery twice:
<!-- First here -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/./scripts/jquery-ui-1.7.2.custom.js"></script>
<!-- Then again here -->
<script type="text/javascript" src="/scripts/jquery.js"></script>
They appear to be v1.3.2 and v1.0.4 (!), respectively. Those are completely out of date. I don't know what jQuery UI 1.7.2's requirements are, but I'm sure v1.0.4 won't do it. v1.3.2 might, jQuery UI 1.7.2 is a couple of years old. (You might at least look at jQuery UI 1.7.3, which says it's for jQuery v1.3.2.)
Also, you're using MooTools on the page, but I don't immediately see where you're calling jQuery.noConflict() (I didn't go digging all that deep). That could well be the problem, MooTools and jQuery both try to use $. To avoid a conflict, immediately after loading jQuery, do this:
<script>
jQuery.noConflict();
</script>

I had similiar problem. There is jquery.ui.widget.js which wasn't included. My problem got solved after including it.

Related

AngularJs 1.x not working with SemanticUI.js

When i try to use AngularJs with SemanticUI.js, the console says
Uncaught ReferenceError : jQuery is not defined
Here is my example of implementation :
<html>
<head>
<!-- I'm head of the document -->
</head>
<body>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/angular.min.js"></script>
<script src="assets/js/semantic.min.js"></script>
<!-- My own script place right here -->
</body>
</html>
Am i doing the right way? I've tried to swap the script position, but my code still doesn't work.
I think the problem in the semantic.min.js, maybe the $ has been replaced by angular or something that i don't know, because when i try to remove the semantic.min.js, no one appears in the console.
I have also try another solution that i've found in stackoverflow, but yes, it still not works.
Only additional information :
AngularJs version 1.5.5
JQuery version 2.2.4
Semantic version 2.1.8
Can anyone give me a solution?
I think it's jQuery problem.
That error can only be caused by one of three things:
Your JavaScript file is not being properly loaded into your page
You have a botched version of jQuery. This could happen because someone edited the core file, or a plugin may have overwritten the $ variable.
You have JavaScript running before the page is fully loaded, and as such, before jQuery is fully loaded.
Please take a look in here for more detail.
JQuery - $ is not defined
just add a slash
<script src="/assets/js/jquery.min.js"></script>
<script src="/assets/js/angular.min.js"></script>
<script src="/assets/js/semantic.min.js"></script>
Oops, sorry, my bad.
I found the problem, it's not the jQuery problem, it's Electron problem.
Because my project use Electron, so the solution is right here :
Electron : jQuery is not defined

Yet another jQuery noConflict()

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><!-- jQuery and $ now point to 1.10.2 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><!-- jQuery and $ now point to 1.11.0 -->
<script>
$11 = $.noConflict();
// $11 now points to 1.11.0
// $ still points to 1.10.2
</script>
<!-- SB Admin Scripts -->
<script src="js/sb-admin.js"></script>
<!-- carouFredSel -->
<script src="js/jquery.carouFredSel-6.2.1.js" type="text/javascript"></script>
<script src="js/carouFredSel-hookup.js" type="text/javascript"></script>
I have problems getting this right.
The script sb-admin.js doesn't work together with the carouFredSel.js on the same page. The code above shows my attempt to use 2 different jQuery libraries and 2 different variables($ and $11), each of them pointing to one of the libraries.
In the script sb-admin.js I only use the variable $11 and in jquery.carouFredSel.js and carouFredSel-hookup.js only the variable ยง.
At the moment none of the functions seem to work. What am I doing wrong here?
Any help appreciated.
According to the documentation
If for some reason two versions of jQuery are loaded (which is not recommended), calling $.noConflict( true ) from the second version will return the globally scoped jQuery variables to those of the first version.
You didn't provide the true argument. Change it to:
<script>
$11 = $.noConflict(true);
// $11 now points to 1.11.0
// $ still points to 1.10.2
</script>
I have no idea whether this will solve the overall problem of conflicts between the two other libraries. It seems unlikely that it's because they require different versions of jQuery.
I did try you recommendation and set the noConflict to (true),
but it did not help whatsoever.
In the meantime I found a workaround but unfortunately I can't tell why it works now.
I am using another function for about the same menu and this one apparently doesn't conflict with my carousel.
This is the script that conflicted with the carouFredSel script was the menu from here:
http://startbootstrap.com/templates/sb-admin-v2/
And this is the other menu script that works fine with carouFredSel is this:
http://demo.onokumus.com/metisMenu/

Uncaught TypeError: Object has no method 'on'

I have this line of code that keeps giving me an error... I use it on other pages and it doesn't produce this error.
$('.viewFrame').on("click", function(){
I have jQuery 1.11.0 and migrate 1.2.1 libraries imported.
Link to page : https://www.metsales.com/MetropolitanSales/constantContact/citizen/cmpi.aspx
On the page you linked, in jqueryLoader.min.js, it says:
/*! jQuery v1.6.4 http://jquery.com/ | http://jquery.org/license */
not version 1.11.0. The .on() method was not defined until version 1.7.
EDIT:
After further investigations, it appears you are loading two versions:
1.11.0
1.6.4
In the order listed above. As #AWolff stated in his comment below, the last version loaded is the version used. In this case 1.6.4 is loaded after version 1.11.0, so .on() will be undefined.
You're running jQuery 1.6.4, but you need at least 1.7
To prove this fire up the JS console and type in $.fn.jquery
You're loading jQuery twice in your application. At the top you have:
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
and later on you have:
<script src="https://www.metsales.com:443/MetropolitanSales/Script/jQuery/jqueryLoader.min.js" type="text/javascript"></script>
The second one is overwriting the jQuery loaded by the first one, and it contains jQuery version 1.6.4, which doesn't have .on().
Remove this second script, it shouldn't be needed.

Possible jQuery conflict when using bgStretcher

I have setup a test html page to play with bgStretcher before adding it to a custom Wordpress theme. It works fine when I use the jQuery version:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
on , but it stops working when I use the version included in Wordpress:
<script type="text/javascript" src="http://pebbl.es/test/wp-includes/js/jquery/jquery.js?ver=1.6.1"></script>
The only difference I've seen between the two files is that the WP version prevents jQuery conflicts at the end, calling noConflict().
The page (html below) loads the first image, but then the console outputs an error:
Uncaught TypeError: Cannot read property 'fn' of undefined
(anonymous function)
The live version is on: http://pebbl.es/test/test .Any ideas on how to fix this? I can see it is a conflict error, but I can't see where/how to fix it? Many thanks.
<html>
<head><title>Test</title>
<script type='text/javascript' src='http://pebbl.es/test/wp-includes/js/jquery/jquery.js?ver=1.6.1'></script>
<script type="text/javascript" src="bgstretcher.js"></script>
<link rel="stylesheet" type="text/css" href="bgstretcher.css">
<script type="text/javascript">
jQuery(document).ready(function($){
jQuery('body').bgStretcher({
images: ['Rochy_Coleccion1.jpg', 'Rochy_Coleccion2.jpg'], imageWidth: 1024, imageHeight: 748
});
});
</script>
</head>
<body>
</body>
</html>
Namespace your jQuery: http://api.jquery.com/jQuery.noConflict/
add this between the two script tags:
var $my_jq = jQuery.noConflict();
after this, you have your 1.6.1 jQuery in no conflict mode.
you will have to call it using your variable name after this, e.g. $my_jq('#content')
UPDATE
this might not work, I see you are not loading 2 different jQuerys, your problem occurs when trying to use bgstretcher with an jQuery that is already in noConflict mode.
I am not a wordpress expert, but you might just change the wordpress jQuery to use your variable name. You can set jQuery in noConflict mode with or without namespacing it to a variable and it looks like your wordpress JQ does it without.
Or you can first load your own jQuery, namespace it and then use this for bgstretch.
The problem is that the noConflict call "frees" the $ variable again for use with different frameworks that also want to make use of it, so your bgstretch gets an error when trying to call $.
Or just try to remove the noConflict completly and see if it has any effect on your wordpress installation (it should not, I guess it is just for the purpose of giving WP users the ability to use different JS frameworks as well).
Hope you work it out.

jQuery .Noconflict Issue

I have a problem that I just cannot resolve and its driving me insane. I am using the jQuery library and I am using ".noconflict".
I am trying to use this on my blog with the following script -
http://www.internetmarketingmonitor.org/word-press-plugins/imm-glossary-wordpress-plugin
The problem is - I keep getting the following error -
> [Exception... "Component returned failure code: 0x80070057
> (NS_ERROR_ILLEGAL_VALUE) [nsIDOMXPathEvaluator.evaluate]" nsresult:
> "0x80070057 (NS_ERROR_ILLEGAL_VALUE)" location: "JS frame ::http://myblog.com/wp-content/plugins/IMM-Glossary/JavaScripts/prototype.js
> :: anonymous :: line 1081" data: no]
> Source:http://myblog.com/wp-content/plugins/IMM-Glossary/JavaScripts/prototype.js
What's not making sense is that I AM USING .NOCONFLICT? - The error can be easily replicated by simply downloading this plugin and putting the *.js on the same page as jquery?
Would anyone be able to help ?
I looked at the source, but don't see jQuery on the page right now.
Based on your comment to your original question, it sounds like you're not actively kicking off the noConflict function. You need to do something akin to this.
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript">
jQuery.noConflict();
</script>
You'll note the call to jQuery.noConflict is not wrapped in any sort of DOM ready check. You want to run it immediately after you include jQuery to be safe.
The $ is used by other javascript frameworks also. So when you have two of them there is a problem. jQuery plays nicely with other frameworks, you just need to call noConflict function:
<script type="text/javascript" src="..."/>
<script type="text/javascript">
jq=jQuery.noConflict();
</script>
now you can call jquery functions using alias you have created above:
<script type="text/javascript">
jq(document).ready(function(){alert(jq);});
</script>
I found a slightly alt method of fixing my jquery conflicts that I hope might help others.
Like on this page I did the
jq=jQuery.noConflict(true);
Just after the jquery.min.js was called. Then I did a
jq=jQuery.noConflict(false);
after my actual script to make my page's lavalamp work. Now both my lavalamp and the side nav (which was causing the jquery conflict) are getting along. :)
Possibly a lazy cheater way of going about it but I'm still learning here! hehe
Thanks for the response. The answer actually was found
http://docs.jquery.com/Using_jQuery_with_Other_Libraries#Including_jQuery_before_Other_Libraries
Basically, when this occurs - I need to put the jQuery script FIRST in my list of scripts - this was the primary issue. When jQuery wasnt the first script - it generated the error - regardless of the manner in which I call the .noconflict function.
Basically, the jquery script needs to be the first script called to avoid associated conflicts.

Categories