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.

How to resolve JQuery Conflicts between 3 or more dependent versions of JQuery using .noConflict?

I've found many other similar questions but this particular scenario is somewhat unique to the more typical ones to which the prior questions are applicable.
My understanding and the normal approach I use to resolve conflicts between 2 versions of JQuery are as follows in this example:
<script type="text/javascript" src="../Static/jquery-1.3.2.min.js" ></script>
<script type="text/javascript" src="/Scripts/jquery-ui 1.12.1.custom/jquery.js"></script>
<script type="text/javascript">
var JQuery_1_12_1 = $.noConflict(true);
$JQuery_1_12_1(document).ready(function () {
// Code dependent on JQuery 1.12.1 can safely execute here without
// conflicting with version 1.3.2
});
</script>
<script type="text/javascript">
// Code executed within this block will use 1.3.2
</script>
Alternatively, I could have duplicated the approach implemented to define the noConflict variable for 1.12.1 for 1.3.2 and the result would have been the same.
The problem I'm having difficulty in resolving is that I'm confronted with a situation I previously haven't had to deal with where there are linked library dependencies that need to be combined together in a noConflict manner.
Here is the current situation:
<script type="text/javascript" src="../Static/jquery-1.3.2.min.js" ></script>
<script type="text/javascript" src="/Scripts/jquery-ui-1.12.1.custom/jquery-ui.js"></script>
<script type="text/javascript" src="/Scripts/jquery-ui 1.12.1.custom/jquery.js"></script>
<script type="text/javascript">
var JQuery_1_12_1 = $.noConflict(true);
$JQuery_1_12_1(document).ready(function () {
// Code dependent on JQuery 1.12.1 can safely execute here without
// conflicting with version 1.3.2 but do to the lack of the dependent version this code will always break
});
</script>
<script type="text/javascript">
// Code executed within this block will use 1.3.2
</script>
As you can note, there is an inter-dependency between jquery-ui.js and jquery.js and due to this inter-dependency the $JQuery_1_12_1 variable cannot be applicable to both.
Alternatively, creating a separate noConflict variable for the jquery-ui.js library would require it to be placed within the context of a separate script tag which would essentially break the dependency and the code won't function correctly.
How can this problem be resolved?
I have also tried using the same versions of one of the JQuery libraries to alleviate the conflicts but they each have a unique set of features that don't crossover. So only one version will work per required application within the code.

