Autoclose jquery modal dialog after showing an alert box - jquery-ui

I am invoking a jquery modal dialog in which I have a save button. The save button in turn makes an ajax call and on success an alert box is displayed "Data Saved ! " with an OK button.So far good.
Now after the "Data Saved" alert box is closed, I want to automatically close the previously invoked modal dialog also.Has anyone done anything similar to this ?
$( "#addFriendButton").click(function() {
$( "#addNewFriend" ).dialog({
title: 'Add a new friend.',
height:'auto',
width:'auto',
modal: true
});
});
//end addFriendButton
$( "#saveNewFriendButton").click(function() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "/api/bb/apiV1/addFriend",
data: formToJSON(),
dataType: "json",
success: function(responseDTO){
displayOKAlertBox(responseDTO.responseMessage);
}
});
});
function displayOKAlertBox(message){
$("#alertMsg").html(message);
$( "#alertbox" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
}

Try the following:
$("#alertbox").dialog({
modal: true,
buttons: {
Ok: function() {
$('.ui-dialog').dialog('close');
}
}
});

Try the following
$( "#saveNewFriendButton").click(function() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "/api/bb/apiV1/addFriend",
data: formToJSON(),
dataType: "json",
success: function(responseDTO){
displayOKAlertBox(responseDTO.responseMessage);
$( "#alertbox" ).dialog("close");
}
});
});
I think that would do it, but maybe I'm mistaken !

Related

JQUERYUI: Modal buttons dont work when I close and open

I am creating a dialog in javascript and for some reason when I first open the dialog the buttons works fine. But when I close and open it the buttons dont work. The edit click function doesnt work the second time when I repopen the dialog
var newDiv = $(document.createElement('div'));
$(newDiv).dialog({
title: "New Dialog",
modal: true,
autoOpen: true,
width: 650,
height: 440,
resizable: false,
draggable: true,
buttons: [
{
html: "<b>Edit</font></b>",
icons: {
primary: "ui-icon-check"
},
click: function() {
$('#notetext').prop("disabled", false);
$('#uibtnSubmit').button("enable");
//$('#uibtnSubmit').prop("disabled", false);
//$("#uibtnSubmit").button().attr('disabled', false).removeClass('ui-state-disabled');
}},
{
html: "<b><font color='green'>Submit</font></b>",
disabled:true,
id: "uibtnSubmit",
icons: {
primary: "ui-icon-script"
},
click: function() {
var editnotes = $('#notetext').val();
//update the notes in the database against the user.
$.ajax({
type: "post",
cache: false,
async: false,
url:"url",
datatype: "json",
data: data,
success: function(data){
$(newDiv).dialog('close');
},
error: function(jqXHR, statusText, err){
//console.log(err);
}
});
}},
{
html: "<b><font color='red'>Exit</font></b>",
icons: {
primary: "ui-icon-cancel"
},
click: function() {
$(this).dialog('close');
}
}
]
});
I tried to use different properties like removeClass, attr but they arent working.
I solved the issue by reloading the page once Exit or submit value was clicked. That way when the dialog box was reloaded it was initialized.

dialog is showing the same result

i have this dialog to show the file name when you click on the icon. When i first click it the dialog will be empty then i close it and reopen the dialog will show the name (via ajax). Then when i close the dialog again and click on a different file icon its showing the first file name. then when i close it again and reopen it, it will show the correct filename. Why is it doing this?
Here is my javascript
$('.edit').click(function(e){
e.preventDefault();
var auth = $(this).attr('id');
$.ajax({
type: 'POST',
url: 'ajax/edit_filename.php',
data: {auth:auth},
success: function(result){
filename = result;
}
});
$( "#dialog" ).dialog({
modal: true,
resizable: false,
title: 'Edit file name',
buttons: {
"Close": function() {
$(this).dialog("destroy");
$(this).dialog("cancel");
}
}
});
$('.ui-dialog-content').html('<input type="text" value="'+filename+'"/>');
});
i worked out what i did wrong, i was calling the dialog before i got the ajax response
here is the correct javascript incase this happens to you
$('.edit').click(function(e){
e.preventDefault();
var auth = $(this).attr('id');
$.ajax({
type: 'POST',
url: 'ajax/edit_filename.php',
data: {auth:auth},
cache: false,
success: function(result){
filename = result;
}
});
$.post( "ajax/edit_filename.php", { auth:auth })
.done(function( data ) {
$( "#dialog" ).dialog({
modal: true,
resizable: false,
title: 'Edit file name',
buttons: {
"Close": function() {
$(this).dialog("destroy");
$(this).dialog("cancel");
}
}
});
$('.ui-dialog-content').html('<input type="text" value="'+data+'"/>');
});
});

Jquery UI jConfirm dialog not showing up on gridComplete of jqgrid

