On my site I've a button that when is clicked open a dialog with a form already populated for send an e-mail. In this form I have a button called "invia" to send mail, the mail are sent correctly, what does not work it is closeing dialog after send e-mail. Here attacched my code:
Thanks in advance for help.
$("#invio_mail").live("click", function() {
if (m=="") //that's to prevent multiple dialog opening
{
$.post("./php/testo_mail_xml.php",
{contratto:contratto, piatta:piatta, testo:"stampa_login"},
function(xml)
{
if ($(xml).find("status").text()==1)
{
$("#ris_dial").load("./schemi/sch_mail.htm");
delay( function() { //that's a function for delay population
scorriDati(xml, "forMail"); //that's function for populate
}, 500);
var dm = {
modal: true,
height: 'auto',
width: 'auto',
title: "<span class='ui-icon ui-icon-info'></span> Invio Mail",
closeOnEscape: false,
buttons: {"Invia": function() {
$.post("./php/mail.php",
{dati:$("#forMail").serialize()},
function(xml)
{
if ($(xml).find("status").text()==1)
{
//var opt={close:true};
//$("#ris_dial").dialog(opt);
$(this).dialog("close"); //this is not wrking code
}
else
$(this).append($(xml).find("errore").text());
},"xml"
);
}
}
};
$("#ris_dial").dialog(dm);
}
else
{
$("#ris_dial").empty().append($(xml).find("errore").text());
$("#ris_dial").dialog(dialogError);
}
},
"xml"
);
m++;
}
});
the context of this changes inside of $.post()
save this before you call post:
var $this = $(this);
and change your call to close to be:
$this.dialog("close")
Related
I have a modal popup just for comfirmation. When 'continue' is clicked it closes and it goes to the controller Action Delete and it returns. But after returning back to the view, the summary message validation div is not being showed which is what I want.
Here is the modal with div code:
<div id="delete-dialog" title="Confirmation">
<p>Are you sure you want to delete this?</p>
</div>
<script type="text/javascript" lang="javascript">
//$(document).ready(function () {
$(function () {
var deleteLinkObj;
$('.delete-link').click(function () {
deleteLinkObj = $(this); //for future use
$('#delete-dialog').dialog('open');
return false; // prevents the default behaviour
});
$('#delete-dialog').dialog({
autoOpen: false,
width: 400,
height: 250,
resizable: false,
modal: true, //Dialog options
buttons: {
"Continue": function () {
$.post(deleteLinkObj[0].href, function (data)
{ //Post to action
if (data == '')
{
}
else
{
}
});
$(this).dialog("close");
},
"Cancel": function ()
{
$(this).dialog("close");
}
}
});
});
//})
</script>
So what i basically want it to do, is going to the controller if 'continue' is clicked, and show the summary message.
So how can I 'stop' the execution of the jquery function after comming from the controller?
I got the modal code from this site
You should use .append of jQuery inside your callback, after the post.
As you did not show any div. I'm assuming the div as
<div id="summary"></div>
This is how you the final dialog is :
$('#delete-dialog').dialog({
autoOpen: false,
width: 400,
height: 250,
resizable: false,
modal: true, //Dialog options
buttons: {
"Continue": function () {
$.post(deleteLinkObj[0].href, function (data)
{ //Post to action
if (data == '')
{
}
else
{
$('#summary').append(data); // this will append the content in data to your div with id as summary
}
});
$(this).dialog("close");
},
"Cancel": function ()
{
$(this).dialog("close");
}
}
});
Hope it helps
I am having a Jquery dialog with two buttons Add and Cancel. User will input few fields and on pressing Add button, I am doing UI modifications and validations. After all the operations are done, I am closing the dialog. But issue is, even though I am closing the dialog after save and other operations, but the dialog is getting closed before the operations gets completed.
Below is my Jquery dialog code,
dlg.dialog({
height:300,
width:600,
modal:true,
autoOpen:true,
title: "Add Property",
closeOnEscape:true,
buttons: {
"Cancel": function() {
$(this).dialog("close");
},
"Create Property": function() {
//Validate Property
// Save Property
$(this).dialog("close");
}
}
}
});
function save() {
$.ajax({
type: 'POST',
url: ServiceUrl,
data: parameter,
success : function(data) {
// Convert the response text to JSON format
var jsonData = eval('(' + data + ')');
if (jsonData.results) {
// success
}
}
});
};
In above code I am executing $(this).dialog("close"); after validate and save function but my dialog is getting closed , before these function finishes. This behavior doesn't happen if I execute line by line by keeping breakpoints in firebug. Please help in resolving and help me in understanding. Thanks in advance.
Since the .ajax() call(s) are asynchronous, the $(this).dialog("close"); does not wait for the .ajax() call to finish. Put the dlg.dialog("close"); inside the success of the .ajax() call after you see that the save/validations were successful.
dlg.dialog({
height:300,
width:600,
modal:true,
autoOpen:true,
title: "Add Property",
closeOnEscape:true,
buttons: {
"Cancel": function() {
$(this).dialog("close");
},
"Create Property": function() {
//Validate Property
// Save Property
$.ajax({
success: function (response) {
//test to see if the response is successful...then
dlg.dialog("close");
},
error: function (xhr, status, error) {
//code for error condition - not sure if $(this).dialog("close"); would be here.
}
})
}
}
}
});
Your logic should look something like:
dlg.dialog({
height:300,
width:600,
modal:true,
autoOpen:true,
title: "Add Property",
closeOnEscape:true,
buttons: {
"Cancel": function() {
$(this).dialog("close");
},
"Create Property": function() {
$.ajax({//Validate request
...
success:function(response){
$.ajax({//Save request
...
success:function(response){
//close the dialog here
}
});
}
});
}
}
}
});
Either you can chain your ajax calls like this, or you can make them asynchronous by passing an async:false option.
I understand the need for a global "save" function, as it eliminates the need to write the same script over and over again.
Try doing something like this:
dlg.dialog({
height: 300,
width: 600,
modal: true,
autoOpen: true,
title: "Add Property",
closeOnEscape: true,
buttons: {
"Cancel": function () {
$(this).dialog("close");
},
"Create Property": function () {
save(true); //!!!
}
}
});
And then:
function save() {
$.ajax({
type: 'POST',
url: ServiceUrl,
data: parameter,
success: function (data) {
// Convert the response text to JSON format
var jsonData = eval('(' + data + ')');
if (jsonData.results) {
//!!!! Then close the dialog
dlg.dialog("close") //!!!!
}
}
});
}
This way, your close function is not called until the AJAX response is received.
EDIT: I would also set the dlg variable and the save() function-name as globals by attaching them to the window object like so:
window.dlg = $("#myDialogElement");
window.save = function () {
//function stuff here
}
This will ensure they're always available.
I want to use a jQuery zClip plugin in jQuery UI dialog button, but I don't know how to adapt in this case. Anyone can help me?
Thank you in advance!
$.ajax({
url: '/music/lyrics/' + hash,
success: function (data) {
data = jQuery.parseJSON(data);
$('#dialog-modal').html(data.lyrics);
$('#dialog:ui-dialog').dialog('destroy');
$('#dialog-modal').dialog({
modal: true,
resizable: false,
title: 'Lyric: ' + data.song,
width: 500,
height: 400,
buttons: {
'Copy' : function () {
// use zClip to copy $('#dialog-modal').text() here
}
}
});
},
error: function (msg) {
alert(msg);
}
});
I would ignore the normal way dialog buttons handle actions, and separately use the way zClip handles actions. Something like this:
$.ajax({
url: '/music/lyrics/' + hash,
success: function (data) {
data = jQuery.parseJSON(data);
$('#dialog-modal').html(data.lyrics);
$('#dialog:ui-dialog').dialog('destroy');
$('#dialog-modal').dialog({
modal: true,
resizable: false,
title: 'Lyric: ' + data.song,
width: 500,
height: 400,
buttons: {
'Copy' : function () { return true; }
}
});
$('#dialog-modal ui-button:contains(Copy)').zclip({
path:'../whatever/ZeroClipboard.swf',
copy:$('#dialog-modal').text()
});
},
error: function (msg) {
alert(msg);
}
});
Assuming you are using jQuery 1.8+, you can specifiy your buttons in a different way to add IDs to them:
$("#mydialog").dialog({
...
buttons : [{
text: "Close",
click: function() {
$(this).dialog("close");
}
},{
text: "Copy to clipboard",
id: "copyButton", // here is your ID
click : function() {
alert("Sorry, copy not supported in your browser, please copy manually.");
}
}]
...
});
//after .dialog("open");
$("#copyButton").zclip({
...
clickAfter: false // dont propagate click: will suppress unsupported warning
...
});
The only issue I have is that it seem you can only mount zclip on visible buttons, so I do the zclip() call inside the handler for the button that opens the dialog
When I began using jQuery a little over a year ago, I needed to load remote content into a pop-up dialog box. After scouring the internet and trying out several suggested methods for doing this, I came upon a function that worked exactly as I needed it to. However, one problem I've never solved is how to reference the dynamic dialog box so it can be closed from an outside function.
Here's the function that creates the dialog box, appends it to the body, and then loads a page into it:
function openDynamicDialog() {
var url = 'mypage.cfm';
var dialog = $('`<div style="display:hidden"></div>`').appendTo('body');
$(dialog).dialog({
autoOpen: true,
title: 'My Title',
resizable: true,
modal: true,
width: 250,
height: 100,
close: function(ev, ui) {
$(this).remove(); // ensures any form variables are reset.
},
buttons: {
"Close": function(){
$(this).dialog("close");
}
}
});
// load remote content
dialog.load(
url,
{},
function (responseText, textStatus, XMLHttpRequest) {
dialog.dialog();
}
);
//prevent the browser from following the link
return false; };
I've considered giving that hidden div a hard-coded id value, but I'm not sure if there are drawbacks to that approach.
Any suggestions would be most appreciated.
I would use a hard-coded id value for the <div> element.
No there shouldn't be any drawback giving it an ID. If you fear of some kind of conflicts then you can give it a class instead, or save a reference to the div object in a global variable.
Well im not sure what the return false is at the end. so if you don't need that, do this:
function openDynamicDialog() {
var url = 'mypage.cfm';
var dialog = $('<div>').css('display','none').appendTo('body');
$(dialog).dialog({
autoOpen: true,
title: 'My Title',
resizable: true,
modal: true,
width: 250,
height: 100,
close: function(ev, ui) {
$(this).remove(); // ensures any form variables are reset.
},
buttons: {
"Close": function() {
$(this).dialog("close");
}
}
});
// load remote content
dialog.load(
url, {}, function(responseText, textStatus, XMLHttpRequest) {
dialog.dialog();
});
return dialog;
}
//call it like this:
var dialog = openDynamicDialog();
//..code
//close it:
dialog.dialog('close');
OR
if you still need that return false, you can do this on the var dialog line of the function:
var dialog = $('<div>', {id: 'dialog_id'}).css('display','none').appendTo('body');
and then reference it from the outside:
var dialog = $('#dialog_id');
I have a application with many dialogs and created a function to open a dialog and also load data into it, so other functions could open a dialog and process the users option.
The problem is when I call openDialog it stops the function that called it. I thought by adding a return value so when a button is clicked the calling function can process the users response.
function customer_crud(op)
{
var formData = $("#customer_details_form").serialize();
var debugData = formData.replace(/&/g,'<br />');
var text = "<p>Customer Function: " + op + "</p><p>" + debugData + "</p>";
if(openDialog('DEBUG', text)){
alert("TRUE");
} else {
alert("FALSE");
}
}
function openDialog(title, text) {
var dialogOpts = {
title: title,
modal: true,
autoOpen: false,
buttons: {
"Delete all items": function() {
$( this ).dialog( "close" );
return true;
},
Cancel: function() {
$( this ).dialog( "close" );
return false
}
}
};
$("#dialog").dialog(dialogOpts);
$("#dialog").html(text).dialog('open');
}
The above code opens the dialog but throws false before anything is selected. If someone could please help me or sugguest a better way I would be greatful.
I plan to pass dialogOpts to the function but placed it in there for testing.
Thanks
I have a single dialog that can be called from multiple buttons. Only one step in the process changes depending on which button is pushed. The result of the dialog goes into a different field depending on the button. So, I set a variable in the click function before calling the dialog. Then, in my dialog, I have a switch statement which checks the variable and adds the value to the appropriate field. You could similarly use a switch statement to do the different functionality depending on which dialog you're calling.
function openDialog(title, text) {
var dialogOpts = {
title: title,
modal: true,
autoOpen: false,
buttons: {
"Delete all items": function() {
switch (item_type) {
case "primary":
...
break;
case "insurance":
...
break;
case "safety":
...
break;
case "sales":
...
break;
}
$(this).dialog('close');
},
Cancel: function() {
$(this).dialog("close");
}
}
};
$("#dialog").dialog(dialogOpts)
.html(text).dialog('open');
}
There is no return value in your openDialog function. Thats why you will always get False.
You can't really have a dialog like this, since it's not synchronous/blocking, a better approach would be to call the desired method when you click the dialog button, like this:
function customer_crud(op)
{
var formData = $("#customer_details_form").serialize();
var debugData = formData.replace(/&/g,'<br />');
var text = "<p>Customer Function: " + op + "</p><p>" + debugData + "</p>";
openDialog('DEBUG', text);
}
function delete_items() {
alert("Deleting!");
}
function openDialog(title, text) {
var dialogOpts = {
title: title,
modal: true,
autoOpen: false,
buttons: {
"Delete all items": function() {
$(this).dialog("close");
delete_items();
},
Cancel: function() {
$(this).dialog("close");
}
}
};
$("#dialog").dialog(dialogOpts)
.html(text).dialog('open');
}