First: Don't use multiple versions of jQuery. It bloats and complicates your page. Use an up-to-date version of jQuery and, if you have plugins that don't work with that up-to-date version, update them so they do (and ideally send a pull-request back to the plugin's repo if it has one), or use something that's actively maintained instead.
Now, if for some reason you can't do that:
Any half-decent jQuery plugin uses the jQuery variable's value as of when the plugin is loaded, by doing something like this:
(function($) {
// Plugin code
})(jQuery);
If you load a different version of jQuery afterward, the plugin still uses the earlier one because it captured the value of jQuery as of when it loaded.
So load your plugins for a given jQuery version immediately after loading that version of jQuery.
Then: Do the same for your own code.
<script src="../Static/jquery-1.3.2.min.js" ></script>
<script src="../plugin/that/needs/version/132.js"></script>
<script src="../your/code/that/needs/version/132.js"></script>
<script type="text/javascript" src="/Scripts/jquery-ui 1.12.1.custom/jquery.js"></script>
<script type="text/javascript" src="/Scripts/jquery-ui-1.12.1.custom/jquery-ui.js"></script>
<script src="../your/code/that/needs/what/jQueryUI/is/using.js"></script>
...where your script code does the same thing a well-behaved plugin does:
(function($) {
// Use $ here
})(jQuery);
If you have code that (shudders) needs to use both versions of jQuery, capture each version in a variable:
<script src="../Static/jquery-1.3.2.min.js" ></script>
<script src="../plugin/that/needs/version/132.js"></script>
<script>
var jQuery_v132 = jQuery;
</script>
<script src="../your/code/that/needs/version/132.js"></script>
<script type="text/javascript" src="/Scripts/jquery-ui 1.12.1.custom/jquery.js"></script>
<script type="text/javascript" src="/Scripts/jquery-ui-1.12.1.custom/jquery-ui.js"></script>
<script>
var jQuery_whatever = jQuery;
</script>
<script src="../your/code/that/needs/what/jQueryUI/is/using.js"></script>
<script src="../your/code/using/both.js"></script>
...where your code using both uses jQuery_v132 or jQuery_whatever as appropriate.
(I've used "whatever" because I have no idea what version of jQuery your jquery-ui 1.12.1.custom/jquery.js file is, but it's unlikely to be jQuery 1.12.1.)

JS interrupting each other on html page

I need to use two different versions of jQuery on my website. Because i need to use one plugin that is using different version of jQuery than my site. I tried to use noConflict and i even made that plugin to work, but my site didnt work properly. Any idea?
<script src="comment/frontend/view/default/javascript/jquery.min.js">
</script>
<script src="comment/frontend/view/default/javascript/jquery-ui/jquery-
ui.min.js"></script>
<script src="comment/3rdparty/read_more/read_more.js"></script>
<script src="comment/3rdparty/filer/filer.js"></script>
<script src="comment/3rdparty/timeago/timeago.js"></script>
<script src="comment/frontend/view/default/javascript/common.js"></script>
<script src="comment/3rdparty/colorbox/jquery.colorbox-min.js"></script>
<script src="comment/3rdparty/highlight/highlight.pack.js"></script>
These last two are using $
<script src="js/core.min.js"></script>
<script src="js/script.js"></script>

jQuery confliction for Autocomplete

I have loaded two jQuery versions on my page;
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script>var jq = jQuery.noConflict();</script>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
I am trying to use the Autocomplete plugin from https://github.com/devbridge/jQuery-Autocomplete/ (it doesn't work with 1.4.2) so I have to add 1.9.1 jQuery version.
I cannot remove 1.4.2 at all, as removing so breaks my existing code.
I have tried changing the order of the libraries but no luck.
FYI jq("#elem").hide(); etc. works and other jQuery native stuff. but when I use it to bind autocomplete plugin, it fails driving me crazy;
binding as jq('#searchbox').autocomplete(); the error I see in console is
TypeError: jq(...).autocomplete is not a function
PS: I have also tried <script>var jq = jQuery.noConflict(true);</script> without success.
Thank you for any help!

Does this work you. I got no error on this.
jq('#autocomplete').autocomplete({});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.devbridge-autocomplete/1.2.27/jquery.autocomplete.min.js" type="text/javascript"></script>
<script type="text/javascript">
var jq = $.noConflict(true);
</script>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<input type="text" name="country" id="autocomplete"/> no error

jQuery/jQueryUI conflict

I am using some jquery files for auto complete and datetime picker control but 3 files among them are conflicting:
Two files for autocomplete are
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
One file for Calender datetime picker is:
<script src="../assets/js/jquery-1.8.3.min.js"></script>
These 3 files are confilicting when i comment date time picker file autocomplete works and if I uncomment it autocomplete stops.

If you want to include both the js files you can..
<!-- load jQuery 1_8_3 -->
<script src="../assets/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
var jQuery_1_8_3 = $.noConflict(true);
</script>
<!-- load jQuery 1.4.2 -->
<script type="text/javascript" src="jquery/jquery-1.4.2.js"></script>
<script type="text/javascript">
var jQuery_1_4_2= $.noConflict(true);
</script>
Its better to avoid multiple versions in the page..and its better to use appropriate jquery-UI Version with the jquery version

If you try only these, i think you are good to go:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js">
</script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.js">
</script>
No need to add other versions of jquery.

That's probably because you are including jQuery 2 times. An old version and a newer version.
I would recommend you try and use the most recent versions of both jQuery and jQuery UI and check if everything still works.