$(...).modal is not a function in module - javascript

I realise this question has been asked a few times but none of the solutions in previous questions have resolved my issue.
I am trying to hide a modal using:
$('#modal').modal('hide')
but am getting:
$(...).modal is not a function
in the console.
However if I go into the developer console and enter:
$('#modal').modal('hide')
it works perfectly
I am getting jQuery/bootstrap via a CDN in the index.html and have checked the order of the imports and checked for multiple imports of jQuery.
EDIT: My jQuery/bootstrap scripts are being loaded at the top of the index.html and the JS module is included at the bottom of the page so the order seems correct. $('#modal').modal('hide') is being called on a $(window).on('resize') event

If you enter in developer console and it works means, problem with document ready issue or javascript placement issue.
just try this to confirm.
$(function(){
$('#modal').modal('hide');
});
If this working, then document ready issue.
another one is you should use this $('#modal').modal('hide'); after jquery-ui.js.
Please provide your code sample for further investigation.

Related

Uncaught TypeError: jQuery(...).fancybox is not a function |fancybox used in wordpress

I have a wordpress website and I want to show my video using fancybox, so I tried wp plugin like "fancybox for wordpress" and "easy fancybox".
But both of them give me the error message "Uncaught TypeError: jQuery(...).fancybox is not a function".
I search for many questions on here and found this can be jquery conflict, but I cannot figure out where is it.
here is my site http://skyblueenglish.co.uk
Notice that I only have one of above plugins at one time.
as per my thinking and till i have checked, what happen is,
in word-press you have included fancybox jQuery and it will obviously installed when you have installed the plugin. Now what happen is ,while using some JS function or JS Class it is mandatory to include jQuery file before we use/include the third party JS.
I checked the "View Source" for your page.
<script src="http://skyblueenglish.co.uk/wp-content/themes/skybluetheme/js/jquery.min.js"></script>
and i found that above JavaScript file is included in the footer.
i just removed that line and put it before
<script type='text/javascript' src='http://skyblueenglish.co.uk/wp-content/plugins/fancybox-for-wordpress/fancybox/jquery.fancybox.js?ver=1.3.4'></script>
and the error is Gone.
so what you have to do is, you have to find your footer, find the included jquery.min.js . remove it from the footer and include it from header.
Let me know if you dont understand anywhere.
;( function( $ ) {
$(document).ready(function(){
$(".fancybox").fancybox({
//....
});
});
} )( jQuery );
I did so many experiments on same topic and also tried with many different way to solve according to wherever I found similar topics on internet but trust me nothing worked out for me and then finally I simply tried to see what exactly error says:
Uncaught TypeError: $(...).fancybox is not a function
and for which I simply removed a line which was saying if($.fn.fancybox!==null).
I am not strong enough to understand Javascript or Jquery thing being fresher so I just tried with simple logic and it worked for me lol.
This might not be the right solution but just thought to share my experience so maybe for someone it may work too.
It worked properly without loosing any function by removing below code
if($.fn.fancybox!==null)
{$("a[class^='fancyBox']").fancybox();
$("a[class^='fancybox-thumb']").fancybox(
{helpers:{title:{type:'outside'},thumbs:{width:50,height:50}}});}
Thank You!

Javascript Conflicts in Console for Wordpress Plugin Global Gallery

I hope you can help me to debug my conflicts on the site I am working on:
URL: http://metalotechnika.com
PW: 12345678
If you then go to http://metalotechnika.com/foto-galeri/foto-kangjella-hekuri/
You will find a gallery that isn't loading. Most probably due to javascript conflicts. Could you pint me in the right direction here?
You will find some errors in the console: "TypeError: jQuery(...).lcweb_lazyload is not a function"
I thougt, that it must be jQuery not loading correctly. But I already tested jQuery in my main.js, and is working. Don't know about this time.
Ok, found the problem.
jQuery is loaded 2 times. And this is were the conflict came from. I just removed jQuery from my functions.php because Wordpress already loads it's own jQuery and throws conflicts if it is loaded a separate different time.
Thanks anyway.

Magento add to cart doesnt work

