Develop Reference

TypeError dialog is not a function

I need help with this javascript code. I keep getting this error:
Uncaught TypeError: $(...).dialog is not a function
Code:
<script>
$(function () {
$('#tdog').dialog({
autoOpen: false,
width: 200,
modal: true,
});
});
</script>
<div id="tdog"></div>
I included the jquery import in the header. What am I doing wrong?

I'm guessing you forgot to include jquery UI.
See this answer for reference:
Error: TypeError: $(...).dialog is not a function

The script is running before the div has been loaded on the page, thus it is unavailable, add the ready function to ensure it is loaded first.
$( document ).ready(function() {
$('#tdog').dialog({
autoOpen: false,
width: 200,
modal: true,
});
});

You have to include the ui and also the styles before starting the script
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function () {
$('#tdog').dialog({
autoOpen: false,
width: 200,
modal: true,
});
});
</script>

In Laravel, I had a minified version of all the js files in /public/js/app.js being included in app.blade.php (main template page). I commented out the inclusion of app.js and the error went away, presumably because of the 'included twice' points made above.

JQUERY dialog Uncaught Error: cannot call methods on dialog prior to initialization

I have the following javascript which opens a JQUERY Dialog box which contains a partial view:
html
<div id="dialog" title="Address Finder" style="overflow: hidden;"></div>
javascript
$(function () {
$('#dialog').dialog({
autoOpen: false,
title: 'Address Lookup Tool',
modal: true,
show: {
effect: "fade",
duration: 1000
},
hide: {
effect: "fade",
duration: 1000
},
open: function (event, ui) {
//Load the AddressLookup action which will return
// the partial view: _AddressLookup
$(this).load("#Url.Action("AddressLookup")");
}
});
$('#addressLookupBtn').click(function () {
$('#dialog').dialog('open');
});
});
When I first open the page and click the addressLookupBtn the dialog window opens up with the partial view, I then close it but the next time I try to open it I get:
Uncaught Error: cannot call methods on dialog prior to initialization;
attempted to call method 'open'
I've done looking around at this error message and it seems to be related to the $(this) I am using to load the partial view and I have tried declaring a variable which will keep the context like so:
var $this = $(this);
But im not really sure where this should go, I've tried putting it in the click function and in the open function and calling it rather than $(this) but It gives me the same error.
edit
If I add this:
$('#addressLookupBtn').click(function () {
$('#dialog').dialog().dialog('open');
});
The dialog will open and close as expected, but only do the fade effect the first time, from then on it will pop in and out.

The problem is that with the .load ajax call, you are replacing all content inside the DIV of the dialog, even things added by jQuery for it to work.
Add and empty DIV inside the dialog then call .load on that.
<div id="dialog" title="Address Finder">
<div style="overflow: hidden;"></div>
</div>
Then the JS:
$('> div', this).load("#Url.Action("AddressLookup")");

I needed to initialize a new dialog each time I clicked the botton, this did the trick:
<script type="text/javascript">
$(function () {
$('#addressLookupBtn').click(function () {
$('#dialog').dialog({
autoOpen: false,
title: 'Address Lookup Tool',
modal: true,
width: 700,
show: {
effect: "fade",
duration: 1000
},
hide: {
effect: "fade",
duration: 1000
},
open: function (event, ui) {
//Load the AddressLookup action which will return
// the partial view: _AddressLookup
$(this).load("#Url.Action("AddressLookup")");
}
}).dialog('open');
});
});
</script>

jquery mobile and jquery ui not compatitble

am working on a html5 application that will work on both desktop,tablets and mobile devices.am stuck when it comes to using progress bars and dialog boxes.at first i had been using jquery mobile but its only until now when i want to incorporate jquery ui inorder to use progress bars and dialog pop ups is when i came to realize that the two are not working out well when used together. this is a sample code of the effect of the two plugins
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>dialogbox demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<script>
$(document).ready(function () {
$().lowStorageSpace();
});
$.fn.lowStorageSpace = function () {
$('<div></div>').appendTo('body')
.html('<div><h5>You are running out of space.backup or sync data before you proceed!!</h5></div>')
.dialog({
modal: true, title: 'Low storage space!!', zIndex: 10000, autoOpen: true,
width: 'auto', resizable: true,
buttons: {
Sync: function () {
//sync();
$(this).dialog("close");
},
Backup: function () {
// backup();
$(this).dialog("close");
},
Cancel: function () {
//cancel();
$(this).dialog("close");
}
},
close: function (event, ui) {
$(this).remove();
}
});
}
</script>
</body>
</html>
the above code works well when i comment out jquery.mobile-1.2.0.min.js. but i really need it too in my complete app.
any help on how i can use the two will be appreciated.
i have seen many similar questions but non has solved my problem
thanks in advance.

