Menu
i want to open multiple dialog boxes by using the same class on both the button and the content div. The below works but only for the first time.
jQuery('.helpDialog').hide();
jQuery('.helpButton').click(function() {
jQuery(this).next('.helpDialog').dialog({
autoOpen: true,
title: 'Help',
width: 500,
height: 300,
position: [180,10],
draggable: true,
resizable: false,
modal: false
});
return false;
});
we know the reason for this http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/ "the second call is ignored because the dialog has already been instantiated on that element."
But when i fix that problem by trying the code below, the dialog box no longer opens. Can anyone help? Thanks in advance
jQuery('.helpDialog').hide();
jQuery(function() {
jQuery('.helpDialog').dialog({
autoOpen: false,
modal: true,
title: 'Info',
width: 600,
height: 400,
position: [200,0],
draggable: false
});
});
jQuery('.helpButton').click(function() {
jQuery(this).next('.helpDialog').dialog('open');
return false;
});
301
You actually need a different approach here, a non-intuitive one, like this:
jQuery(function($) {
$('.helpButton').each(function() {
$.data(this, 'dialog',
$(this).next('.helpDialog').dialog({
autoOpen: false,
modal: true,
title: 'Info',
width: 600,
height: 400,
position: [200,0],
draggable: false
})
);
}).click(function() {
$.data(this, 'dialog').dialog('open');
return false;
});
});
You can test it out here.
Why must you do this? because .dialog() moves the content it wraps in dialog elements to the end of the <body>, so .next() will no longer find it...by using jQuery.data() we're maintaining a reference to the dialog we want to open.
66
Maybe this code will help you.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="Styles/ui-lightness/jquery-ui-1.7.2.custom.css" />
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#opener1").click(function () {
$("<div id='dialog1' />").dialog(
{
title: 'Basic modal dialog1',
autoOpen: false,
width: 600,
height: 400,
open: function (event, ui) {
}
});
$("#dialog1").dialog('open').show();
return false;
});
$("#opener2").click(function () {
$("<div id='dialog2' />").dialog(
{
title: 'Basic modal dialog2',
autoOpen: false,
width: 600,
height: 400,
open: function (event, ui) {
}
});
$("#dialog2").dialog('open').show();
return false;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<button id="opener1">open the dialog1</button>
<button id="opener2">open the dialog2</button>
</form>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
