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() {
});
Related
Im trying to use dialog() and it's working, but I have to click two times for the dialog text to open. My latest test was adding return false; after jQuery(this).dialog("close");.
jQuery("#divId").on('click', function() {
jQuery("divclass").dialog({
autoOpen: true,
title: "Info",
width: 800,
height: 600,
modal: true,
buttons: {
close: function() {jQuery(this).dialog("close");return false;}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
The definition of the jQuery dialog should be outside the click listener.
also, if you want to open it on click event, you should change the autoOpen to false.
$("#divId").on('click', function() {
$(".divclass").dialog( "open" );
});
$(".divclass").dialog({
autoOpen: false,
title: "Info",
width: 800,
height: 600,
modal: true,
buttons: {
close: function() {$(this).dialog("close");return false;}
}
});
I am calling action method from controller side through iframe.src attributes and it returns partial view but it calls twice what is the reason can any body help me on this
find my code here
$('#testdailog').dialog({
autoOpen: false,
title: 'Split Fax',
height: 'auto',
width: '80%',
position: ['top', 50],
draggable: false,
show: 'blind',
hide: 'blind',
modal: true,
open: function (event, ui) {
var frameSet = document.getElementById("testdailogFrame");
frameSet.src='#Url.Action("TestPage", "Fax")';
},
close: function (event, ui) {
var frameSet = document.getElementById("testdailogFrame");
frameSet.src="about:blank";
});
solved this issue by changing the code of iframe content change instead of src attribute
$('#testdailog').dialog({
autoOpen: false,
title: 'Split Fax',
height: 'auto',
width: '80%',
position: ['top', 50],
draggable: false,
show: 'blind',
hide: 'blind',
modal: true,
open: function (event, ui) {
$.ajax({
url: '#Url.Action("TestPage","Fax")',
type: 'GET',
cache:false,
success: function(data){
var frameSet = document.getElementById("testdailogFrame");
var iframedoc = frameSet.document;
if (frameSet.contentDocument)
iframedoc = frameSet.contentDocument;
else if (frameSet.contentWindow)
iframedoc = frameSet.contentWindow.document;
if (iframedoc){
iframedoc.open();
iframedoc.writeln(data);
iframedoc.close();
}
},
error: function () {
window.location.href = '#Url.Action("Index","Error")';
}
});
},
}
});
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.
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