I have defined my dialog on the page load. I can see the dialog and everything seems to be fine so far:
dlg1 = $("#modalHolder");
dlg1 = dlg1.dialog({
width: 300,
height: 150,
modal: true,
autoOpen: false,
resizable: false,
closeOnEscape: false,
draggable: false,
overlay: {
backgroundColor: 'red',
opacity: 0.65
},
open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); }
});
Now I would like to set the close event dynamically, so I tried this:
function setCloseFunction(fun)
{
dlg1.dialog({
close: function(event, ui)
{
alert("2");
fun();
}
});
}
And I call it as:
setCloseFunction(new Function("alert('1')"));
However when closing the dialog, the alert never appears. Any ideas?
You should write the following:
dlg1.bind('dialogclose', function(event, ui) {
alert("2");
fun();
});
setCloseFunction(function() { alert('1'); });
EDIT: To remove the function, you can call unbind('dialogclose').
The syntax used in setCloseFunction is only correct when you're initializing a dialog. If the dialog already exists, as in your case, you normally change options like this:
dlg1.dialog('option', optionName, value);
For events, such as close, you bind a listener to it:
dlg1.bind('dialogclose', function(event, ui) {
...
});
Related
All,
I am trying to set a timeout on my JQuery UI Dialog but have not been able to get it to work. I read several SO posts and the docs on setTimeout() but apparently I am not implementing it correctly.
Below, is the syntax that I am using to set up my timeout, along with the dialog HTML.
Thanks
$.ajax({
type: "POST",
url: '/Dashboard/BackgroundCheck',
data: queryStr,
datatype: 'json',
success: function (data) {
if (data == true) {
$("#dialog-message").attr('title', 'Success!');
$(".js-dialog-content").html('Background Check status saved.');
$("#dialog-message").fadeIn('slow');
$("#dialog-message").dialog({
modal: true,
buttons: {
Ok: function () {
setTimeout(function() {
$(this).dialog("close");
},5000);
}
}
});
}
}
});
}
});
Dialog Box
<div id="dialog-message" title="" style="display:none">
<p>
<span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 50px 0;"></span>
<span class="js-dialog-content"></span>
</p>
</div>
You should define your dialog parameters and you can use autoOpen or open it manually. please attention to this sample:
$('#dialog-message').dialog({
autoOpen: false,
resizable: false,
show: 'fade',
hide: 'fade',
height: 240,
modal: true,
dialogClass: "alert",
close: function (event, ui) { /*do somthing you want*/ },
open: function (event, ui) { setTimeout(function () { $('#dialog-message').dialog("close"); }, 2000) }
}).dialog("open");
As you can see i set the timeout in function related to open parameter.
Good Luck.
I am working on an asp.net page where I have used JQuery UI dialogue. This dialogue has a submit button. When I click the submit button dialogue closes. I want to call a Webmethod on it. If method returns ture, then I want to close it otherwise I want to keep it open with error message shown.
[Edited]
<script>
jQuery(function () {
var dlg = jQuery("#dialog").dialog({
draggable: true,
resizable: true,
show: 'Transfer',
hide: 'Transfer',
width: 320,
autoOpen: false,
minHeight: 10,
minwidth: 10,
beforeClose: function () {
$.ajax({
url: "Default.aspx/GetResult",
success: function (response) {
if (response == true) {
("#dialog").close()
}
else {
alert('asdasdds');
}
}
});
return false; //this will stop dialog box to close
}
});
dlg.parent().appendTo(jQuery("form:first"));
});
</script>
<div id="Result">
Click here for the time.</div>
<div id="dialog" style="text-align: left; display: none;">
<asp:Button ID="btnButton" runat="server" Text="Button" OnClick="btnButton_Click" />
</div>
how to do it. Please suggest.
Regards,
Asif Hameed
You can call webmethod using ajax and then act on it conditionally based on the response. Let your webmethod just return true/false and then you can check this value on the client side.
Execute this code on submit button click and do not close the dialog. Let the success handler decide whether to close it or no.
$.ajax({
url: "urlOfTheService.asmx/methodName",
success: function(response){
if(response == true){
//Code to close the dialog
}
else{
//Show the error message
}
}
});
ajax() reference: http://api.jquery.com/jQuery.ajax/
Update:
Use open event of dialog box to attach the submit handler to form and execute the above code.
jQuery(function () {
var dlg = jQuery("#dialog").dialog({
draggable: true,
resizable: true,
show: 'Transfer',
hide: 'Transfer',
width: 320,
autoOpen: false,
minHeight: 10,
minwidth: 10,
open: function(){
$(this).find('form')
.unbind('submit')
.submit(function(){
var $form = $(this);
$.ajax({
url: "urlOfTheService.asmx/methodName",
success: function(response){
if(response == true){
//Submit the form
$form.unbind('submit')[0].submit();
}
else{
//Show the error message
}
}
});
return false;
});
}
});
dlg.parent().appendTo(jQuery("form:first"));
});
Hello this is the first time I'm using dialog. Here is my code:
$("#dialog").dialog({
autoOpen: false,
closeOnWscape: true,
show: "blind",
width: 800,
buttons: {
close: function () {
alert("close");
$(this).dialog("close");
}
}
});
$('p#pp').click(function () {
//jQuery('#fpoint').dialog();
//$("#dialog").load("Agrandir.aspx").dialog("open");
//var tid = $("#Label1").text.toString();
alert("open");
//$("#fpoint").dialog("open");
$("#dialog").load("Agrandir.aspx).dialog("open");
// window.open("Agrandir.aspx");
})
In the dialog will show a new page, in the page will show an execl. In the parent page there is an dropdownlist, when the button click this.session["id"] will get the value of the selected value, the Agrandir.aspx will use the session. Then click to open a dialog. But the dialog alway shows the same dialog which is created at the first time.
Place this script on your pages to prevent jQuery ajax calls from caching their responses.
$(function() {
$.ajaxSetup({ cache: false });
});
jquery.load() will cache responses without it.
See this for more information.
Not sure why but you are putting the close event in the buttons option list and you misspelled closeOnEscape. Try:
$("#dialog").dialog({
autoOpen: false,
closeOnEscape: true,
show: "blind",
width: 800,
buttons: {
"Close": function () {
alert("close");
$(this).dialog("close");
}
}
});
$("#termSheetPrinted").dialog({
autoOpen: false,
resizable: true,
height: 800,
width: 950,
position: 'center',
title: 'Term Sheet',
close: function(event, ui) {
$(this).dialog("close");
},
modal: true,
buttons: {
"Print": function () {
$("#termSheetPrinted").jqprint();
},
"Cancel": function () {
$("#termSheetPrinted").html('');
$(this).dialog("close");
}
}
});
When I click the 'x' in the upper right hand corner, firefox freezes, crashes, and nothing happens.
Do I define the close function correctly?
you have infinite recursion on close.
try this code to see it.
close: function(event, ui) { alert("close is called");
$(this).dialog("close");
},
You should have only this
close: function(event, ui) {
},
To add to Vivek's answer (which resolved an issue I was having) I noticed that this only happens when the FireBug console is active. I hope that helps someone else who comes upon this problem. Prior versions of Firefox didn't seem to crash with this code.
I'm having trouble in validating a jQuery UI dialog using Jquery Validate upon clicking Save.
Here's my code to create Jquery dialog. It loads the dialog from a target a href URL:
$(document).ready(dialogForms);
function dialogForms() {
$('a.dialog-form').click(function() {
var a = $(this);
$.get(a.attr('href'),function(resp){
var dialog = $('<div>').attr('id','formDialog').html($(resp).find('form:first').parent('div').html());
$('body').append(dialog);
dialog.find(':submit').hide();
dialog.find('#return').hide();
dialog.dialog({
title: a.attr('title') ? a.attr('title') : '',
modal: true,
buttons: {
'Save': function() {submitFormWithAjax($(this).find('form'));},
'Cancel': function() {$(this).dialog('close');}
},
close: function() {$(this).remove();},
width: 'auto'
});
}, 'html');
return false;
});
}
function submitFormWithAjax(form) {
form = $(form);
$.ajax({
beforeSend: function(data) {
//alert("beforesend");
form.validate();
},
url: form.attr('action'),
data: form.serialize(),
type: (form.attr('method')),
dataType: 'text',
error: function(data) {
alert(data);
$('#result').html(data);
},
success: function(data) {
//alert("success");
$('#result').html(data);
setTimeout("reloadPage()", 500);
}
});
return false;
}
The beforeSend is called, but it doesn't seem to call the validate method, which is located on the parent page from which Dialog is called.
$(document).ready(function() {
$("#event_form").validate({
rules: {
Name: {
required: true
},
Category: {
required: true
}
},
messages: {
Name: "Please enter an event name",
Category: "Please choose a category"
},
submitHandler: function(form) {
alert("validated");
// $('#loading_1').show();
// $('#proceed_c').hide();
// $(form).ajaxSubmit();
// //form.submit();
},
errorPlacement: function(error, element) {
error.appendTo(element.next(".status"));
}
});
}
Is the problem with the beforeSend within submitFormWithAjax function, the location of $("#event_form").validate or the submitHandler: function(form) within it? Any help will be greatly appreciated.
When you initialize the jQueryUI dialog, it modifies the DOM, the whole dialog is taken out of it's location in the page and inserted right before the </body> tag. You can see this with Firebug. This causes a problem for Validate, because now the form is empty. To solve this, on the dialog's open event, append it to the form. It sounds really wacky, but trust me, it works :)
dialog.dialog({
title: a.attr('title') ? a.attr('title') : '',
modal: true,
buttons: {
'Save': function() {submitFormWithAjax($(this).find('form'));},
'Cancel': function() {$(this).dialog('close');}
},
close: function() {$(this).remove();},
open: function(){
$(this).parent().appendTo($('#event_form'));
},
width: 'auto'
});
Edit:
<form id='event_form'>
<div id="dialog" title="DialogTitle">
</div>
</form>
Took a slightly different approach to this. I needed to reuse my modal form so I append it once jquery "creates" the modal:
$("#mdl_Subject").dialog({
autoOpen: false,
show: "drop",
hide: "drop",
modal: true,
create: function () {
$(this).parent().appendTo($('#aspnetForm'));
}
});