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.

Datepicker Multiple Dates not working in Google Apps Script

I am trying to create a datepicker that allows users to select multiple dates. These are the javascript and stylesheet references I am using:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://multidatespickr.sourceforge.net/jquery-ui.multidatespicker.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
This is the function I am calling once the document is ready:
try{
$("#recievedInHouseDate").multiDatesPicker();
}catch(e){
alert(e)
};
And the alert I get is: TypeError: $(...).multiDatesPicker is not a function
Any idea why this wouldn't work. I can get the regular date picker working fine if I only want to select a single date.

Why do you import jquery-ui twice?
here:
script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js">/script
and here:
script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js">/script
I think you should remove one of them. At least in my case that caused a similar to yours problem with Datepicker.

Try this line to avoid any conflict while loading jQuery libraries
jQuery.noConflict();

JavaScript fullCalendar plugin reading 'applyAll' as undefined in gcal.js

I am attempting to use the google calendar module of the fullcalendar plugin in JavaScript. When I attempt to load the google calendar, the console is displaying:
Uncaught TypeError: Cannot read property 'applyAll' of undefined
The error is occurring on line 23 of gcal.js:
21| var fc = $.fullCalendar;
22| console.log($.fullCalendar);
23| var applyAll = fc.applyAll;
The console.log() that I have added returns $.fullCalendar as undefined, and then fc.applyAll is also returning undefined. My knowledge of JS is not good enough to fully understand what is going on in this file, and I am not sure what is going wrong.
Here is my html:
<head>
<link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
<script src='fullcalendar/lib/jquery.min.js'></script>
<script src='fullcalendar/gcal.js'></script>
<script src='fullcalendar/lib/moment.min.js'></script>
<script src='fullcalendar/fullcalendar.js'></script>
<link href='style.css' rel='stylesheet' />
</head>
<body>
<div id='calendar'></div>
</body>
My JavaScript:
$(document).ready(function() {
$('#calendar').fullCalendar({
googleCalendarApiKey: 'my-api-key',
events: {
googleCalendarId: 'my-calendar-id'
}
});
});
And I have downloaded the most recent version of gcal.js (there seemed to be a problem with the file, and the site provided a link to the most up to date version).

The problem is with the order you've imported the library files.
fullcalendar is a jQuery plugin, which usually means it will end up as a property on the jQuery object e.g. $.fullCalendar.
Now, the gcal file depends on that property being there, so that it can access the .applyAll method on it, however, you're loading gcal.js before you load fullcalendar.js.
If you change the ordering like this, it works without problems.
<script src='fullcalendar/lib/jquery.min.js'></script>
<script src='fullcalendar/lib/moment.min.js'></script>
<script src='fullcalendar/fullcalendar.js'></script>
<script src='fullcalendar/gcal.js'></script>
As a rule of thumb, try and put the files that you know have no dependencies (they don't rely on another library) first.

Implementing Fullcalendar into a Wordpress page

I'm trying to implement FullCalendar into a page on my wordpress web site using the built in page editor.
Here's the code:
<code>
<!DOCTYPE html>
<html>
<head>
<link href='../fullcalendar-2.0.2/fullcalendar.css' rel='stylesheet' />
<script src='../fullcalendar-2.0.2/lib/moment.min.js'></script>
<script src='../fullcalendar-2.0.2/lib/jquery.min.js'></script>
<script src='../fullcalendar-2.0.2/fullcalendar.min.js'></script>
<script type="text/javascript">
$(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
})
});
</script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
</code>
The problem I am having is that even though I am following the implementation guides closely I keep getting the error:
Uncaught SyntaxError: Unexpected token <
When I click to go into the code in the console it loads nothing up and after an hour of changing small things it's completely stopped me moving forward

If you want to do this in your page's content, you should not include the <html>, <head>, etc elements. You will also need to use an absolute path to your included files so that they do not products 404 errors (likely where the error you see is coming from) - this means you need to start the URL with a / to point directly to the files.
Try this code, assuming that fullcalendar is in your theme under the directory /wp-content/themes/yourtheme/fullcalendar-2.0.2/:
<link href='/wp-content/themes/yourtheme/fullcalendar-2.0.2/fullcalendar.css' rel='stylesheet' />
<script src='/wp-content/themes/yourtheme/fullcalendar-2.0.2/lib/moment.min.js'></script>
<script src='/wp-content/themes/yourtheme/fullcalendar-2.0.2/lib/jquery.min.js'></script>
<script src='/wp-content/themes/yourtheme/fullcalendar-2.0.2/fullcalendar.min.js'></script>
<script type="text/javascript">
$(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
});
});
</script>
<div id="calendar"></div>

I have discovered that the Wordpress plugin for Fullcalendar allows for custom XML feeds. So I have managed to implement the calendar onto my page, which was the aim of this question.

jQuery Toggles Plugin (Toggle Buttons)

I'm trying to get this toggles plugin to work but I keep getting the error:
Uncaught TypeError: Object [object Object] has no method 'toggles'
The plugin doesn't give too much implementation information so I figured it would be straight-forward. I know the plugin script is linking correctly and I have jquery above that. Here's my html:
<html>
<head>
<link type="text/css" rel="stylesheet" href="toggles-modern.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" href="toggles.js"></script>
</head>
<body>
<div class="toggle"></div>
<script type="text/javascript">$('.toggle').toggles();</script>
</body>
</html>
How do I get this plugin working exactly? The plugin resources are here:
https://github.com/simontabor/jquery-toggles
http://simontabor.com/labs/toggles/

See if this helps at all....
I use "https://rawgithub.com" to do CDN as that is what they suggest.... HOWEVER this is NOT meant for production type environments so don't do that
<script type="text/javascript" src="https://rawgithub.com/simontabor/jquery-toggles/master/toggles.min.js"></script>
$(function () {
$('.toggle').toggles();
});
I seem to have it working with including the file directly from github... Do you have errors in your dev console?
http://jsfiddle.net/Mutmatt/fJ6gF
Please note: In the js fiddle i included two external resources on the left panel**