I have a problem creating a bounce effect on an image with jQuery effect() function.
Actually is use this code (code after calling the jQuery library):
$(document).ready(function() {
$('#arrow-disclaimer').bind('mouseenter', function(){
$(this).effect('bounce',500);
});
});
//Here there isn't the jQuery library, but in the page is included before jqueryUI
<link rel="stylesheet" type="text/css" href="css/style-disclaimer.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/i18n/jquery-ui-i18n.js"></script>
<a href="#disclaimer-p">
<img src="images/arrow483.png" id="arrow-disclaimer" />
</a>
Could someone tell me why i get this error?
Uncaught TypeError: $(...).effect is not a function
You need to load jQuery to use jQuery-ui or any other dependant plugin
You're using jquery-ui-i18n which is used for internationalization only. You need to include jquery-ui main library and if you want to use i18n, include it after jquery-ui.
bind is deprecated in jQuery version 1.7, use on.
$(document).ready(function() {
$('#arrow-disclaimer').on('mouseenter', function() {
$(this).effect('bounce', 500);
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<a href="#disclaimer-p">
<img src="images/arrow483.png" id="arrow-disclaimer" />
</a>
Related
I am having an issue getting a dialog to work as basic functionality. Here is my jQuery source imports:
<script type="text/javascript" src="scripts/jquery-1.9.1.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.11.1.js"></script>
<script type="text/javascript" src="scripts/json.debug.js"></script>
Html:
<button id="opener">open the dialog</button>
<div id="dialog1" title="Dialog Title" hidden="hidden">I'm a dialog</div>
<script type="text/javascript">
$("#opener").click(function() {
$("#dialog1").dialog('open');
});
</script>
From the posts around seems like as a library import issue. I downloaded the JQuery UI Core, Widget, Mouse and Position dependencies.
Any Ideas?
Be sure to insert full version of jQuery UI. Also you should init the dialog first:
$(function () {
$( "#dialog1" ).dialog({
autoOpen: false
});
$("#opener").click(function() {
$("#dialog1").dialog('open');
});
});
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
<button id="opener">open the dialog</button>
<div id="dialog1" title="Dialog Title" hidden="hidden">I'm a dialog</div>
if 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.
Some times it could be issue with older version (or not stable version) of JQuery files
Solution use $.noConflict();
<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
$("#opener").click(function() {
$("#dialog1").dialog('open');
});
});
// Code that uses other library's $ can follow here.
</script>
If you comment out the following code from the _Layout.cshtml page, the modal popup will start working:
</footer>
#*#Scripts.Render("~/bundles/jquery")*#
#RenderSection("scripts", required: false)
</body>
</html>
Change jQueryUI to version 1.11.4 and make sure jQuery is not added twice.
I just experienced this with the line:
$('<div id="editor" />').dialogelfinder({
I got the error "dialogelfinder is not a function" because another component was inserting a call to load an older version of JQuery (1.7.2) after the newer version was loaded.
As soon as I commented out the second load, the error went away.
Here are the complete list of scripts required to get rid of this problem.
(Make sure the file exists at the given file path)
<script src="#Url.Content("~/Scripts/jquery-1.8.2.js")" type="text/javascript">
</script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.24.js")" type="text/javascript">
</script>
<script src="#Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript">
</script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript">
</script>
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript">
</script>
and also include the below css link in _Layout.cshtml for a stylish popup.
<link rel="stylesheet" type="text/css" href="../../Content/themes/base/jquery-ui.css" />
I had a similar problem and in my case, the issue was different (I am using Django templates).
The order of JS was incorrect (I know that's the first thing you check but I was almost sure that that was not the case, but it was). The js calling the dialog was called before jqueryUI library was called.
I am using Django, so was inheriting a template and using {{super.block}} to inherit code from the block as well to the template. I had to move {{super.block}} at the end of the block which solved the issue. The js calling the dialog was declared in the Media class in Django's admin.py. I spent more than an hour to figure it out. Hope this helps someone.
I don't know if it's the same error as many got here:
jQuery is not a function erreor
how to fix : Uncaught TypeError: $(...).summernote is not a function #2087
jquery: Uncaught TypeError: $(…).error is not a function
But I'm stuck with it like a gum under my shoe.
Here's the actual error on my Chrome's Developer Tools.
I just wish to update Summernote from an older version which has this # sign error.
Cant write # using AltGr + # combination or Ctrl + Alt +#Combination #1406
But then, with the newer version from 0.8.0, it seems that the $(...).code() function is no longer available. Any knows the change I should bring to make it work?
simply works in my case when I added defer
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js" defer></script>
My jquery version is 3.3.1
From documentation:
destroy and code
After v0.7.0, direct jquery methods, destroy and code were removed for
avoiding conflict with other jquery libraries. You can call this
methods with summernote api.
The direct jQuery code() function has been deprecated and you now have to use the summernote() function:
$('#summernote').summernote();
You'll need to call the function differently as stated by their API Docs https://summernote.org/getting-started/#basic-api
$('#summernote').summernote('code');
For me, I wanted to use summer note with bootstrap4, I copied the below code from the official documentation but it didn't work, I realized afterwards that I was embedding a newer bootstrap version at the beginning of my page (I was reaching out to some bootstrap files located at the assets), I removed that line and everything went just fine:
<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote-bs4.min.js"></script>
https://stackoverflow.com/a/62644428/10121188
1. Steps
I created this post because the suggestions in other posts didn't work in Summernote v0.8.18.
As stated in the Summernote documentation, the following container is defined in the area where the editor will be rendered:
<div id="summernote">Test Application</div>
<button id="print">Print</button>
The following script is written to load the summernote editor when the web page is loaded:
$(document).ready(function () {
$('#summernote').summernote({ height: 95, codemirror: { theme: 'monakai' }});
});
The method call used to get the Summetnote editor content has been changed:
$('#print').click(function() {
/* Get the plain text typed into the editor */
var plainTextContent = $($("#summernote").summernote("code")).text();
console.log(plainTextContent);
/* Get the formatted text written to the editor */
var formattedTextContent = $("#summernote").summernote("code");
console.log(formattedTextContent );
});
2. Demo
$(document).ready(function () {
$('#summernote').summernote({ height: 95, codemirror: { theme: 'monakai' } });
});
$('#print').click(function() {
/* Get the plain text typed into the editor */
var plainTextContent = $($("#summernote").summernote("code")).text();
console.log(plainTextContent);
/* Get the formatted text written to the editor */
var formattedTextContent = $("#summernote").summernote("code");
console.log(formattedTextContent );
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote.min.js"></script>
<div id="summernote">
Test Application
</div>
<button id="print">Print</button>
I am trying to create a datepicker that allows users to select multiple dates. These are the javascript and stylesheet references I am using:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://multidatespickr.sourceforge.net/jquery-ui.multidatespicker.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
This is the function I am calling once the document is ready:
try{
$("#recievedInHouseDate").multiDatesPicker();
}catch(e){
alert(e)
};
And the alert I get is: TypeError: $(...).multiDatesPicker is not a function
Any idea why this wouldn't work. I can get the regular date picker working fine if I only want to select a single date.
Why do you import jquery-ui twice?
here:
script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js">/script
and here:
script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js">/script
I think you should remove one of them. At least in my case that caused a similar to yours problem with Datepicker.
Try this line to avoid any conflict while loading jQuery libraries
jQuery.noConflict();
I am migrating a menu widget from jQuery 1.6.4 to a newer version of jQuery , 1.11.1
$(document).ready(function () {
$('#takeMeToLink').menu({
content: $('#globalContent1').html(),
flyOut: false
});
});
Markup
<a id="takeMeToLink" href="#" style="color:black">
Take Me To
<span style="height:3px;width:15px;position:relative;display:inline-block;overflow:hidden;" class="s4-clust ms-viewselector-arrow">
<img src="/_layouts/15/images/fgimg.png" alt="Open Menu" style="border-width:0px;position:absolute;left:-0px !important;top:-491px !important;" /></span>
</a>
When I replace the .js file with the new one, it throws an exception
Uncaught TypeError: $(...).menu is not a function
Is there a new function available?
.menu() is a Jquery UI "widget", which means you need to include JQuery ui.
Here's the script and stylesheet on google's CDN that you should include as well as your JQuery script(feel free to download it if that's easier):
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
Here's the documentation: https://jqueryui.com/menu/
Here's an example of how to use it: http://jsfiddle.net/FwBNE/1/
This question already has answers here:
JQuery Slideshow and MooTools Conflict
(2 answers)
Closed 9 years ago.
One is an audio player for Mp3s, and the other is a Lightbox I'm trying to display YouTube videos in.
Here's the head:
<script type="text/javascript" src="videobox/js/mootools.js"></script>
<script type="text/javascript" src="videobox/js/swfobject.js"></script>
<script type="text/javascript" src="videobox/js/videobox.js"></script>
<link rel="stylesheet" href="videobox/css/videobox.css" type="text/css" media="screen" />
<link rel="stylesheet" href="libs/css/styles.css" />
<script src="libs/jquery/jquery.js"></script>
<script src="src/jquery.ubaplayer.js"></script>
<script>
$(function(){
$("#ubaPlayer").ubaPlayer({
codecs: [{name:"MP3", codec: 'audio/mpeg;'}]
});
});
</script>
I've noticed that the lightbox works when I remove "libs/jquery/jquery.js" but then my audio player stops working.
I'm not very skilled when it comes to Javascript/JQuery, so the answer might be obvious.
UPDATE:
This fixed the problem!
<script type="text/javascript" src="videobox/js/mootools.js"></script>
<script type="text/javascript" src="videobox/js/swfobject.js"></script>
<script type="text/javascript" src="videobox/js/videobox.js"></script>
<link rel="stylesheet" href="videobox/css/videobox.css" type="text/css" media="screen" />
<link rel="stylesheet" href="libs/css/styles.css" />
<script src="libs/jquery/jquery.js"></script>
<script src="src/jquery.ubaplayer.js"></script>
<script>
jQuery.noConflict();
jQuery(function(){
jQuery("#ubaPlayer").ubaPlayer({
codecs: [{name:"MP3", codec: 'audio/mpeg;'}]
});
});
</script>
Both MooTools and jQuery uses the $ variable, that means you can't use them both. 2 solutions:
Search for jQuery/MooTools implementations of both features, I'm sure you will find those.
Use jQuery.noConflict to let MooTools use the $ variable.
Use the jQuery variable instead of $ and include MooTools after jQuery. If you want to use the $ shortcut for jQuery, wrap your jQuery code in a domready event with the $ as parameter of the callback:
jQuery(function($) {
// ... jQuery code ($ has a copy of `jQuery` now)
});
// ... MooTools code ($ has a reference to the `MooTools.id` method now)
You can isolate your jQuery code inside of an autoexecuting function passing the jQuery object as argument. So that $ means inside of the scope jQuery but outside it can be something else.
(function ($) {
// your jQuery code here
}(jQuery));
It is very common to pass also the object window to avoid resolving the global scope, and receive window and undefined. Since you only pass 2 arguments, the 3rd must be undefined, which improves compressibility of the code and makes more stable (undefined can be unfortunately redefined)
(function ($, window, undefined) {
// your jQuery code here
}(jQuery, window));