$(function () {
$('#modalDlg2').live("click", function (event) {
event.preventDefault();
loadDialog(event, "/User/Create");
});
function loadDialog(event, target) {
var $dialog = $('<div></div>');
$dialog.empty();
$dialog
.load(target)
.dialog({
title:"Novo utilizador",
modal: true,
autoOpen: false,
width: 600,
show:'fade',
hide:'fade',
minHeight: 400,
resizable: false
});
$dialog.dialog( "option", "buttons", {
"Cancelar": function() {
$(this).dialog("close");
$(this).empty();
} });
$dialog.dialog('open');
}
})
I have a problem with my close button "Cancelar" it should close the modal dialog and then empty it, but it seems that $(this).dialog("close") does not work, and .empty() does.
I've looked everywere for the solution of my problem. Could anyone help me with this?
try this:
$dialog.dialog( "option", "buttons", {
"Cancelar": function() {
$dialog.dialog("close");
$(this).empty();
}
});
$dialog.dialog('open');
or
$dialog.dialog( "option", "buttons", {
"Cancelar": $.proxy(function() {
$(this).dialog("close");
$(this).empty();
},this)
});
$dialog.dialog('open');
I would try putting this in a callback function for the load:
$(function() {
$('#modalDlg2').on("click", function(event) {
event.preventDefault();
loadDialog(event, "/User/Create");
});
function loadDialog(event, target) {
var $dialog = $('<div></div>');
$dialog.empty();
$dialog.load(target, function() {
$dialog.dialog({
title: "Novo utilizador",
modal: true,
autoOpen: false,
width: 600,
show: 'fade',
hide: 'fade',
minHeight: 400,
resizable: false
});
$dialog.dialog("option", "buttons", {
"Cancelar": function() {
$(this).dialog("close");
$(this).empty();
}
});
$dialog.dialog('open');
});
});
Try the following code:
$dialog.dialog("option", "buttons", { "Cancelar": function() { $(this).remove(); } });
Related
The dialog is displayed and works perfectly. The top right "X" Close button properly dismisses the dialog, but the OK button does nothing.
(I'm using jquery 1.9.1)
function showFollowProjectInDialog(followurl){
$.ajax({
url: followurl,
success: function(data) {
$("#TFdialog").html(data).dialog({
resizable: true,
height: 600,
width: 700,
modal:true,
buttons: {
Ok: function() {$( "#TFdialog" ).dialog( "close" );}
},
}).dialog('open');
}
});
}
I've also tried it without the comma following the button like:
buttons: {
Ok: function() {$( "#TFdialog" ).dialog( "close" );}
}
}).dialog('open');
And I've tried these:
buttons: [{
text: "Ok",
Click : function () {
$("#TFdialog").dialog("close");
}
}]
and:
buttons: [{
Ok: function() {
$("#TFdialog").dialog("close");
}
}]
and I've tried replacing the "#TFdialog" with 'this' like:
$(this).dialog("close");
try doing
buttons: [
{
text: "Ok",
click: function() {
$( this ).dialog( 'close' );
// your code goes here
}
}
]
Assumption is you use jQuery UI Reference https://jqueryui.com/dialog/#modal-form
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
You can also use the dialog as an object:
var myDialog;
myDialog = $("#TFdialog").html(data).dialog({
resizable: true,
autoOpen: false,// added this
height: 600,
width: 700,
modal:true,
buttons: {
Ok: function() {
myDialog.dialog( "close" );
},
"Close this Soon" : DelayClose,
}
});
myDialog.dialog('open');
function DelayClose(){
setTimeout(function() {
myDialog.dialog( "close" );
}, 500 );
}
Example for why to use an object for yours:
var myDialog;
myDialog = $("#TFdialog").dialog({
resizable: true,
autoOpen: false,// added this
height: 600,
width: 700,
modal:true,
buttons: {
Ok: function() {
myDialog.dialog( "close" );
}
}
});
function showFollowProjectInDialog(followurl){
$.ajax({
url: followurl
}).done(function(data){
$("#TFdialog").html(data);
myDialog.dialog('open');
});
}
I am not being able to raise the formSubmitting event when I am submitting a custom jQueryUI modal using jTable. Following is the jqeuryui modal code:
$("#editDialog").dialog({
height: 600,
width: 500,
autoOpen: false,
modal: true,
show: {
effect: "fade",
duration: 250
},
hide: {
effect: "fade",
duration: 250
},
buttons: {
Cancel: function () {
$(this).dialog("close");
},
Save: function () {
$(this).find("form").submit();
$(this).dialog('close');
}
},
close: function () {
//allFields.val("").removeClass("ui-state-error");
}
});
Any suggestion on how to achieve this is highly appreciated.
Could not. Ended up showing the custom modal on own bound click event.
$("#dialog").dialog({
resizable: false,
height:140,
modal: true,
hide: {effect: "fadeOut", duration: 5000},
buttons: {
Save: function() {
alert("Saved");
$("#dialog").dialog( "close" );
},
Cancel: function() {
$("#dialog").dialog( "close" );
}
}
});
I'm using Chrome. Here's a demo.
When I close the dialog, it hides, but also shrinks.
I didn't tell it to shrink! Why does it do that?
Using fade instead of fadeOut will solve the issue.
Check this: http://jsbin.com/alafez/4/edit#preview
Because fadeIn and fadeOut are not valid values for the show and hide options. If you remove effect: "fadeOut", the result will be same. The valid option is fade.
$("#dialog").dialog({
resizable: false,
height:140,
modal: true,
hide: {effect: "fade", duration: 5000},
buttons: {
Save: function() {
alert("Saved");
$("#dialog").dialog( "close" );
},
Cancel: function() {
$("#dialog").dialog( "close" );
}
}
});
Okay, don't laugh, but my friend gave me a fix to a jQuery UI code before I asked for another fix here, and now I have no idea how to combine the two. I'm a total n00b so please help me out here. I tried, but keep getting a syntax error?
I need to merge this (I think it goes right after title):
beforeClose: function(){ $(this).remove(); }
Into this:
function openDialog(url) {
$("<div class='popupDialog'>Loading...</div>")
.dialog({
autoOpen: false,
closeOnEscape: true,
width: '900',
height: 'auto',
modal: true,
title: 'Bonus Features'
}).bind('dialogclose', function() {
jdialog.dialog('destroy');
}).load(url, function() {
$(this).dialog("option", "position", ['center', 'center'] ).bind('dialogopen', function() {
adjustJQueryDialogOverlay();
});
$(this).dialog("open");
});
}
$(window).resize(function() {
$(".ui-dialog-content").dialog("option", "position", ['center', 'center']);
});
Can anyone please help? Thanks.
function openDialog(url) {
$("<div class='popupDialog'>Loading...</div>")
.dialog({
autoOpen: false,
closeOnEscape: true,
width: '900',
height: 'auto',
modal: true,
title: 'Bonus Features', //don't forget the comma
beforeClose: function(){ $(this).remove(); } //placed here
}).bind('dialogclose', function() {
jdialog.dialog('destroy');
}).load(url, function() {
$(this).dialog("option", "position", ['center', 'center'] ).bind('dialogopen', function() {
adjustJQueryDialogOverlay();
});
$(this).dialog("open");
});
}
$(window).resize(function() {
$(".ui-dialog-content").dialog("option", "position", ['center', 'center']);
});
I tried different ways to do this but i cant get it work. this is the code:
$.ui.dialog.defaults.bgiframe = true;
$(function() {
$("#category_edit_dialog").dialog({
width: 960,
hide: 'slide',
position: 'top',
show: 'slide',
close: function(event, ui) { redirect here? how? }
});
});
});
Thanks dekomote for helping me. At his advice i solved the problem: here is the full working code:
$.ui.dialog.defaults.bgiframe = true;
$(function() {
$("#category_edit_dialog").dialog({
width: 960,
hide: 'slide',
position: 'top',
show: 'slide',
close: function(event, ui) { location.href = 'url here' }
});
});
$.ui.dialog.defaults.bgiframe = true;
$(function() {
$("#category_edit_dialog").dialog({
width: 960,
hide: 'slide',
position: 'top',
show: 'slide',
close: function(event, ui) { window.location.href = "page.html"; }
});
});
});
where "page.html" is the page you wish to redirect to on close