We Keep Coding

.menu() is not a function; jQuery upgrade

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/

Bootstrap modal: is not a function

I have a modal in my page. When I try to call it when the windows load, it prints an error to the console that says :
$(...).modal is not a function
This is my Modal HTML :
<div class="modal fade" id="prizePopup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
This Modal title
</h4>
</div>
<div class="modal-body">
Add some text here
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">
Submit changes
</button>
</div>
</div>
</div>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
And this is my JavaScript to run it with when a window is loaded :
<script type="text/javascript">
$(window).load(function() {
$('#prizePopup').modal('show');
});
</script>
How can I fix this problem?

You have an issue in scripts order. Load them in this order:
<!-- jQuery -->
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- BS JavaScript -->
<script type="text/javascript" src="js/bootstrap.js"></script>
<!-- Have fun using Bootstrap JS -->
<script type="text/javascript">
$(window).load(function() {
$('#prizePopup').modal('show');
});
</script>
Why this? Because Bootstrap JS depends on jQuery:
Plugin dependencies
Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included before the plugin files).

This warning may also be shown if jQuery is declared more than once in your code. The second jQuery declaration prevents bootstrap.js from working correctly.
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
...
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

Causes for TypeError: $(…).modal is not a function:
Scripts are loaded in the wrong order.
Multiple jQuery instances
Solutions:
In case, if a script attempt to access an element that hasn't been
reached yet then you will get an error. Bootstrap depends on jQuery,
so jQuery must be referenced first. So, you must be called the
jquery.min.js and then bootstrap.min.js and further the bootstrap
Modal error is actually the result of you not including bootstrap's javascript before
calling the modal function. Modal is defined in
bootstrap.js and not in jQuery. So the script should be included in this manner
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
In case if there are multiple instances of jQuery, the second jQuery
declaration prevents bootstrap.js from working correctly. so make use of
jQuery.noConflict(); before calling the modal popup
jQuery.noConflict();
$('#prizePopup').modal('show');
jQuery event aliases like .load, .unload or .error deprecated since jQuery 1.8.
$(window).on('load', function(){
$('#prizePopup').modal('show');
});
OR try opening the modal popup directly
$('#prizePopup').on('shown.bs.modal', function () {
...
});

jQuery should be the first:
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>

The problem is due to having jQuery instances more than one time. Take care if you are using many files with multiples instance of jQuery. Just leave 1 instance of jQuery and your code will work.
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

change the order of the script
Because bootstrap is a jquery plugin so it require Jquery to execute

Use:
jQuery.noConflict();
$('#prizePopup').modal('toggle');

Changing import statement worked. From
import * as $ from 'jquery';
to:
declare var $ : any;

Struggled to solve this one, checked the load order and if jQuery was included twice via bundling, but that didn't seem to be the cause.
Finally fixed it by making the following change:
(before):
$('#myModal').modal('hide');
(after):
window.$('#myModal').modal('hide');
Found the answer here: https://github.com/ColorlibHQ/AdminLTE/issues/685

I meet this error when integrate modal bootstrap in angular.
This is my solution to solve this issue.
I share for whom concern.
First step you need install jquery and bootstrap by npm command.
Second you need add declare var $ : any; in component
And use can use $('#myModal').modal('hide'); on onSave() method
Demo https://stackblitz.com/edit/angular-model-bootstrap-close?file=src/app/app.component.ts

Run
npm i #types/jquery
npm install -D #types/bootstrap
in the project to add the jquery types in your Angular Project. After that include
import * as $ from "jquery";
import * as bootstrap from "bootstrap";
in your app.module.ts
Add
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
in your index.html just before the body closing tag.
And if you are running Angular 2-7 include "jquery" in the types field of tsconfig.app.json file.
This will remove all error of 'modal' and '$' in your Angular project.

I'm a bit late to the party, however there's an important note:
Your scripts might be in the right order but watch out for any asyncs in your script tag (like this)
<script type="text/javascript" src="js/bootstrap.js" async></script>
This might be causing the issue. Especially if you have this async set only for Production environments this can get really frustrating to reason about.

I added a modal dialog in jsp and tried to open it with javascript in jsx and hit the same error: "...modal is not a function"
In my case, simply by adding the missing import to the jsx solved the problem.
`import "./../bower/bootstrap/js/modal.js"; // or import ".../bootstrap.min.js"`

The problem happened to me just in production just because I imported jquery with HTTP and not HTTPS (and production is HTTPS)

Tokenfield (tag input) autocomplete in Bootstrap 3 doesn't work

