Bootstrap modal: is not a function - javascript

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)

Related

Uncaught ReferenceError: $ is not defined when assign single or multiple values to select2 [duplicate]

How come this code throws an
Uncaught ReferenceError: $ is not defined
when it was OK before?
$(document).ready(function() {
$('#tabs > ul').tabs({ fx: { opacity: 'toggle' } });
$('#featuredvid > ul').tabs();
});
Results in tabs don't close anymore.
jQuery is referenced in the header:
<script language="JavaScript" type="text/javascript" src="<?php echo get_option('siteurl') ?>/js/sprinkle.js"></script>
<script language="JavaScript" type="text/javascript" src="<?php echo get_option('siteurl') ?>/js/jquery-1.2.6.min.js"></script>
<script language="JavaScript" type="text/javascript" src="<?php echo get_option('siteurl') ?>/js/jquery-ui-personalized-1.5.2.packed.js"></script>

You should put the references to the jquery scripts first.
<script language="JavaScript" type="text/javascript" src="/js/jquery-1.2.6.min.js"></script>
<script language="JavaScript" type="text/javascript" src="/js/jquery-ui-personalized-1.5.2.packed.js"></script>
<script language="JavaScript" type="text/javascript" src="/js/sprinkle.js"></script>

You are calling the ready function before the jQuery JavaScript is included. Reference jQuery first.

This is what solved it for me. Originally I went to Google and copied and pasted their suggested snippet for jQuery on their CDN page:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
The snippet does not include the HTTP: or HTTPS: in the src attribute but my browser, FireFox, needed it so I changed it to:
edit: this worked for me with Google Chrome as well
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Then it worked.

If your custom script is loaded before the jQuery plugin is loaded to the browser then this type of problem may occur. So, always keep your own JavaScript or jQuery code after calling the jQuery plugin so the solution for this is :
First add the link to the jQuery file hosted at GoogleApis or a local jQuery file that you will download from http://jquery.com/download/ and host on your server:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
or any plugin for jQuery. Then put your custom script file link or code:
<script src="js/custom.js" type="text/javascript"></script>

In my case I was putting my .js file before the jQuery script link, putting the .js file after jQuery script link solved my issue.
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="exponential.js"></script>

Add the library before you start the script.You can add any of these following CDN to start it.
Google:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Microsoft
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
Jquery
If you want any other Jquery cdn version check this link.
After this:
<script type="text/javascript">
$(function(){
//your stuff
});
or
$(document).ready(function(){
//your stuff
});
</script>
Wordpress:
<script type="text/javascript">
var $ = jQuery;
jQuery(document).ready(function($){
//your stuff
});
</script>

Okay, my problem was different - it was Document Security model in Chrome.
Looking at the answers here, it was obvious that I was somehow not loading my jquery files before calling the $(document).ready() etc. functions. However, they were all in the correct positions.
In my case, this was because I was accessing the content over a secure HTTPS connection, whereas the page was trying to download the CDN hosted data from google, etc. The solution was to store them locally and then include then directly rather than from the CDN each time.
Edit: The other way of doing this is to link to all the CDN-hosted stuff as https:// rather than http:// - then the model doesn't complain.

You are calling the ready() function before the jQuery JavaScript is included. Reference jQuery first.
If you're in ASP.NET MVC, you can specify when your JS code should be rendered, by doing this:
1, In your page.cshtml wrap your <script> tag into a section, and give it a name, the common name to use is 'scripts':
#section scripts {
<script>
// JS code...
</script>
}
2, In your _Layout.cshtml page add #RenderSection("Scripts", required: false), make sure to put it after you reference the Jquery source, this will make your JS code render later than the Jquery.

Add jQuery library before your script which uses $ or jQuery so that $ can be identified in scripts.
remove tag script on head and put end bady
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
then first write script in file js add
/*global $ */
$(document).ready(function(){ });

