We Keep Coding

Dialog is not draggable because of draggable background?

In my project I've a draggable page and on top of it I've popped a dialog and made it draggable. But somehow the dialog is not dragging. I dont know why it is happening.
dragging symbol is shown but the dialog is not moving why? Can you explain how to make a dialog draggable? Please do Help
This is dialog code:
$dlgLibrary = $('<div style="overflow-y:hidden;color:#FBFBEF"" id="eBLibrary"></div>')
.dialog({
autoOpen: false,
title: 'Browse & Select',
maxWidth:1000,
maxHeight: 600,
width: 800,
height: 600,
dialogClass: "alertDialog",
modal: true,
closeOnEscape: true,
canMaximize:true,
draggable: true,
resizeHt: 0,
resizeWd: 0,
resizeStop: function(event, ui) {
if (resizeHt== 0 && resizeWd== 0) {
resizeHt = $dlgLibrary.dialog( "option", "height" );
resizeWd = $dlgLibrary.dialog( "option", "width" );
};
$('#eBLibrary-Show').width(Number(resizeWd-(resizeWd*16/100)));$('#eBLibrary-Show').height(Number(resizeHt-(resizeHt*35/100)));
resizeHt= 0;
resizeWd= 0;
},
open: function(event, ui) {
}
$.ajax({ url: './Library.html',
success : function(data) {
},
buttons: libButtons,
close: function() {
});

jTable raise formSubmitting with custom jQueryUI Modal

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.

Why does jQuery dialog shrink while fading out?

$("#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" );
}
}
});

jQuery UI Dialog Code Help

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']);
});

Redirect jquery ui dialog on close

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