I am trying to implement a simple tags input in Bootstrap 3 with Tokenfield, but I've stacked somewhere.
HTML code:
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/css/bootstrap-tokenfield.min.css" rel="stylesheet">
<div class="form-group">
<label for="myinput">Κατηγορία</label>
<input id="myinput" type="text" class="form-control">
</div>
Javascript:
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/bootstrap-tokenfield.min.js"></script>
<script type="text/javascript">
$('#myinput').tokenfield({
autocomplete: {
source: ['red','blue','green','yellow','violet','brown','purple','black','white'],
delay: 100
},
showAutocompleteOnFocus: true
})
</script>
Error:
It doesn't show the autocomplete. I don't have any error in the console. I can add tags manually.

From what I see this it's the same problem I had a few days ago.
What you need as well is jquery-ui with autocomplete.js.
http://jqueryui.com/download/ generate your own jquery-ui.min.js including autocomplete.js and it should work.

You do NOT necessarily need jQuery UI, nor Typeahead Js. If you are looking for
a simple tags input
without autocomplete feature, just initialize like this
$('#myinput').tokenfield();
Hope it helped.

include jQuery UI (with autocomplete)
if you use "Bootstrap modal" or "jQuery-UI dialog" take a little fix:
.ui-autocomplete { z-index: 5000; }

The Tokenfield works either with Jquery Ui autocomplete or with Typeahead Js. You must use one of them but from the code above you are not using any of them so of course nothing will happen.
From the code above, you are trying to implement it with Jquery Ui autocomplete so you will need to link to the css and javascript of jquery Ui autocomplete
Read More about Bootstrap Tokenfield here

I know this answer came pretty late, but the autocomplete property for setting the lookup data is not source but lookup.
Tokenfield's example at http://sliptree.github.io/bootstrap-tokenfield/#options is not updated.
You can see that the right property is lookup from https://github.com/devbridge/jQuery-Autocomplete

It will work if you include both jquery-ui js and css.
Go to this link jquery-ui
Download 1.12.0-rc.2 version of jquery
Include both jquery-ui.css and jquery-us.js in your html
It worked for me.

Uncaught TypeError: undefined is not a function while using jQuery UI

I haven't used jQuery before, and I wanted to use DateTimePicker plugin on my web page.
I downloaded the plugin file and placed them in the same directory as the HTML files.
I directly applied the code at How to use it? in http://xdsoft.net/jqplugins/datetimepicker/.
It threw the following error.
Uncaught TypeError: undefined is not a function pixelcrawler:61 (anonymous function)
My code follows.
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="file:///jquery.datetimepicker.css"/ >
<script src="file:///jquery.datetimepicker.js"></script>
<script>
jQuery('#datetimepicker').datetimepicker();
</script>
<div class="container">
<div class="text-center">
<div class="page-header">
<h1>${conf['title']} <small>${conf['description']}</small></h1>
</div>
</div>
<div class="text">
<input id="datetimepicker" type="text" >
.
.
.
.
.
I could not figure out what the problem was. I have tried many other seemingly likely options, but it just did not work either.
(The ${} tags are used for the Mako template language. I am using Cherrypy.)
UPDATE:
I figured out the source of the problem.
It's from jQuery('#datetimepicker').datetimepicker();.
When tested, the datetimepicker() function was undefined. Maybe the way I imported the library was wrong?

jQuery(document).ready(function(){
jQuery('#datetimepicker').datepicker();
})
I don't know your file-structure. I never include local files like this as I use relative URLs from the start rather than having to change everytime I'm ready to use the code, but it's likely one of the files isn't being loaded in. I've included the standard datepicker below using Google CDN's jQuery UI. Does your console log any resources not found?
I think your jQuery is loaded OK, because it's not telling you jQuery is not defined so it's one of your files.
BTW, PHP gets the home URL:
$home="http://" . $_SERVER['HTTP_HOST'].'/';
Demo code datepicker, jQuery UI:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#datetimepicker').datepicker();
})
</script>
<input id="datetimepicker" type="text">

This is about the HTML parse mechanism.
The HTML parser will parse the HTML content from top to bottom. In your script logic,
jQuery('#datetimepicker')
will return an empty instance because the element has not loaded yet.
You can use
$(function(){ your code here });
or
$(document).ready(function(){ your code here });
to parse HTML element firstly, and then do your own script logics.

use jQuery.noConflict()
var j = jQuery.noConflict();
j(document).ready(function(){
j('#datetimepicker').datepicker();
})