If it's in wordpress, might be needed to change
$(document).ready(function() {
to
jQuery(document).ready(function($){
or add
var $ = jQuery;
before
$(document).ready(function() {

I had the exact same problem and none of these solutions above helped.
however, I just linked the .css files after the .js files and the problem miraculously disappeared. Hope this helps.

In my case I had this referenceError as the order of script calls was wrong. Solved that by changing the order:
<script src="js/index.js"></script>
<script src="js/jquery-1.10.2.js"></script>
to
<script src="js/jquery-1.10.2.js"></script>
<script src="js/index.js"></script>

I wanted to try to make my script asynchronous. Then I forgot about it and when I went live the [custom].js file only loaded 50% of the time before the jQuery.js.
So I changed
<script async src="js/script.js"></script>
to
<script src="js/script.js"></script>

I had the same problem , and I solved by putting jQuery at the top of all javascript codes I have in my code.
Something like this:
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="js/app.js" type="text/javascript"></script>
<script src="js/form.js" type="text/javascript"></script>
<script src="js/create.js" type="text/javascript"></script>
<script src="js/tween.js" type="text/javascript"></script>
Hope can help some one in future.

put latest jquery cdn on top of your main html page
Like If your main html page is index.html
place jquery cdn on top of this page like this
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h2").hide();
});
});
</script>
</head>
<body>
<h2>This will hide me</h2>
<button>Click me</button>
</body>
</html>

Include the jQuery CDN (or jQuery ref) in the index file first. before including your JS file to ensure we are accessing the jQuery.
following lines worked for me
Can get a clear idea about this by referring to the following link
reference site:
https://www.tutorialrepublic.com/faq/how-to-fix-dollar-is-not-defined-error-in-jquery.php
Answer: Execute Code after jQuery Library has Loaded
The most common reason behind the error "Uncaught ReferenceError: $ is not defined" is executing the jQuery code before the jQuery library file has loaded. Therefore make sure that you're executing the jQuery code only after jQuery library file has finished loading.

In my case it was a typo, I forgot a backslash and was referencing the source incorrectly.
Before src="/scripts/jquery.js"
After src="scripts/jquery.js"

If you are doing this in .Net and have the script file referenced properly and you jQuery looks fine, make sure that your users have access to the script file. The project I was working on (a coworker) had their web.config denying access to anonymous users. The page I was working on was accessible to anonymous users therefore they didn't have access to the script file. Dropped the following into the web.config and all was right in the world:
<location path="Scripts">
<system.web>
<authorization>
<allow users="*"/>
</authorization>
</system.web>
</location>

The source file jquery-1.2.6.min.js is not called the jQuery command $() is executed earlier than <..src='jquery-1.2.6.min.js'>.
Please run <.. src="/js/jquery-1.2.6.min.js.."> at first and make sure the src path is right, then execute jquery command
$(document).ready(function()

This happened to me before.
The reason was that I'm connecting android to a webview with a JS. And I sent a parameter without quotes.
js.sayHello(hello);
and when I changed it to
js.sayHello('hello');
it worked.

The error will occur in the following two scenarios as well.
#section scripts element is missing from the HTML file
Error in accessing DOM elements. For example accessing of DOM element is mentioned as $("js-toggle") instead of $(".js-toggle"). Actually the period is missing
So 3 things to be followed - check required scripts are added, check if it is added in the required order and third syntax errors in your Java Script.

I had similar issue. My test server was working fine with "http". However it failed in production which had SSL.
Thus in production, I added "HTPPS" instead of "HTTP" and in test, i kept as it is "HTTP".
Test:
wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', array(), null, false );
wp_register_script( 'custom-script', plugins_url( '/js/custom.js', __FILE__ ), array( 'jquery' ) );
Production:
wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', array(), null, false );
wp_register_script( 'custom-script', plugins_url( '/js/custom.js', __FILE__ ), array( 'jquery' ) );
Hope this will help someone who is working on wordpress.

Your JavaScript file is missing so this error occurred. Just add the JavaScript file inside the <head> tag. See the example:
<script src="js/sample.js" type="text/javascript"></script>
<link href="css/sample.css" rel="stylesheet" type="text/css" />
or add the following code in tag :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

In my case i forgot to include this :
<script src ="jquery-2.1.1.js"></script>
Earlier I was including just jquery-mobile which was causing this error.

I modified the script tag to point to the right content and changed the script order to be the right one in the editor. But totally forgot to save the change.

Doh! I had mixed quotes in my tags that caused the jquery reference to break. Doing an inspect in Chrome allowed me to see that the file wasn't properly linked.

You have not referenced a jQuery library.
You'll need to include a line similar to this in your HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

I had a similar issue and it was because I was missing a closing > on a style sheet link.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="local_xxx.js"></script>
I have similar issue, and you know what, it's because of network is disconnected when I test in android device webview and I don't realize it, and the local js no problem to load because it doesn't need network. It seems ridiculous but it waste my ~1 hour to figure out it.

if you are laraveling that error comes on in blade files when you forgot to surround the code with :
#section('section name')
.......
#endsection

formDiv.dialog is not a function [duplicate]

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.

Bootstrap tooltip $(...).tooltip is not a function

I am getting the mentioned error with the following code. The documentation says that you only need jQuery and Bootstrap and then tooltip is there. popper is also not needed if using the bootstrap min version.
Why does it not work? I searched for hours and no none seems to have the same problem. Thanks for help in advance.
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<input type="text" data-toggle="tooltip" title="hi there!">
</div>

The following works for me in Bootstrap 5 - the same may be applicable in bootstrap 3/4, but double check the docs for your version.
Require jQuery first.
I've seen some other threads saying you need to require jquery-ui too - personally i've not had to do this, I can't speak for earlier bootstrap versions.
jQuery has been removed from Bootstrap 5, but it knows to use it if you have it in your project. To do this you must assign jQuery to window.jQuery - if you try to only assign it to the $ shorthand Bootstrap won't find jQuery (this was the issue for me - see example below of how I use both)
Next require #popperjs/core before bootstrap
Make sure you're using the correct Popper package for your bootstrap version - 4 requires popper.js, which is not the same as #popperjs/core
Lastly, require bootstrap
If you want tootlips to work on dynamically loaded content (e.g. content that is loaded after you make some future AJAX request), you'll want to make sure you define the selector for tooltips to look for.
window.jQuery = window.$ = require('jquery');
window.Popper = require('#popperjs/core');
require('bootstrap');
$('body').tooltip({
selector: '[data-bs-toggle="tooltip"]',
});
N.B. I'm using packages installed with NPM (i.e. not via CDN), requiring them in my app.js from node_modules. But the same should mostly be applicable - especially the order your require dependencies.
Bootsrtap 5.1.3
jQuery 3.6.0
#popperjs/core 2.11.5

Tooltips require popper.js to work. Make sure you include that before bootstrap.min.js:
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<input type="text" data-toggle="tooltip" title="hi there!">
</div>
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip();
});

You need to add bootstrap.min.css file and you can also set position of tooltip by data-placement attribute & set value to top, bottom, left or right.
Bootstrap3 tooltip doc: https://getbootstrap.com/docs/3.3/javascript/#tooltips
$(document).ready(function() {
//Tooltip initialization
$('[data-toggle="tooltip"]').tooltip();
});
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<br><br>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-6">
<input type="text" class="form-control" data-toggle="tooltip" title="hi there!">
</div>
</div>
</div>

$ is not defined lightgallery

For some reason my lightgallery is not working. I added it the same way I always do and all javascript files are included after Jquery.
I get this message in the console:
Uncaught TypeError: $ is not a function
at product-1.html:433
(anonymous) # product-1.html:433
Which points to:
<script type="text/javascript">
$(document).ready(function($) {
$("#lightgallery").lightGallery();
});
</script>
All files are correctly loaded, I checked in the network tab.
What could be the problem and how can I fix it? Maybe there is a conflict somewhere? Can I wrap it in a function to make it work?
My js files:

in the head
<link href="https://cdn.rawgit.com/sachinchoolur/lightgallery.js/master/dist/css/lightgallery.css" rel="stylesheet">
your html content
<div id="lightgallery">
<a href="img/img1.jpg">
<img src="img/thumb1.jpg" />
</a>
<a href="img/img2.jpg">
<img src="img/thumb2.jpg" />
</a>
</div>
in the body include light gallery js files after jquery
<script src="https://cdn.rawgit.com/sachinchoolur/lightgallery.js/master/dist/js/lightgallery.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-pager.js/master/dist/lg-pager.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-autoplay.js/master/dist/lg-autoplay.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-fullscreen.js/master/dist/lg-fullscreen.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-zoom.js/master/dist/lg-zoom.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-hash.js/master/dist/lg-hash.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-share.js/master/dist/lg-share.js"></script>
<script>
lightGallery(document.getElementById('lightgallery'));
</script>
This really works for me.

Clearing browser cache may help sometimes. Or narrow down your problem by loading one by one starting with jquery.

This solves the problem :
<script>
lightGallery(document.getElementById('lightgallery'));
</script>

1.Check your maps api js link like https://developers.google.com/maps/api/js this is correct or not
2.Press Ctrl+Shift+Del button at a same time and clear caches and cookies

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").

Categories