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.

Uncaught TypeError: $(...).code is not a function (Summernote)

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>

Including multiple JQuery plug-ins Problem

I've only just started using JQuery so be easy on me if the solution is something simple.
My problem is that I have 2 Jquery plug-ins on the same page, but only 1 of which works, depending on the order the files have been included. See below:
<script type="text/javascript" src="/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="/js/js/jquery-ui-1.8.14.custom.min.js"></script>
<link type="text/css" href="/js/css/smoothness/jquery-ui-1.8.14.custom.css" rel="Stylesheet" />
<script type="text/javascript">
//no conflict jquery
jQuery.noConflict();
//jquery stuff
$(document).ready(function(){
$("#datepicker").datepicker({ dateFormat: 'dd-mm-yy' });
});
</script>
<script type="text/javascript" src="/js/mootools.js"></script>
<script type="text/javascript" src="/js/moocheck.js"></script>
<script type="text/javascript" src="/js/js_main.js"></script>
In the code posted above, the styling of the checkboxes works fine, but the datepicker doesn't. If I remove the 2 mootools JS lines, then the datepicker works OK.
Any ideas please?

You have included two different versions of jQuery on the same page, remove one of them (the older one probably).
Also there might be a conflict between jQuery and MooTools, I would try using jQuery.noConflict(), also see "Using jQuery and MooTools Together".

Use jQuery instead of $ for the datepicker.
jQuery(document).ready(function(){
jQuery("#datepicker").datepicker({ dateFormat: 'dd-mm-yy' });
});

You're loading 2 version of jquery, so delete
<script type="text/javascript" src="/js/js/jquery-1.4.4.min.js"></script>
Also, jquery ui should be loaded at the top right after jquery.

Globalization in JQuery is not working

I have been following theScott Hanselman Tutorial on Globalized Javascript Validation. It is a great tutorial wich made me understand a topic I'm not that familiar with a bit better. The only problem is that it's a bit outdated because the link he provided to files like jquery.glob.fr.js is invalid. But you get redirected to the improved version by Jquery.
That's ok, but They just don't do what they promise to do. I tried searching for tutorials and information about this, but the only help on the internet is the ReadMe file. They state this =>
Globalize.culture( "fr" );
console.log( Globalize.culture().name ) // "fr"
Globalize.culture( "fr-FR" );
console.log( Globalize.culture().name ) // "fr-FR"
But when I try it my alertbox returns en instead of nl-BE
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="../../Scripts/globalize.culture.nl.js" type="text/javascript"></script>
<script src="../../Scripts/globalize.culture.nl-BE.js" type="text/javascript"></script>
<script src="../../Scripts/modernizr-1.7.js" type="text/javascript"></script>
<script src="../../Scripts/globalize.js" type="text/javascript"></script>
#Html.MetaAcceptLanguage()
<script type="text/javascript">
$(document).ready(function () {
//Ask ASP.NET what culture we prefer, because we stuck it in a meta tag
var data = $("meta[name='accept-language']").attr("content")
//Tell jQuery to figure it out also on the client side.
alert(data.toString());
Globalize.culture("nl-BE");
alert(Globalize.culture().name);
});
</script>
At first I tried Globalize.culture(data), it didn't work so i tried nl-BE like the documentation states. No difference.
How do I get to change the culture to nl-BE instead of en?

Multiple jQuery includes in a document

I have a document which uses old jQuery and I need new jQuery for a particular plug-in.
My document structure looks like this:
<html>
<head>
<script type="text/javascript" src="jQuery.old.js"></script>
</head>
<body>
<script>
$("#elem").doSomething(); // use old jQuery
</script>
<!-------- My plugin begins -------->
<script type="text/javascript" src="jQuery.new.js"></script>
<script type="text/javascript" src="jQuery.doSomething.js"></script>
<script>
$().ready(function(){
$("#elem").doSomething(); // use new jQuery
});
</script>
<div id="elem"></div>
<!-------- My plugin ends ---------->
<script>
$("#elem").doSomething(); // use old jQuery
</script>
</body>
</html>
I have googled for this question but found nothing that would look like my case (I need first to load old javascript (in the head) and THEN new (in the body). By the way, in the Firefox looks like old jQuery lib loads and scripts that depends on it works, but script that uses new version, and in IE and Chrome everything is exactly opposite.

To start, you should try running all the plugins under the latest version of jQuery - you may find you can use just the one latest version.
If you cannot do this, you can run in compatibility mode. Here is how.
<script src="jquery-1.3.2.js"></script>
<script>
var jqueryA = jQuery.noConflict();
</script>
<script src="jquery-1.4.2.js"></script>
<script>
var jqueryB = jQuery.noConflict();
</script>
You would need to call
jqueryB("#myelement").....
To use the alternate version.

You should use jQuery.noConflict();
See this example: http://web.enavu.com/daily-tip/using-multiple-versions-of-jquery-on-the-same-page/

As a rule of thumb, stick to one included jquery file. It's quite a large file, and there's no need to import multiple versions. I would opt for the latest version, which can be served from google or microsoft to speed up your server.
Note if you want the "doSomething" event to behave differently depending on where it's called in the page, you could try to bind the event differently. Check out the following example. As with yours, it calls the new version from within your plugin area on the page ready event - this might be later than you expected.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<div id="elem"></div>
<script>
var oldFunct = function (e,o) { alert("old jquery" + o); };
var newFunct = function (e,o) { alert("new jquery" + o); };
$("#elem").bind("doSomething", oldFunct);
$("#elem").trigger("doSomething", ["1"]);
</script>
<script>
$(document).ready(function(){
$("#elem").bind("doSomething", newFunct);
$("#elem").trigger("doSomething", ["2"]);
$("#elem").bind("doSomething", oldFunct);
});
</script>
<script>
$("#elem").trigger("doSomething", ["3"]);
</script>
</body>
</html>