I've posted here before but can't find my account so this is my new first post.
I'm attempting to use a js plugin called "blueberry slider" with a responsive js menu called "Menumaker" and something is conflicting, can't get the slider to show. I really don't know what I'm doing with JS yet, hoping someone can help. In Chrome, element inspection, it's saying "undefined is not a function". I haven't modified anything of the plugins.
I think your problem is probably that you're loading a version of jquery, adding a plugin to it, and then loading a new version of jquery and attempting to add a plugin to that, too. Pick a single version of jquery to include. You're including three:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
at the top,
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
just above your blueberry script, and
<script src="js/jquery-1.8.3.min.js"></script>
at the bottom just above your menumaker script.
The latest version of jQuery loads and overwrites your blueberry script's modified version of jQuery.
I suggest you just get rid of the last two and use the first version.
the function which you are calling and function present in your plugin library doesn't match , which is the reason it doesn't find any function named "undefined" in that library. Try checking the function name in it's documentation.
Related
I am currently writing a little JS something, and as it might get re-used in my company I want to do it right and write is as a jQuery plugin (jQuery is definitely needed for ease, so I have decided upon relying on it).
Now, I am a relatively experienced developer regarding jQuery, but I have a problem that is probably incredibly simple to solve and still I do not know where I am going wrong.
I included the jQuery file like normal from the CDN, then my plugin file and last of all the js file that I use to test the plugin.
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/jquery.tsnowglobe.js"></script>
<script type="text/javascript" src="js/main.js"></script>
Then I try to define the plugin in the jquery.tsnowglobe.js file.
(function($) {
$.fn.snowglobe = function(options) {
return this.each(function() {
console.log("Test!");
};
};
}(jQuery));
This is obviously only to test wether everything is working or not.
Well, the problem is: I don't get any output when I use my plugin.
I have defined a canvas in the HTML part (I also tried multiple, didn't work):
<canvas id="snowglobe"></canvas>
And then I consecutively try to use the snowglobe-function on it in the main.js-file (which is loaded last):
$("canvas").snowglobe();
Well, the problem is, I get absolutely no output. Now, I think I might have identified the problem: inside my function definition, this is not an array. What really irritates me that all tutorials use the same code as a start, so as far as I see it should be working, and even if I wrap this in an array I cannot access any DOM-element-properties inside the loop, as this in that case does not refer to any DOM element itself.
Thanks in advance for helping me! I am really not sure what I could do to solve this.
I am creating a plugin which uses the jQuery fullCalender.
The code appears to all be working fine however when the page fully loads and my shortcode populates its appropriate html and javascript I get the following error:
So from this I can gather that jQuery resolves ok - but somehow the calendar does not? Can somebody please help me! It may be because I am using OptimizePress which might be including its own copy of jQuery - and my plugin is also including a copy of jQuery and the calendar. But I dont know how to make sure i reference my own jQuery or make this work.
Thanks!
The answer was to use wp_register_script and wp_enqueue_script to add the script to my generated document
I´m using jQuery UI datePicker and jQuery UI toolTip and they work fine.
Then I also want to use the tagsManager from Bootstrap, but when I include the "bootstrap-tagmanager.js" and the "bootstrap.min.js" I start getting "TypeError: e is null" messages and neither the datePicker or the toolTip works.
(TypeError happens when click on the date-field for the datePicker).
Anyone has a work-around for this?
Are you including the javascript files in this order?
jquery.js
bootstrap.min.js
bootstrap-tagsmanager.js
look at: Does the ORDER of javascript files matter, when they are all combined into one file?
if you have conflit between jQuery file, use $.noConflict(); before your $(document).ready();
Make sure that your lib call is good. Call first the jQuery and add bootstrap lib after.
Maybe, jQuery.noConflict() will help you.
http://api.jquery.com/jQuery.noConflict/#jQuery-noConflict1
I have a weird problem in jQuery. The problem is that I can smoothly use $('#container').html(content) to replace the page content but to specific page. It is not working all around. Gives 'TypeError' message in console. Is there any probability that using SlickGrid can cause such error. Because error is thrown only in that pages where I have used SlickGrid.
Any suggestion would be highly appreciated.
It's hard to tell what's going on with your page, but my guess is that you may have a conflict with the $ between jQuery and SlickGrid. Look at the noConflict function in jQuery - it may help you out.
Call $.noConflict(); before SlickGrid's javascript <script> tag is added, and then refer to jQuery functions by using jQuery(selector) instead of $(selector).
Hope this helps!
This has got me baffled. I'm sure the solution is obvious, but I can't figure it out for the life of me.
All of the files are getting included correctly, and in the right order. I tried just removing the validation completely, just to see what would happen, and then started getting:
jQuery.easing[jQuery.easing.def] is not a function
...but only on this one page.
Can anyone offer any insights?
The page is at http://www.hotspring.co.nz/request-info/
You're loading two different versions of jQuery:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!--...-->
<script type='text/javascript' src='http://www.hotspring.co.nz/wp-includes/js/jquery/jquery.js?ver=1.4.4'></script>
One of them ends up as $() and doesn't have validate installed, the other ends up as jQuery() and does have validate installed; in particular, $() ends up as jQuery 1.5.2 and jQuery() ends up as 1.4.4. Open up a JavaScript console on your site and look at these:
$.fn.jquery // This will say 1.5.2
jQuery.fn.jquery // This will say 1.4.4
The solution is to just include one jQuery library.
Are you sure nothing else is competing for the "$" object? A lot of toolkits use that and that can cause a lot of issues with jQuery and its plugins. Experiment with this and see if that helps you.