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.
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
i have some problem with ie9 and jquery ui but still cant find solution please help me
When i click Detail dialog must be open and it works on ie7,ie8,FF,Chrome but don't in ie9
$(function() {
var popup = $("#popup"),
allFields = $([]).add(popup);
$("#dialog-form").dialog({
autoOpen: false,
height: 800,
width: 1200,
modal: true,
buttons: {},
close: function() {
allFields.val("").removeClass("ui-state-error");
}
});
});
function dialogOpen(id) {
$('#dialog-form').dialog('open');
}
<div id="pageopen" onclick="dialogOpen('dialog-form')">
<div id="detail" style="text-decoration:underline;">Detail</div>
</div>
<div id="dialog-form" title="Detail"></div>
Add the following code in document.ready. You trying to open the dialog before it is being created.
$(document).ready(function(){
$("#dialog-form").dialog({
autoOpen: false,
height: 800,
width: 1200,
modal: true,
buttons: {},
close: function() {
allFields.val("").removeClass("ui-state-error");
}
});
});
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");
});
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?
I have the following JS:
$('#listeditdialog').dialog('open');
Which opens the following dialog:
$('#listeditdialog').dialog({
autoOpen: false,
resizable: false,
position: ['center',150],
width: 450,
open: function(event, ui) {
$("#listeditdialog").load("/projects/view/tasks/ajax/?listid=" + XXXX);
},
close: function(event, ui) {
$("#listeditdialog").html('<p id="loading"> </p>');
}
});
My Question is when I use the dialog open function in another JS function, how can I pass a listID variable which I would get fom the click even bind that fired the dialog open func.
Thanks!
If I understand you right, you want to have data that you have access to when you call $('#listeditdialog').dialog('open')
that's available when the open event fires?
Something like this could help:
// where dialog is opened
$('#listeditdialog').data('listID', listIDVarOrSimilar); //assign the ID for later use
$('#listeditdialog').dialog('open')
// dialog definition
$('#listeditdialog').dialog({
autoOpen: false,
resizable: false,
position: ['center',150],
width: 450,
open: function(event, ui) {
var $led = $("#listeditdialog");
$led.load("/projects/view/tasks/ajax/?listid=" + $led.data('listID'); //use the previously saved id
},
close: function(event, ui) {
$("#listeditdialog").html('<p id="loading"> </p>');
}
});`
http://api.jquery.com/data/