Hello i have a problem with my add to cart button in my magento theme. i have changed all theme, but it doesnt work, please any can help me? i see in the console the error:
Uncaught TypeError: Cannot read property 'submit' of undefined gabinete-ice-2x24w-magg.html:220
onclick
but too appear error in my prototype.js im put here the file prototype.js, and here the live link http://masluz.panamerik.net/gabinete-ice-2x24w-magg.html i hope can help me guys thanks!
PROTOTYPE.JS LINK:
http://masluz.panamerik.net/js/prototype/prototype.js
When i go to checkout page to place the order have error too with prototype.js whats happend with this?
You are callling two copies of jQuery, this will cause all sorts of issues with Magento.
<script type="text/javascript" src="http://masluz.panamerik.net/js/megamenu/jquery-1-7-2.js"></script>
<script type="text/javascript" src="http://masluz.panamerik.net/js/iwd/all/jquery-1.10.2.min.js"></script>
You are using multiple version of jquery (1.7.2, 1. 1.10.2 and lastly 1.3.2). Since the last loaded version is 1.3.2 it is very much outdated and will not support many functions.
Also, you are loading jquery.noconflict file before your last jquery include, hence the errors are most likely because of the conflict issues.
You can try removing all other version of jquery and load noconflict.js file at the end of all the scripts.

FancyBox Jquery Null Error - Strange issue

I am experiencing a very strange issue i am hoping someone can answer (its kind of broad, but i will explain it my best), code works on local page when opened, but as soon as the same page is uploaded it throws an error. Two others have also looked at this, resulting in more confusion.
I downloaded FancyBox to use the inline feature to pop up a user form via href link, instead of taking the user to an additional page.
You can see the "stock" fancy box here:
1 fancyapps.com/fancybox/demo
Under various options, Inline is what i am using.
I didnt need all of the other features that came with FancyBox so i stripped the page to the following, which works just fine:
2 *Fancy Box Demo Stripped to Inline Feature only*
So then, i applied this code to our sandbox copy of the page to implement:
3 *Sandbox Copy with Fancy Box inline feature added to "make offer" link*
It stops working! There are no conflicts with other javascript on the page, and the only difference is that it has a couple of color .css changes, all .fancybox was named to .ptroffer and that the css code is not inline on the page (which wouldn't cause this error anyway).
This same page, opened locally works beautifully - upload and it throws error.
SCRIPT5007: Unable to get value of the property 'ptroffer': object is null or undefined
<script type="text/javascript">
$(document).ready(function() {
$('.ptroffer').ptroffer();
});
</script>
Works fine with link #2, and with link #3 locally, but with #3 uploaded it throws error.
Please!
Something in your code somewhere is overriding $. If you change that "ready" handler to call
jQuery('.ptroffer').ptroffer();
you won't get that error. However, things may not work; I think that an older version of jQuery is being imported by something (1.3!), which is bad.
edit oh I see, something's pulling in Prototype. You've got a regular script soup going on there, and things are going to be unpredictable and bizarre until you get that straightened out. Probably somewhere in there something's calling jQuery.noConflict(), but that "ready" handler you're adding isn't written to expect that. Whatever code that's expecting jQuery 1.3 may be in for a surprise also.

jQuery page pre-loader appears after page is loaded

So on one of my websites I added a jQuery pre loader which works perfectly fine on all pages except my main page.
The page that is causing issues also has a slider jQuery plugin which doesn't seem to work (at first) as well. Basically it seems that for some reason jQuery plugins are only kicking in after page is fully loaded. It happens once, once page gets loaded at least one time (cached) everything works fine.
I experimented with placing scripts in head tag and before closing body tag, no difference.
You can see issue here (click left red button, after that you'll be redirected to /main.php page which is the one causing issues.)
http://freshbeer.lv
I don't think That I'll need to post any code here as I am almost certain it is something to do with positioning of jQuery files (which you can see by inspecting page), but if you think it is something different and you'd like me to post code here, please feel free to ask and I will update my question.
You have these:
<script src="js/placeholder.js"></script>
<script> $('input[placeholder], textarea[placeholder]').placeholder(); </script>
before this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
resulting in these
Uncaught ReferenceError: jQuery is not defined
Uncaught ReferenceError: $ is not defined
forgot about this one
GET http://freshbeer.lv/img/loading.gif 404 (Not Found)
These are all in the dev tools console. In chrome in this case, but other browsers have one too.

Categories

Resources