For my situation, it was a naming conflict problem. Adding $J solves it.
//Old code:
function () {
var extractionDialog;
extractionDialog = $j("#extractWindowDialog").dialog({
autoOpen: false,
appendTo: "form",
height: "100",
width: "250",
modal: true
});
$("extractBomInfoBtn").button().on("click", function () {
extractionDialog.dialog("open");
}
And the following is new code.
$j(function () {
var extractionDialog;
extractionDialog = $j("#extractWindowDialog").dialog({
autoOpen: false,
appendTo: "form",
height: "100",
width: "250",
modal: true
});
$j("extractBomInfoBtn").button().on("click", function () {
extractionDialog.dialog("open");
});
});
Hope it could help someone.

Usually when you get this problem, it happens because a script is trying to reference an element that doesn't exist yet while the page is loading.
As richie mentioned: "The HTML parser will parse the HTML content from top to bottom..."
So you can add your JavaScript references to the bottom of the HTML file. This will not only improve performance; it will also ensure that all elements referenced in your script files have already been loaded by the HTML parser.
So you could have something like this:
<html>
<head>
<!-- Style sheet references and CSS definitions -->
</head>
<body>
<!-- HTML markup and other page content -->
<!-- JavaScript references. You could include jQuery here as well and do all your scripting here. -->
</body>
</html>

You may see if you are not loading jQuery twice somehow. Especially after your plugin JavaScript file loaded.
I has the same error and found that one of my external PHP files was loading jQuery again.

The issue because of not loading jquery ui library.
https://code.jquery.com/ui/1.11.4/jquery-ui.js - CDN source file
Call above path in your file.

And if you have this problem in slider or slideshow you must use jquery.easing.1.3:
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>

I had trouble getting selectable to work with ASP.NET. It turns out I wasn't properly including everything, but this gentleman made it foolproof: Three steps to use jQuery UI in ASP.NET MVC 5.

I don't think jQuery itself includes datetimepicker. You must use jQuery UI instead (src="jquery.ui").

Fancybox won't work

Can't seem to get Fancybox to work - it just links to the 1st pic. I get the error: uncaught typeerror object # an object has no method 'fancybox'.
HTML
<a class="fancybox" data-thumbnail="http://staging.timeoutchicago.com/sites/timeoutchicago.com/files/imagecache/timeout_slideshow_player_thumbnail/P1010923.JPG" href="http://staging.timeoutchicago.com/sites/timeoutchicago.com/files/imagecache/timeout_492x330/P1010923.JPG"><img alt="" src="http://staging.timeoutchicago.com/sites/timeoutchicago.com/files/toclogo.jpg"></a>
<br />
<a class="fancybox" data-thumbnail="http://fancyapps.com/fancybox/demo/2_s.jpg" href="http://fancyapps.com/fancybox/demo/2_b.jpg"></a>​
Javascript
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").attr('rel', 'gallery').fancybox({
helpers: {
thumbs: {
width: 40,
height: 40,
source: function(current) {
return $(current.element).data('thumbnail');
}
}
}
});
});
</script>
Header
<!-- Add jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.3" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.3"></script>
It does seem to be pulling in the external files according to the Source in Chrome's Developer Tools.
Thx

Hmmm. It looks like jquery is loaded twice. Once with
<!-- Add jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
and the other (harder to find)
http://staging.timeoutchicago.com/sites/timeoutchicago.com/files/advagg_js/js_13ec2e29dba08b369ccfdde54d836ec0_8.js
It looks like you're using drupal and with a bit of googling, it sounds like it injects a version of jquery for you (jQuery JavaScript Library v1.3.2)
The reason that error is occuring is the conflict between the two libraries. Try following this update
http://drupal.org/project/jquery_update

You're pulling in the two versions of jQuery.
When you execute jQuery(".fancybox").jquery from the console, you get 1.3.2. Undoubtedly, this is not compatible with fancybox.
jQuery 1.8.2 is loaded via the Google CDN with your explicit script tag request.
jQuery 1.3.2 is loaded as part of http://staging.timeoutchicago.com/sites/timeoutchicago.com/files/advagg_js/js_13ec2e29dba08b369ccfdde54d836ec0_8.js, which comes from Drupal injecting this library for its own purposes.
For future reference, I was able to locate this file by using the Chrome Developer Tools, sorting by file size (largest first) and then looking at the JS files... found it pretty quickly after that.

I was having this same problem and I resolved it by changing the double quotes in the line:
$(".fancybox").fancybox();
To single quotes:
$('.fancybox').fancybox();
Sort of a 'gotcha' since the fancyBox site has double quotes.

if anything does not work:
parent.window.document.getElementById("fancybox-wrap").style.display = 'none';
This hiding fancybox.