I am using jConfirm dialog for confirmation in jqgrid. All i want is when the gridComplete triggers it should popup a jConfirm dialog with Ok and cancel buttons when i hit ok it should setSeletion of Rows in jqgrid. My code is as follows:
// My ajax call in gridComplete function in jqgrid
function listSelectedUsers(data) {
$.ajax({
cache: false,
async: true,
type: "POST",
url: urlPath,
data: { countryID: countryID},
dataType: "json",
success: function(data){
jConfirm(data, 'JqGrid Popup', function(confirmation) {
if (confirmation) {
}
});
},
error: function(data) {
}
});
}
//jqgrid code
// on gridComplete function call, does not show up jConfirm dialog popup.
gridComplete: function() {
listSelectedUsers(data);
},
Please suggest me the solution ASAP.
Thanks in advance.

reopen jquery ui dialog, empty and refresh

This jquery ui dialog is filled with html and form values from an ajax call (works). I want to close or submit it and then reopen and reuse it just the same. I can close and reopen fine but it has the old values still there and then the new ones are added. It keeps adding the html values after each close and reopen. There are many questions about this on SO but I don't see a clear answer. I have tried close, empty, destroy but the combination isn't working the way I need it. Any ideas?
$("#StoreForm").dialog({
autoOpen:false,
width:500,
height:900,
modal:true,
buttons: {
OK: function() {
$('#StoreForm').dialog('close');
$(this).dialog('hide');
$(this).dialog('empty');
},
'Save': function() {
$(this).dialog('empty');
}
}
});
//additional code to click and open the dialog
$(".sel").unbind('click');
$(".sel").on("click", function(e){
e.preventDefault();
$("#StoreForm").dialog('open');
var valueSelected = $(this).closest('tr').children('td.item').text();
$.ajax({
url: 'query/categories.cfc',
dataType: 'json',
cache: false,
data: {method: 'getProductInfo',
queryFormat: 'column',
returnFormat: 'JSON',
productID: valueSelected
},
success: function(response, status, options){
$("#PROD_SUPER_ID").val(response.DATA.PROD_SUPER_ID[0]);
$("#color").val(response.DATA.COLOR_ATTRIB);
$("#SIZE_ATTRIB").val(response.DATA.SIZE_ATTRIB);
$("#price").val(response.DATA.PRICE);
var w = [];
w.push("<p>", response.DATA.ICON[0], "</p>", "<p>",
response.DATA.FULL_DESCRIPTION [0], "</p>")
$("#StoreForm").prepend(w.join(""));
What I found was you can close the dialog and empty the html and it will clear this type of dialog set-up. For reopening I nested the 2nd ajax call in the success response of the initial one..
//set up dialog with options
$("#StoreForm").dialog({
autoOpen: false,
width: 500,
height: 500,
modal: true,
buttons: {
Cancel: function(){
$('#StoreForm').dialog('close');
$('#StoreForm').html("");
},
//pop-up individual items
"Add to Cart": function(){
$.ajax({
url: $("#storeCart").attr('action'),
data: $("#storeCart").serializeArray(),
type: 'POST',
success: function(response){
var name = $( "#name" ),
email = $( "#email" ),
password = $( "#password" ),
allFields = $( [] ).add( name ).add( email ).add( password ),
tips = $( ".validateTips" );
if you have any questions please respond. Thanks

Close FancyBox Before AJAX Post

I have following code.I show user a fancybox and they click Submit on Form I close fancybox and show them processing on page and do an AJAX post using JQuery. But some how fancybox gets stays open until AJAX form post is completed.Which creates confusion for user .
function BeginProcess(){
$.fancybox.close();
$("#imgProcess").attr("src", "/admin/images/loading_animation.gif");
$('#imgProcess').show();
PostAJAXForm();
}
function PostForm(FormData){
$.ajax({
type: "POST",
url: "process_image.jsp",
data: FormData,
contentType: "application/x-www-form-urlencoded",
async: false,
success: function(response) {
response = $.trim(response);
$('#imgProcess').delay(10000).hide();
return response;
},
error: function(xhr, ajaxOptions, thrownError) {
alert("There was an error. Please undo image and perform action again. " );
$('#lblProcess').delay(5000).hide();
return;
}
});
}
Here's a snippet:
var params = $(this).serialize();
var self = this;
$.ajax({
type: 'POST',
url: self.action,
data: params,
beforeSend: function(){
alert('Closing');
$.fancybox.close();
},
success: function(data){
alert('Finished processing form');
return false;
},
dataType: 'json'
});
Sorry if something is messed up or left out from that snippet - but you should get the idea.
You need to add $.fancybox.close() in Jquery' Ajax's beforeSend function.
http://api.jquery.com/jQuery.ajax/
http://api.jquery.com/ajaxSend/
This should help you out too
http://snipplr.com/view/47979/close-a-fancybox-when-you-submit-a-form-with-ajax

Resources