I have a button named submit, when i click this button i got a confirmation box. If i click the Ok button on the confirmation box i got a dialog box. But if i cancel this dialog box and try to do this once again i was not able to see the dialog box.
HTML looks like this
<input type="submit" id="btnSubmit" class="button" value="<%= OsflAdminResources.Text_Users_Permanently_Delete_Selected_Users %>"
onclick="return validate();" />
jQuery is :-
function validate()
{
if(confirm("<%= OsflAdminResources.Text_Delete_Warning_Popup_Message %>"))
{
dialog();
return false;
}
else
开发者_C百科{
return false;
}
}
function dialog()
{
$("#dialogToShow").dialog({
title: "Confirm Password",
closeText: "Cancel",
show:"slide",
resizable: false,
modal: true,
open: function(ev, ui){
$('.ui-widget-overlay').stop().animate({"opacity": "0.40"}, 1480);
},
close: function(ev, ui){
$('.ui-widget-overlay').stop().animate({"opacity": "0"}, 1480);
}
});
return false;
}
Can any body help me in solving this?
The problem is, you try to reinitialize the dialog a 2nd time. This is not possible. Assign your dialog to a variable and use this reference for opening the dialog. Also be sure to set autoOpen: false
.
Try the following:
var $dialog = null;
function dialog()
{
// create dialog if not done already
if (!$dialog) {
$dialog = $("#dialogToShow").dialog({
title: "Confirm Password",
closeText: "Cancel",
show:"slide",
resizable: false,
modal: true,
autoOpen: false, // this is important! prevent auto open
open: function(ev, ui){
$('.ui-widget-overlay').stop().animate({"opacity": "0.40"}, 1480);
},
close: function(ev, ui){
$('.ui-widget-overlay').stop().animate({"opacity": "0"}, 1480);
}
});
}
// use the reference to the dialog and call open.
$dialog.dialog('open');
return false;
}
Add $('#dialogToShow').dialog('open'); before return false; statement in your function like,
function dialog()
{
$("#dialogToShow").dialog({
title: "Confirm Password",
closeText: "Cancel",
show:"slide",
resizable: false,
modal: true,
open: function(ev, ui){
$('.ui-widget-overlay').stop().animate({"opacity": "0.40"}, 1480);
},
close: function(ev, ui){
$('.ui-widget-overlay').stop().animate({"opacity": "0"}, 1480);
}
});
$('#dialogToShow').dialog('open');
return false;
}
Nothing wrong with the answers above, here's an alternative if you have multiple elements producing dialogs on the same page
$(function (){
$('a.choice-edit-link').click( function(){
$dis = $(this);
if ( typeof $dis.data('dialogEl') == "undefined" ){
var dialogEl= $dis.siblings('div.choice-options').dialog({'modal':true});
$dis.data('dialogEl',dialogEl);
}
else {
$dis.data('dialogEl').dialog('open');
}
});
});
It uses the .data() jquery function to set and retrieve the dialog element, and similarily to the examples above, creates it if it doesn't exist or opens it again if it does.
精彩评论