I have a function on page load which initialize the slider on the page. The Problem is that on my development site every thing works fine as it should but on live site it breaks and give me following error in console.
Uncaught TypeError: $(...).carouFredSel is not a function
I also tried to call this function on document ready but changing the slider through thumbnails doesn't work and if clicking on enlarge link it give me another error
Uncaught TypeError: $(...).find(...).ensureLoad is not a function
here .ensureLoad is extended function which ensure the object loaded before it proceed further which is called like this
$.extend({
ensureLoad: function(handler) {
return this.each(function() {
if(this.complete) {
handler.call(this);
} else {
$(this).load(handler);
}
});
}
});
Following is the link to development site where it works fine [Link]
and here is the link to live site [link]
Thanks in advance.
The problem is you are having 2 versions of jQuery included in your page, http://www.mobler.dk/Files/Templates/Designs/Mobler/scripts/jquery-1.12.0.js and http://www.mobler.dk/Files/Templates/Designs/Mobler/scripts/libs/jquery-1.10.2.min.js.
Since 1.12 is included first and then the plugins, the plugins are loaded to that version of jQuery, then the 1.10 is loaded and the validation plugin. Now jQuery variable refers to the 1.10 version of jQuery which does not have any of the plugins which was loaded to 1.12.
So the solution is to remove the 1.10 jQuery from the page, or use noConflict() properly after including 1.10 so that by default the application will use 1.12.
Note: It looks like the second jQuery file is loaded to the element #popupform via the page http://www.mobler.dk/m%C3%B8bl%C3%A9r/kontaktpopup
Related
I'm attempting to use Mottie's Tablesorter with the Column Selector widget using the example Bootstrap popover code provided in the documentation. However, I'm getting a Javascript exception thrown inside the columnSelector widget library. What am I doing wrong? Or is there perhaps an actual bug in one of the Tablesorter libraries in use?
Here is a link to a JS Fiddle which demonstrates the error:
https://jsfiddle.net/qmnev5wr/5/
You'll have to view the JS console in e.g. a browser's dev tools to see the error message live, but here's what I get:
jQuery.Deferred exception: o is undefined attachTo#https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.2/js/widgets/widget-columnSelector.min.js:3:8917
Here's an updated demo which fixed the following issues:
Added missing popper.js (Bootstrap requires it for popups)
Loaded bootstrap.js after popper.js
Added bootstrap.css
Added CSS copied from the tablesorter example page
Removed $("#claim-table").tablesorter(...) because it was initializing the table without the widgets - it's already being initialized inside the document ready function
I am using jQuery 3.x and Infinite Scroll 3.x (https://infinite-scroll.com) in my online shop. The online shop software I am using is called Shopify. I like it so far, but I have a big issue with my javascripts I am using. I want to use the Infinite Scroll, but all I got is a
jQuery.Deferred exception: $(...).infiniteScroll is not a function
TypeError: $(...).infiniteScroll is not a function
All I did is this the code scnippet below. When I am trying to paste it in my online shop page, I got the error above, but when I create a local index.html file and try the exact same code snippet, I got no error.
I checked already that both scripts are loaded, I even thought it might be a timeout problem, so I did a timeout just before I run the .infinteScroll method, but still, the error above.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://unpkg.com/infinite-scroll#3/dist/infinite-scroll.pkgd.min.js"></script>
<script>
$(document).ready(function(){
$('.container').infiniteScroll({
// options
path: '.pagination__next',
append: '.post',
history: false,
});
});
</script>
I can see that you have loaded jQuery more than once in your website. Which may create conflict. Clean it up and load jQuery only once in your theme. Load all jQuery plugins after that.
I am attempting to utilize apprise link on my website. I have a webpage on which I include the apprise javascript and css files. I also include my own javascript file containing the following function
function cant_find(data)
{
Apprise('Modal test');
}
I am utilizing jquery $.load() to load another page into a division on the page.
This works perfectly.
Within the callback of the load, I call my function
$('#div').load(base_url+'link',{},function(data){
cant_find();
});
This however does not work and gives the error:
$Apprise is null
Does anyone have any suggestions as to why?
Thanks
What I'm trying to do is to play a video inside ColorBox lightbox.
My HTML code is as follows. When I click on the link it should play the video.
Video
What I do with Colorbox is as below. Load the video into lightbox.
jQuery(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
It gives me the below error.
Error: cboxElement missing settings object
ScreenShot
What should I do to fix this ? Given that there are no js errors except above one. jQuery is included correctly.
I had the same problem. I'm having a hard time trying to understand why exactly, but somewhere the colorbox is running in to a conflict because it also uses the name 'iframe' internally. Somehow this is causing a conflict when the classname 'iframe' is used as the class by which the function is called.
In my case changing
jQuery(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
to:
jQuery(".photo_link").colorbox({iframe:true, width:"80%", height:"80%"});
worked.
Well this worked for me. Even though everything was in place and all the code was generated in the backend, for some reason colorbox wasn't picking up the links properly because on my page the link was inside a div that shows/hide on mouseover. Anyway, the way it worked for me was this one:
$(".iframe").live('click', function(e){
$(this).colorbox({href: $(this).attr('href'), iframe:true, innerWidth:640, innerHeight:480, open:true});
e.preventDefault();
return false;
});
In this way you rebind the actions to the element and then forces colorbox to open the link.
I hope it works for you and it isn't too late.
PS: If you're using jQuery 1.9+ you must use on instead of live
I ran into this same error and solved it by removing a duplicate call to colorbox. I had included both the library as well as my colorbox function in two separate include files. I figured it must be a duplicate because I had to close each colorbox window twice after it launched.
Check your code and make sure that the jquery.colorbox-min.js is only included once, as well as your function that calls it. In my case, my function was simple:
$(document).ready(function(){
$("a.single_image").colorbox();
$("a.link_preview").colorbox({iframe:true, width:"80%", height:"90%"});
});
After removing the duplicate calls, the problem went away. Hope it helps!
I experienced this error Error: cboxElement missing settings object when making a second jQuery on document ready function call after the initial on document ready function call that holds the colorbox parameters.
My situation:
On my pages I use and call just one external .js file that holds all
my code.
Inside the external .js file I have the colorbox parameters within a
jQuery on document ready function.
On the troubled page (page with cboxElement missing settings object
error), immediately following the external .js file I had some
jQuery code that used the on document ready function: $(function(){});
My problem:
This second on document ready call caused and triggered the error Error: cboxElement missing settings object for me.
My solution:
The fix was as easy as changing the troubled pages code from using jQuery's on document ready function to using Javascript's native self-executing anonymous function.
(function(){
})();
Sure enough the error Error: cboxElement missing settings object went away and everything works perfect!
i have jquery plugin jquery-1.4.2.min.js. while loading this file the following error is showing. but if i use it in another screen or another program it is loading successfully... i am unable to find the reason. Can any one help me please.
Thank you
Mihir
Make sure you are not referencing (linking) jQuery more than once in the page and that the plug-in is referenced after the jQuery reference. What sometimes happens (especially with auto script management) is jQuery is loaded, the plug-in is loaded in the jQuery instance, then jQuery is loaded again, which effectively resets any plug ins.