I using jquery ui dialog with dynamic height. When it opens it’s centered, but when it loads the content it’s expanding toward the bottom of the page.
Here is my function:
$(this.document).ready(function () {
$(".openDialog").live("click", function (e) {
e.preventDefault();
$("<div></div>")
.addClass("dialog")
.attr("id", $(this)
.attr("dialog-id"))
.dialog({
autoOpen: false,
title: $(this).attr("dialog-title"),
close: function () { $(this).remove() },
modal: true,
width: $(this).attr("dialog-width"),
heith: 'auto',
resizable: false,
draggable: false,
show: 'scale',
hide: 'puff',
position: ['center', 'middle']
})
.load(this.href).dialog("open");
});
$(".close").live("click", function (e) {
e.preventDefault();
$(this).closest(".dialog").dialog("close");
});
});
I was able to fix this by setting autoOpen:false and creating the dialog content with my ajax call in the create method. Once that returned, and the content created, I called open on the dialog. Works great!
Above ans not work for me.
$(document).live("ajaxStop", function (e) {
$("#myDiagDiv").dialog("option", "position", "center");
});
Related
So I have these two dialog() calls:
$('#dialog').dialog();
$('#dialog').dialog('option', 'width', 500);
Is there a way to consolidate that down into one? I tried this without success:
$('#dialog').dialog({
option: [{ width: 500 }]
});
Here is an example from a project I am working on.
$( "#username_availability_dialog" ).dialog({
closeOnEscape: false,
resizable: false,
height:120,
width: "48%",
modal: true,
buttons: {
"OK": function() {
$( this ).dialog( "close" );
$('#dealName').val('');
$("#dealsForm [name='dealName']").focus();
return false;
},
Cancel: function() {
$( this ).dialog( "close" );
window.location.reload();
}
}
});
You don't need the square brackets or the option method when initializing the dialog widget using an object to store the options.
$('#dialog').dialog({
width: 500
});
The format you were using to set options actually REQUIRES that the widget be initialized beforehand.
jQuery-UI Dialog "width" option
Just a little preface... I am fairly new to jQuery so if something looks wrong or redundant please feel free to offer any helpful suggestions.
Now for the issue. I have 2 modals that are initiated from 2 separate links on the page.
The first modal was fairly problem free. It is a simple form that posts back to the same page. If you are wondering what the items in the "close:" section are, they are form fields that I want to clear the values on when the dialog is closed.
Once I added the second one I have had problems. This modal calls a coldfusion page into a modal to display pictures. The problems occur after opening up the second one. I can not close the second modal from the "close" button. I get the following error.
Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'
I have to close it from the "x" in the upper right hand corner of the modal. After I close it, I get an error when trying to open up the first on.
Error: cannot call methods on dialog prior to initialization; attempted to call method 'open'
Here is the code for it.
$(document).ready(function() {
$(".dig").click(function() {
//based on which we click, get the current values
var cItemName = $("#checklistItemName").attr( "title");
var c2id = $("#check2id").attr( "title");
$("#ItemName").html(cItemName);
$("#ItemID").html(c2id);
$("#objCheckItemName").val(cItemName);
$("#objCheck2ID").val(c2id);
console.log(cItemName);
console.log(c2id);
});
$( "#image-form" ).dialog({
autoOpen: false,
height: 450,
width: 650,
modal: true,
buttons: {
"Submit": function() {
$('#mForm').submit();
return true;
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
$('#defaultSectionName')
.val('');
$('#defaultSectionDesc_hidden')
.val('');
$('#Photo')
.val('');
$('#objCheck2ID')
.val('');
$('#Check21')
.val('');
},
zIndex: 500
});
The next piece of code is where I believe the problems are occurring.
$( "#image_trigger" )
.click(function() {
$( "#image-form" ).dialog( "open" );
});
var dlg=$('#register').dialog({
title: 'Case Pictures',
resizable: true,
autoOpen:false,
modal: true,
hide: 'fade',
width:650,
height:450,
buttons: {
close: function() {
$( this ).dialog( "close" );
}
},
zIndex: 500
});
$('#reg_link').click(function(e) {
e.preventDefault();
var linkurl=('assets/includes/modalPictures.cfm' + '?'
+ 'id=' + $("#objCheck2ID").val()
);
dlg.load(linkurl, function(){
dlg.dialog('open');
});
});
jQuery UI: 1.10.1
jQuery: 1.9.1
Server Side: Coldfusion
The HTML is pretty extensive. If you need to see any part of it please let me know. Thanks for your help!
Upper case?
Close: function() {
You have to initialize your jquery dialog before calling the open function.
<script type="text/javascript">
$(document).ready(function () {
initializeDialog();
});
</script>
And change your js file to have the dialog code in initializeDialog() function.
function initializeDialog(){
$("#your-dialog-id").dialog({
autoOpen: false,
buttons: {
"Cancel": function() {
$(this).dialog("close");
}
},
modal: true,
resizable: false,
width: 600px,
height: 400px
});
}
Thanks #bpjoshi
I am playing with Jquery UI
I create a dialog on the fly from a DIV, i gave this DIV and ID and a button to call a closeDialog Function
It works fine as shown on this example
http://jsbin.com/ubovej
The problem I am having, is that if I d load a page THAT contains the BUTTON. The button will not work
as in:
$("<div id='mydialog1'>").dialog({
autoOpen: false,
modal: false,
width: 740,
height: 840,
title: 'Dialog1 = dynamic',
open: function(e, ui){
$(this).load(myUrl);
}
});
If this is the button Click Event code then
autoOpen: false,
should be
autoOpen: true,
EDIT: If you don't want it opened til you click the button then:
Do this when you want the dialog created.
var $dialog = $("<div id='mydialog1'>").dialog({
autoOpen: false,
modal: false,
width: 740,
height: 840,
title: 'Dialog1 = dynamic',
open: function(e, ui){
$(this).load(myUrl);
}
});
and do this after they click the button (only after the dialog is created)
$("button_selector").click(function () {
$dialog.dialog("open");
});
EDIT: Try changing
function closeDialog1(){
alert('closing Dialog1');
window.parent.$('#mydialog1').dialog('close');
return false;
}
to
function closeDialog1(){
alert('closing Dialog1');
$('#mydialog1').dialog('close');
return false;
}
Or a better way to do this might be
$("<div id='mydialog1'>").dialog({
autoOpen: false,
modal: false,
width: 740,
height: 840,
title: 'Dialog1 = dynamic',
open: function(e, ui){
$(this).load('dialogtest1a.html');
},
buttons: {
"Close" : function () {
$(this).dialog("close");
}
}
});
Does the button that closes the dialog HAVE TO be in the page you are loading?
Can anyone show me how to set it to auto center on browser resize? I know there are many answered questions regarding this matter, but I'm a total amateur. I need someone to rewrite the following code for me, please.
Thanks.
<script type="text/javascript">
function openDialog(url) {
$("<div class='popupDialog'>Loading...</div>")
.dialog({
autoOpen: true,
closeOnEscape: true,
width: '900',
height: '800',
modal: true,
title: 'Bonus Features'
}).bind('dialogclose', function() {
jdialog.dialog('destroy');
}).load(url, function() {
$(this).dialog("option", "position", ['center', 'center'] );
});
}
</script>
I'm not very familiar with jdialog or whatever plugin you're using, however, you can bind onto the window resize event.
$(window).bind('resize.dialog', function(e) {
/* resize dialog */
});
If there's no method to resize the "jdialog" you could just close and reopen the dialog every time, but that seems undesirable.
you can add a window resize event to reset the position to center, center
example: http://jsfiddle.net/pxfunc/byknH/
$(window).resize(function() {
$('.popupDialog').dialog({position: ['center', 'center']});
});
I added this as part of your other question, but here it is again...
<script type="text/javascript">
function openDialog(url) {
$("<div class='popupDialog'>Loading...</div>")
.dialog({
autoOpen: true,
closeOnEscape: true,
height: '1012',
modal: true,
position: ['center', 'center'],
title: 'About Ricky',
width: 690
}).bind('dialogclose', function() {
jdialog.dialog('destroy');
}).load(url, function() {
$(this).dialog("option", "position", ['center', 'center'] );
});
}
// This part does the center on browser resize...
$(window).resize(function() {
$(".ui-dialog-content").dialog("option", "position", ['center', 'center']);
});
</script>
I have this link to close a jquery UI dialog box:
Close this window
And here is the jQuery:
$("#login-link").click(function() {
$("#login-box").dialog({
close: function(ev, ui) {
$(this).hide();
},
draggable: false,
height: 300,
modal: true,
position: ["center","center"],
resizable: false,
width: 1020
});
});
$("#close-login-box").click(function() {
$("#login-box").dialog("close");
});
Why doesn't the dialog box close when I click the link?
You don't need
close: function(ev, ui) {
$(this).hide();
},
Because $('#login-box').dialog('close'); will hide the dialog for you, there's no need to specify it yourself.