I am using a jquery dialog, but the dialog.open() does not display the dialog. (The site only works with IE 7 & 8, so I cannot see if the dialog is in fact displayed.)
I have ensured that these dependencies are available:jquery-ui.css; jquery-ui-1.8.16.custom.min.js; https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js
In the markup: I creates the dialog in the document ready method:
var $dialog;
$(document).ready(function () {
$dialog = $("#dialog")
.dialog({
autoOpen: false,
title: 'My Modal Dialog',
position: 'center',
modal: true,
closeOnEscape: true,
buttons: [{ text: "Close", click: function () { $(this).dialog("close"); } }]
});
});
Another javascript function contains these lines to "open' the dialog. When I inspect the dialog, it is an Object, but I never see it.
function showDialog() {
$dialog.html("Hello World");
$dialog.dialog('open');
}
The code looks sound, and in another project I've worked on, works without a hitch. So that leaves me to think that it IS opening, but I can't see it for some reason. Has anyone encountered this, or found a solution to this?
Thank you for any help you can provide.
Have you created parent element:
<div id="dialog">..
in document ?
Related
I want to show a confirmation box include 4 options: Yes/No/Yes to All/No to All after user click a button in my aspx page. I have seen a lot of sample but it only contain Yes/No option. Please show me the way to do that.
There's no native javascript function for that (I guess you saw samples that are using confirm function).
Give a try to a javascript library, that create pseudo dialog.
One of the most used is JQueryUI. Especially, look at the Dialog confirmation sample, and you'll ends with something like:
<script>
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Yes": function() {
// Handler for Yes
},
"No": function() {
// Handler for No
},
"Yes to all": function() {
// Handler for Yes to all
},
"No to all": function() {
// Handler for no to all
}
}
});
});
</script>
I need someone to put me through how I can use jquery dialog to ask "Confirm" or "Cancel" validations before submit. I get Microsoft JScript runtime error: Object doesn't support property or method 'dialog' for this on IE9:
<script type="text/javascript">
$(document).ready(function () {
$("#savechanges").click(function () {
$("#dialog").dialog({
modal: true,
autoOpen: false,
buttons: {
"Confirm": function () {
$("#myformid").submit();
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
return false;
});
});
</script>
<div id="dialog"></div>
<p>
<input type="submit" id="savechanges" value="Save changes" />
</p>
If you set autoOpen as false, dialogbox doesn't open when you define it. So you should set it true.
From jQuery-UI docs,
autoOpen
When autoOpen is true the dialog will open automatically when dialog is called.
If false it will stay hidden until .dialog("open") is called on it.
DEMO
There can be multiple reason behind this issue, make use of any debug tool like firebug to check
Use a tool like Firebug for Firefox to verify each JS file is being included.
Make sure there is no other JS on the page that could cause an error.
Verify you have the correct versions of the files downloaded.
I have an aspx page that contains a dialog box defined with JQueryUI
$('#dialog').dialog({
modal: true,
autoOpen: false,
minWidth: 500,
title: 'my dialog',
buttons: { Finished: function() { $(this).dialog("close"); }
}
});
Within the page I have a button which is supposed to open the dialog
<button class="button" id="dialogLoader">Open</button>
The JavaScript for opening the dialog is
$('#dialogLoader').live('click', function(event) {
event.preventDefault();
$('#dialog').dialog("open");
loadDialogContent();
});
In Chrome Firefox etc all is good but IE9 does not load the dialog, even though when debugging all code appears to execute fine.
Any Ideas
UPDATE
Still have this problem I have updated the code above to show that I am now utilising preventDefault(); which I thought was the cause of the problem (if the problem is indeed event bubbling). but I still have no remedy to this if this was plain HTML it would work but I fear the involvement of ASP has caused some irregularity in rendering, which unfortunately returns no error.
UPDATE
Could the fact that this button is within JQueryUI tabs be causing the issue in IE9?
as you wrote your debug info is clean, this is just one idea. I hope this helps a little bit. attachEvent for Explorer.
var button = document.getElementById('dialogLoader');
if (button.addEventListener) {
button.addEventListener('click', function() {
//action
}, true);
} else if (button.attachEvent) {
button.attachEvent('click', function() {
//action
}, true);
}
I have a dialog box in mvc that opens up first time but not the second time and it gives me the error that the object does not support method dialog
this is my code:
<script src="<%= Url.Content("~/Scripts/jquery-1.5.2.min.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jquery-ui-1.8.11.min.js") %>" type="text/javascript"></script>
$('.trigger').live('click', function (event) {
var id = $(this).attr('rel');
var dialogBox = $("<div>");
$(dialogBox).dialog({
autoOpen: false,
resizable: true,
title: 'Test Modal Dialog',
modal: true,
width: 'auto',
closeOnEscape: true,
show: "slide",
open: function (event, ui) {
$(this).load('<%=Url.Action("TabExample2","RQA")%>');
},
overlay: { backgroundColor: "#000", opacity: 0.5 }
});
$(dialogBox).dialog('open');
});
Modal Dialog
any advice on why this is happening?
Check if you don't re-referencing any jQuery libraries after you load Dialog Box.
UPDATE
To some calrification.
You should reference all needed libraries in heade section (or whatever place you want).
But to make tabs work withing DialogBox you need to write script explicity in that dialog box.
Just like any other in code jQuery script:
$(document).ready(function () {
///you tab code
});
This should work. I also had problem with not working tabs in DialogBox.
in this page you have solution and example:
http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/
and it's works :)
$("#termSheetPrinted").dialog({
autoOpen: false,
resizable: true,
height: 800,
width: 950,
position: 'center',
title: 'Term Sheet',
modal: true,
buttons: {
"Print": function () {
$("#termSheetPrinted").jqprint();
},
"Cancel": function () {
$("#termSheetPrinted").html('');
$(this).dialog("close");
}
}
});
This dialog appears with an 'x' on top of the window to close it. I want the $(this).dialog("close"); to run when this 'x' is clicked just as the 'Cancel' button does.
How can I do that?
I don't know of a way to specifically change what happens when the "x" is clicked, but you can create "close" or "beforeClose" event handlers to ensure that the stuff you need to happen when the dialog is closed, happens.
I'd create a separate function that's called on the Cancel button click and the beforeClose event. (See JacobM's links above to the close and beforeClose events.)
Here's a super-simple jsFiddle I put together to show how to do this and the impact if you call the function from both the cancel button click and the beforeClose event (and the order that they fire). Ideally, you'd just have $(this).dialog("close"); in your Cancel button function and move $("#termSheetPrinted").html('') call to your extracted function.
A little more explanation to the accepted answer(for all us that need a little more help ;-) ):
say you want to set focus in a field identified by it's id when the user presses the [x]:
...
$("#myDivId").dialog({
resizable: true,
modal: true,
dialogClass: "cssClass",
close: function() {
$("#focusFieldId").focus();
}
});
...
see: https://jquery-ui.googlecode.com/svn/tags/1.8.24/docs/dialog.html#event-close