I have a jQuery function that works without error on a Desktop browser, but throws an error on an iPad or iPhone. When I run the console to find the error I get this message. I'm sorry I not giving you guys much to go on. I can provide more information if you let me know what you are looking for.
EDIT: I've disabled all other plugins. Take note that this code works fine on computer browsers, but not on mobile devices; specifically iPads and iPhones.
EDIT_2: I just found this code in my page. It seems that if the browser is from a mobile device it won't load some of the plugins. New question, is there a reason why my theme would restrict the loading of these plugins?
var ismobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
if(!ismobile){
/** ONLY EXECUTE THESE CODES IF MOBILE DETECTION IS FALSE **/
/* REQUIRED: Datatable PDF/Excel output componant */
document.write('<script src="js/include/ZeroClipboard.min.js"><\/script>');
document.write('<script src="js/include/TableTools.min.js"><\/script>');
document.write('<script src="js/include/select2.min.js"><\/script>');
document.write('<script src="js/include/jquery.excanvas.min.js"><\/script>');
document.write('<script src="js/include/jquery.placeholder.min.js"><\/script>');
TypeError: 'undefined' is not a function (evaluating '$(".themed select.with-search").select2()')
Here is the code it is complaining about:
$(document).ready(function(){
setup_custom_form_elements();
});
function setup_custom_form_elements() {
if ($('.themed').length) {
$(".themed input[type='radio'], .themed input[type='checkbox'], .themed input[type='file'].file, .themed textarea").uniform();
$(".themed select.with-search").select2();
/* some demo buttons for select 2 */
$("#disable-select-demo").click(function() {
$("#select-demo-js select").select2("disable");
});
$("#enable-select-demo").click(function() {
$("#select-demo-js select.with-search").select2();
});
}// end if
}
Here is the answer:
As mentioned above, my theme was restricting the loading of the plugin's source file. Stupid mistake, I should have noticed it. I have taken the Select2 plugin out of the if(!mobile) statement and now everything works just fine.
Thanks for all the help guys!
Related
I'm trying to use owl carousel in a wordpress ACF custom block.
owl carousel works if I don't put jQuery(document).ready in my script.
But if I have jQuery(document).ready, the console tells me "jQuery (...). OwlCarousel is not a function".
Then i don't know if there is link beetwen both but i have thumbnail gallery to click for launch slider on specific image and that code :
jQuery('.single_image_gallery').click(function(){
mySlide = parseInt(jQuery(this).attr('data-slide'));
jQuery(mySlider).trigger("to.owl.carousel", [mySlide, 1,true])
})
not working at all.
i know there is problem with jQuery migrate for wp 5.5 but I tried with the plugin "Enable jQuery Migrate Helper" and the result is the same....
Try doing this.. Sometimes plugins can interfere with jQuery
jQuery(function($) {
// then use it like this
$('.single_image_gallery').click(function(){
mySlide = parseInt($(this).attr('data-slide'));
$(mySlider).trigger("to.owl.carousel", [mySlide, 1,true])
});
});
This way you import $ locally and it should prevent it from interfering with other global scripts or plugins
I'm trying to make jQuery UI work, but it doesn't. Here's what happens.
I'm loading dependencies:
<script src="assets/src/js/angular/angular.js"></script>
<script src="assets/src/js/angular-animate/angular-animate.js"></script>
<script src="assets/src/js/angular-route/angular-route.js"></script>
<script src="assets/src/js/jquery/dist/jquery.js"></script>
<script src="assets/src/js/jquery-ui/jquery-ui.js"></script>
<script src="assets/src/js/app.js"></script>
<script src="assets/src/js/main.js"></script>
That's my main.js file:
$(function () {
$("input[type=submit]")
.button()
.click(function (event) {
event.preventDefault();
});
});
$(function () {
$("#circum").buttonset();
});
$(function () {
$("#dialog-message").dialog({
modal: true,
buttons: {
Ok: function () {
$(this).dialog("close");
}
}
});
});
When I run the code in Brackets jQuery UI is loaded but doesn't work, however, when I comment my main.js file out and then bring it back that's the error I get in the console and UI is suddenly working. It's extremely weird.
jQuery.Deferred exception: elem.getClientRects is not a function TypeError: elem.getClientRects is not a function
at jQuery.offset (http://127.0.0.1:27530/assets/src/js/jquery/dist/jquery.js:9779:14)
at Object.getWithinInfo (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:1157:26)
at jQuery.$.fn.position (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:1179:23)
at _position (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:8709:17)
at ._position (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:415:25)
at open (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:8334:8)
at .open (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:415:25)
at _init (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:8210:9)
at ._init (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:415:25)
at _createWidget (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:587:8) undefined
I've found this thread discussing the issue, but still wasn't able to fix it.
Github
Cheers.
What version is your jQuery UI? I had the same issue with jQuery UI 1.11.4 and jQuery 3.0.
After installing jQuery UI 1.12.0-rc.2, the problem was fixed.
Adding the jQuery 3 Migrate Plugin resolves this issue as noted here, updated UI will be coming out soon.
NOVEMBER 5, 2018 UPDATE
If using latest jQuery and jQuery UI , use latest jQuery migrate to prevent compatibility warnings/issues.
Turns out this is a compatibility between jQuery 3.x.x and jQueryUI prior to 1.12.0.
including below script resolved the issue for me.
https://code.jquery.com/jquery-migrate-3.0.0.min.js
After doing all of the updates and STILL having the problem, I just fixed it in the code:
Look for this:
if ( !elem.getClientRects().length ) {
return { top: 0, left: 0 };
}
Enter this just before it:
if (!elem.getClientRects()) {
return { top: 0, left: 0 };
}
I updated our legacy site, from jquery 1.12 to jquery 3.5 and hit this same problem.
The site is using jquery-ui 1.10 but sadly updating to jquery-ui 1.12 broke other things so I couldnt use that option.
Running the production site with the migration plugin felt wrong so instead I looked how this problem was fixed in jquery-ui 1.12.
Patching jquery-ui 1.10 with the fix from jquery-ui github "Position: Guard against passing window to Offset" worked for me.
This is an old post, but if someone like me need to update legacy sites, maybe this information can be useful.
I had same issue with jquery-3.0.0. I have just included jquery-migrate.3.0.0 reference after jquery reference. Issue is resolved and its working fine now.
> npm remove jqueryui
> npm i -S jquery-ui-dist
This will download a version of JQuery UI which can be included directly with <script> tags.
I had the same problem when I was trying to get X and Y position of the mouse using " .pageX/.pageY " on a click event.
Try to change the source of the libraries in order to get the latest update of them, making sure that they are compatible.
Those links are now working and they could fix the issues.
I have a strange issue with the latest version of masonry. Got it to work before but for a new project I downloaded the latest versions of both jQuery and Masonry, and all works fine. Except IE7 won't load the Masonry library due to an error in the plugin so it seems.
I got this error in the IE7 console:
This is the entire code of my test-file, so anybody can quickly reproduce it:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type='text/javascript' src='jquery-1.10.1.min.js'></script>
<script type='text/javascript' src='masonry.pkgd.min.js?ver=3.0.0'></script>
</head>
<body>
Test
</body>
</html>
Am I missing something obvious or is Masonry no longer compatible with IE7? I didn't find anything about this on the website.
As you can see I'm using jQuery 1.10.1 and Masonry 3.0.0
Edit: I tried with the non-minimized version, and I get
SCRIPT5009: 'Element' is undefined
masonry.pkgd.js, line 914 character 1
Strange, because there is nothing called Element on that line..
here's a snippet of masonry.pkgd.js:
911 /*jshint browser: true, strict: true, undef: true, unused: true */
912 /*global define: false */
913
914 ( function( global, ElemProto ) {
915
916 'use strict';
917
918 var matchesMethod = ( function() {
919 // check un-prefixed
920 if ( ElemProto.matchesSelector ) {
921 return 'matchesSelector';
922 }
Read about the library support on their FAQ page
What is Masonry’s browser support?
Masonry works in IE8+ and modern browsers, including mobile browsers
on iOS and Android.
In case this can still be useful to anyone, Masonry really doesn't support IE7 - there is also a won't-fix issue about this on github - https://github.com/desandro/masonry/issues/356.
Still I wanted to prevent the javascript from breaking entirely for IE7 users, so I've added the following (which helps if you are using masonry as a jQuery plugin):
if(navigator.appVersion.indexOf("MSIE 7.")!=-1{
$.fn.masonry = function() { };
}else{
<!-- ORIGINAL MASONRY CODE GOES HERE -->
...
...
}
This will create an empty jQuery plugin called Masonry in case of IE7 and will prevent the script from breaking the entire javascript of the page (of course the Masonry stub does nothing in that scenario but at least we prevented the error and other stuff can still work)
hello can I get some tips on how i can test if I have implemented jquery.dimensions correctly?
http://archive.plugins.jquery.com/project/dimensions
sort of like when u test for jquery,
$(document).ready(function() {
alert('hi');
});
I am trying to implement a floating menu bar on a site. suspect that I have not installed dimensions correctly.
You can test if a plugin is loaded with:
if(jQuery().somePluginName) {
// plugin is loaded
}
IE7 is showing this error message: (no other browser is showing any error except ie7)
Message: Object doesn't support this property or method
Line: 97
Char: 2
And line 97 has this:
$('.megamenu').megaMenuCompleteSet({
The complete javascript code is this:
<script>
$(document).ready(function($){
$('.megamenu').megaMenuCompleteSet({
menu_speed_show : 300, // Time (in milliseconds) to show a drop down
menu_speed_hide : 200, // Time (in milliseconds) to hide a drop down
menu_speed_delay : 200, // Time (in milliseconds) before showing a drop down
menu_effect : 'hover_slide', // Drop down effect, choose between 'hover_fade', 'hover_slide', etc.
menu_click_outside : 1, // Clicks outside the drop down close it (1 = true, 0 = false)
menu_show_onload : 0 // Drop down to show on page load (type the number of the drop down, 0 for none)
});
});
</script>
Can somebody advice me what is wrong with line 97?
Thanks!
UPDATE SOLVED:
i was using the latest one, i fixed it myself, it was all my fault, i had the jquery lib loaded two times with different versions, it was not making any trouble on other browsers except IE7. But after debugging i found the multiple lib loading and removed and there were no errors :)
Thank you everyone!
What version of the MegaMenu script are you using? I can see this in their changelog:
06/23/2012 – Version 2.11
Fixed an issue occurring under IE7 in megamenu.js
I am not sure if this is the issue but you don't need to pass JQuery as an argument since it is global so:
$(document).ready(function($){
should be:
$(document).ready(function(){
This may be the issue since your JQuery plugin appears to be what is not working properly.