This is a conflict i agree. Out of all the examples of jquery ui and jquery mobile i have seen i have not seen code showing that the two can be used on the same script. I would use two different scripts, one for ui and one for mobile. That way there should not be any conflict here.

overriding the javascript ALERT to jquery dialog

I was trying to do the magic and turn all of my platform javascript alerts to jquery dialog, I followed the following scripts
<div id="overrideAlert"></div>
<script>
window.alert = function(message) {
$('#overrideAlert').text(message).dialog({
modal:true,
title:'Message',
buttons: {
'OK':function(){
$(this).dialog('close');
}
}
});
};
</script>
But no luck.
Is there a clean solution for this? Thanks,

I would prefer a dynamic div instead
$('<div />').text(message).dialog({
modal:true,
title:'Message',
buttons: {
'OK':function(){
$(this).dialog('close');
}
},
close:function(){ $(this).dialog('destroy').remove(); }
});
DEMO.

It just works.
Check at the jsfiddle demo.
Note: you can't call alert('foo'); directly inside the <head>'s <script> tags, because the div element is not ready on the dom.

Your code looks fine, but make sure that you add jquery and jquery-ui libraries to your page.
Demo: Plunker

If we are submitting page before alert is going automatically.
some saved successfully messages there but not asking for "ok".
I have done overriding of alert.any suggestion.
window.alert = function(message, fallback){
$(document.createElement('div')).attr({title: 'Alert', 'class': 'alert'}).html(message).dialog({
buttons: {OK: function(){$(this).dialog('close'); callback()}},
autoOpen: true,
close:function(){$(this).remove();},
draggable: true,
modal: false,
resizable: false,
height:'auto',
width: 'auto'
});

jQuery UI dialog issue

I'm trying to create jquery dialog, but there is no use :(
here is my jQuery code:
$(document).ready(function() {
createDialog();
});
function createDialog() {
$("#dialog:ui-dialog").dialog("destroy");
$("#dialog-form").dialog(
{
autoOpen : false,
height : 475,
width : 350,
modal : true,
buttons : {
"submit" : function() {
var bValid = true;
allFields.removeClass("ui-state-error");
postText();
$(this).dialog("close");
}
},
cancel : function() {
$(this).dialog("close");
}
},
close : function() {
allFields.val("").removeClass("ui-state-error");
}
});
$(".add-org").click(function() {
$("#dialog-form").dialog("open");
});
}
here is html code:
<link href="<c:url value="/resources/styles/jquery-ui-1.8.21.custom.css"/>"
rel="stylesheet" type="text/css">
<script type="text/javascript"
src="<c:url value='/resources/js/jquery-1.7.js'/>"></script>
<script type="text/javascript"
src="<c:url value='/resources/js/jquery-ui-1.8.21.custom.min.js'/>"></script>
<script type="text/javascript"
src="<c:url value='/resources/js/myScript.js'/>"></script>
New
<div id="dialog-form" title="Add New ">
<p class="validateTips">All form fields are required.</p>
<form>
..................
</form>
</div>
and firebug says:
TypeError: $("#dialog:ui-dialog").dialog is not a function
$("#dialog:ui-dialog").dialog("destroy");
and on my page I see all the fields from the form.
so what is my problem?

Try this: Working demo http://jsfiddle.net/kEZkh/
Not sure if your source path are correct please include following scripts.
rest please feel free to play around with demo & hope it helps the cause :)
scripts
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css">
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
code
$("#forgot").click(function(e){
$("#dialog-form").dialog("open");
e.preventDefault();
});
$("#dialog-form").dialog({
modal: true,
autoOpen: false,
height: 255,
width: 300,
buttons: {
"Retrieve": function() {
document.forms["forgotform"].submit();
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
});
​

Check in Firebug/DevTools if the script file was loaded successfully. If it is, type this into the console (Firebug, DevTools) or better, put that line where your other code is executed:
console.debug(jQuery.ui)
If it shows undefined, then jQuery UI was not loaded (yet). Check if your code runs before everything was loaded, put it inside jQuery's $(document).ready();. If it is an object, inspect it and check for the dialog property.
If you configured a custom build on jqueryui.com, doublecheck if you included the dialog widget.

The destroy call should be on the same element as you already used when you created the dialog, not the .ui-dialog container that gets wrapped around your content:
$("#dialog-form").dialog('destroy');
Since your current code is throwing an exception, the subsequent lines which are supposed to create the dialog never get called.
If you want to destroy every dialog that might already be open, jQuery UI handily puts a .ui-dialog-content class on each content div:
$('.ui-dialog-content').dialog('destroy');