We Keep Coding

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.

Where to add JavaScript code that needed jQuery file?

I've founded this article but I don't know where to add this code:
$(document).ready(function(){
$(".showDescriptionTextbox").val($(".Product").val());//to initialize
$(".showDescriptionDiv").text($(".Product").val());//to initialize
$(".Product").change(function(){
$(".showDescriptionTextbox").val($(".Product").val());
$(".showDescriptionDiv").text($(".Product").val());
});
});
I've file jquery-1.11.3.min.js, jquery-1.10.2.min.js.
Should I edit one of both file with above code? Please give me a hint.
I want to execute query SQL by clicking the select option that I know it's just possible using jquery/ajax/js, but I'm still newbie.

I've file jquery-1.11.3.min.js, jquery-1.10.2.min.js. Both are jquery library file with different version. Only one should be included.
In your case the code snippet which you have shared can be included in a separate js file. Like this
nameOfYourJSFile.js
$(document).ready(function(){
$(".showDescriptionTextbox").val($(".Product").val());//to initialize
$(".showDescriptionDiv").text($(".Product").val());//to initialize
$(".Product").change(function(){
$(".showDescriptionTextbox").val($(".Product").val());
$(".showDescriptionDiv").text($(".Product").val());
});
});
Include the file in your main html file. Add the scripts near the bottom of the page.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello Plunker!</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="nameOfYourJSScript.js"></script>
</body>
</html>
DEMO
If the file is included in the bottom , there is no need to use document.ready function

Add your code BELOW the <script src="jquery-1.11.3.min.js"></script>
So, JQuery will be loaded and can be used

$ 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

Highlighting selected list item using javascript

I know, this question is asked like milion times, but I cant get it to work.
All my html,css and js files are located in same folder.
Below - my code, but I also mad jsfiddle here .
The code works fine in JSfiddle, but doesnt work on my computer, so i thought it might be something with my html head and linking to javascript file, but it seems to be right.
header of my html file :
<head>
<title>Nacionālie dārgumi</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="script.js"></script>
</head>
This is my html:
<div class="menu">
<ul class="main-menu">
<li><a class = "main_men_links" href="about.html">PAR PROJEKTU</a></li>
<li><a class = "main_men_links" href="">NACIONĀLIE DĀRGUMI</a></li>
<li><a class = "main_men_links" href="">SASNIEGUMI</a></li>
<li><a class = "main_men_links" href="">SĀKUMS</a></li>
</ul>
</div>
This is my script.js:
$(function(){
console.log('ready');
$('.main-menu li').click(function(e) {
e.preventDefault()
$that = $(this);
$that.parent().find('li').removeClass('active');
$that.addClass('active');
});
})
This is my style.css :
.active {
background: black;
}
Any help will be highly appreciated!

I think you don't have jquery library on html head section.
like this using CDN <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
Try to add before your main script declaration.
This link only works if you are connected to internet, or download the file so you can use it locally.

Please check whether you have included the reference of Jquery.js in your Header part of HTML or not. As , your script file will not run if you haven't use jquery.js before the script.js load .

Header should be loading jquery.
You can try as below :
<head>
<title>Nacionalie dargumi</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="script.js"></script>
</head>
or download jquery.min.js and load it.

You're using jQuery, so you need to provide the link to the library to get your script.js work. Make sure that the CDN library and your local script.js are added in this order.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="script.js"></script>
in your browser Press F12 and check the tab Sources (in Chrome) or
Debugger (in Firefox) to make sure script.js is loaded.
You must also see a 'ready' message in your browser console.

Foundation Orbit doesn't initialize

I'm working with Foundation 4 framework. I've been trying to include the Orbit slide into my website, but I can't seem to get it to work.
So I followed the steps in Foundation documentation. I've included all necessary scripts
<script type="text/javascript" src="js/vendor/custom.modernizr.js"></script>
<script type="text/javascript" src="js/foundation.min.js"></script>
<script type="text/javascript" src="js/foundation/foundation.orbit.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
$(document).foundation();
</script>
Then I tried to add a simple slideshow
<ul data-orbit>
<li>
Test1
</li>
<li>
Test2
</li>
<li>
Test3
</li>
</ul>
But, instead of generating a slideshow all I get is an unnumbered list. I triple checked to make sure I didn't misspell anything. Here's an example of what I get.

In my expirience Foundation's scrips are a little messy, so try to do the following:
place modernizr inside the <head>
reference the following js at the end of your <body> just before the </body> tag :
<script>
document.write('<script src=' +
('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
'.js><\/script>')
</script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
That way you load Zepto in modern browsers, and jquery in the old ones, then you load Foundation, and then you tell the document to grab the format. There's no need to load the orbit js, as it is inside the min version of Foundation.
The code is documented at http://foundation.zurb.com/docs/javascript.html

I also had this problem.
The the prot fix that ezabaw used worked for me.
The orbit.js is required for this feature.
TCasa

Dan and TCasa are right. Do not forget foundation.orbit.js . It's essential.
So put this just before the </body> end tag:
<script>
document.write('<script src=' +
('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
'.js><\/script>')
</script>
<script src="js/foundation.js"></script>
<script src="js/foundation.orbit.js"></script> // <-- Don't forget this one
<script>
$(document).foundation();
</script>
Make sure the paths are right too.
I used Foundation in combination with Compass so my paths were : js/foundation/foundation.js and js/foundation/foundation.orbit.js.
Good luck

There is an easier way.
The Slider needs to be initalized after the page is fully loaded.
For me, after following all aforementioned steps in other answers the following worked
<script>
$(document).ready(function() { $(document).foundation(
//add custom options to orbit
'orbit', {
animation: 'slide',
timer_speed: 1000,
pause_on_hover: true,
animation_speed: 500,
navigation_arrows: true,
bullets: true
);});
</script>
The additional custom options can be found here Link to Foundation Docs
A working example is here (helped me solving this issue)