Add a alert box with "save" or "no" - javascript

My web page deletes a row in a table and save it automatically in database. I need a messageBox after clicking on delete button, with two buttons "save" and "No".
Delete function on jsp is below:
function deleteFileRow(rowCount)
{
$.ajax(
{
url: 'deleteRow.htm?rowIndex='+rowCount+"&action=delete&id="+${id},
success: function(data)
{
document.location.reload();
}
});
}
Please help me in doing this.

Use jquery confirm box to add yes or no.
ConfirmDialog('Are you sure');
function ConfirmDialog(message){
$('<div></div>').appendTo('body')
.html('<div><h6>'+message+'?</h6></div>')
.dialog({
modal: true, title: 'Delete message', zIndex: 10000, autoOpen: true,
width: 'auto', resizable: false,
buttons: {
Yes: function () {
// $(obj).removeAttr('onclick');
// $(obj).parents('.Parent').remove();
$(this).dialog("close");
},
No: function () {
$(this).dialog("close");
}
},
close: function (event, ui) {
$(this).remove();
}
});
};
ref http://jsfiddle.net/nM3Zc/

here you can find how to pop a messageBox with yes/no and question in javascript
and you can use that if you aren't determined on "save"/"no"
var nRslt = app.alert ("Press \"yes\" to save\n" + "Press \"No\" to delete";, 2, 2, "Submit Validation");
if(nRslt == 4) { // User Pressed Yes, Do submission
this.submitForm(...);
}

The problem is solved with the following code:
function deleteFileRow(rowCount){
var stay=confirm("Are you sure, You want to delete Row? Click "ok" to confirm, "cancel" Otherwise")
if(stay)
{
$.ajax({
url: 'deleteRow.htm?rowIndex='+rowCount+"&action=delete&testid="+${testid},
success: function(data) {
document.location.reload();
}
});
}
}
Ajax call would be inside "confirm".

Related

Jquery close popup on click

I use this jquery to show my popup,
//ResetPassword Popup display
$(document).ready(function () {
var passwordExpiredVal = $("#isPasswordExpired").html();
if (passwordExpiredVal == "True") {
$("#ResetPasswordModal").modal({
show: 'true'
});
};
});
I use this jquery to pass the new typed password to controller action ON CLICK, once the save button is clicked I want the popup to close
//Reset Password submit
$(document).ready(function () {
$("#submitSave").on("click", function () {
var confirmPassword = $("#txtLgnPasswordConfirmReset").val();
var passwordReset = {
UserName: $("#txtLgnUsername").val(),
Password: $("#hdnOldPassword").val(),
NewPassword: $("#txtLgnPasswordReset").val()
}
if (passwordReset.NewPassword != confirmPassword) {
notifyMessage.showNotifyMessage('error', 'The passwords entered should match', false);
$("#txtLgnPasswordReset").val("");
$("#txtLgnPasswordConfirmReset").val("");
}
else {
$.ajax({
type: "POST",
url: "/Account/PasswordReset",
data: passwordReset,
success: function () {
$("#ResetPasswordModal").modal({
show: 'false'
});
},
error: function () {
alert('failure');
}
});
}
});
});
My jquery function is not helping...
success: function () {
$("#ResetPasswordModal").modal({
show: 'false'
});
},
Any ideas??
Thanks in advance...
The code you are using is unnecessarily initializing the modal again on that element.
Use modal('hide') : Docs,
success: function () {
$('#ResetPasswordModal').modal('hide');
},
If you further wish to use this again, 'toggle' would be a better option.
$('#ResetPasswordModal').modal('toggle')

Bootstrap Modal instead of jQuery Dialog

i have a custom php script that uses jQuery Dialog for confirmation diaglog boxes.
The js that initates the dialog looks like this:
(function ($) {
$(function () {
if ($('#frmCreateUser').length > 0) {
$('#frmCreateUser').validate();
}
if ($('#frmUpdateUser').length > 0) {
$('#frmUpdateUser').validate();
}
$("a.icon-delete").live("click", function (e) {
e.preventDefault();
$('#record_id').text($(this).attr('rev'));
$('#dialogDelete').dialog('open');
});
if ($("#tabs").length > 0) {
$("#tabs").tabs({
select: function(event, ui){
$("#message_box").html("");
switch(ui.index){
case 0:
$("#info_list_box").css("display", "block");
$("#info_add_box").css("display", "none");
break;
case 1:
$("#info_list_box").css("display", "none");
$("#info_add_box").css("display", "block");
break;
}
}
});
}
$(".multiselect").multiselect({
minWidth: 400
});
if ($("#dialogDelete").length > 0) {
$("#dialogDelete").dialog({
autoOpen: false,
resizable: false,
draggable: false,
height:220,
modal: true,
close: function(){
$('#record_id').text('');
},
buttons: {
'Delete': function() {
$.ajax({
type: "POST",
data: {
id: $('#record_id').text()
},
url: "index.php?controller=AdminUsers&action=delete",
success: function (res) {
$("#content").html(res);
$("#tabs").tabs();
}
});
$(this).dialog('close');
},
'Cancel': function() {
$(this).dialog('close');
}
}
});
}
});
})(jQuery);
I have done serval modifications for replacing it with Bootstrap modal, so at this moment it looks like this:
(function ($) {
$(function () {
if ($('#frmCreateUser').length > 0) {
$('#frmCreateUser').validate();
}
if ($('#frmUpdateUser').length > 0) {
$('#frmUpdateUser').validate();
}
$("a.icon-delete").live("click", function (e) {
e.preventDefault();
$('#record_id').text($(this).attr('rev'));
$('#myModal').modal('show');
});
if ($("#tabs").length > 0) {
$("#tabs").tabs({
select: function(event, ui){
$("#message_box").html("");
switch(ui.index){
case 0:
$("#info_list_box").css("display", "block");
$("#info_add_box").css("display", "none");
break;
case 1:
$("#info_list_box").css("display", "none");
$("#info_add_box").css("display", "block");
break;
}
}
});
}
$(".multiselect").multiselect({
minWidth: 400
});
if ($("#myModal").length > 0) {
$("#myModal").modal({
autoOpen: false,
resizable: false,
draggable: false,
height:220,
modal: true,
close: function(){
$('#record_id').text('');
},
buttons: {
'Delete': function() {
$.ajax({
type: "POST",
data: {
id: $('#record_id').text()
},
url: "index.php?controller=AdminUsers&action=delete",
success: function (res) {
$("#content").html(res);
$("#tabs").tabs();
}
});
$(this).modal('hide');
},
'Cancel': function() {
$(this).modal('hide');
}
}
});
}
});
})(jQuery);
It seems that it has helped, and the dialog is now a modal as desired, though my buttons is not working.. i have made sure that the buttons have the role of button, but the js is not using my buttons as in the Dialog box.. im pretty sure that the error is somewhere around the last time the #myModal id is used..
Thank you.
Using Bootstrap modals gives you a lot of flexibility in modal design and function. The "downside" to this is that you have to do a little more work yourself. If you look at the Bootstrap modal documentation you will see that, while you are calling the modal correctly, it takes a completely different set of options than the jQuery dialog. First and foremost, you cannot pass buttons and button-actions as options to the modal. What you can do instead is create the structure you need in HTML with the buttons in place, then add javascript to control their actions. This bootply should work as a basic framework for what you want.

jquery dialog add button after ajax call

I have a dialog window that has some confirmation stuff in it as the result of a form submit:
$('#newUserDialog').dialog({
autoOpen: false,
width: 600,
modal: true,
resizable: false,
close: function() {
window.location.reload(true);
},
buttons: {
"Complete": function() {
$.ajax({
type: "POST",
url: "checkData.php",
data: formData+"&complete=1",
success: function(result){
alert(result);
$('#newUserDialog').html('User has been built');
}
});
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
when the user clicks complete, it fires off the ajax call and does checkdata.php stuff. when that is complete I want to remove "Complete" and "Cancel" and add a button "Continue". The continue button will reload the page. how can i accomplish this?
currently in this code, it works as desired but if the user doesn't like what he sees in confirmation window before he clicks Complete, if he clicks cancel, it reloads page. I only want to reload page after the ajax call.
You can use following for adding new button in ajax callback;
var buttonSet = $('#newUserDialog').parent().find('.ui-dialog-buttonset');
var newButton = $('<button>Continue</button>');
newButton.button().click(function () {
window.location.reload(true);
});
buttonSet.html(newButton);
You can see demo here: jsfiddle
<script>
var myModalExample;
$(function() {
myModalExample = $( "#newUserDialog" ).dialog({
autoOpen: true,
width: 600,
modal: true,
resizable: false,
close: function() {
window.location.reload(true);
},
buttons: {
"Complete": function() {
$.ajax({
type: "POST",
url: "checkData.php",
data: formData+"&complete=1",
success: function(result){
myModalExample.dialog({ buttons: [ { text: "Continue", click: function() { $( this ).dialog( "close" ); } } ] });
}
});
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
});
</script>

Javascript Confirm change into jquery modal dialog

I have here a delete record via ajax. I add confirm message if I want to delete the record or not. What I need is change the confirm message into modal dialog http://jqueryui.com/dialog/#modal-confirmation.
I want to change this javascript code
if(confirm("All PR and PO in this record will be deleted. Are you want to delete?"))
into this jquery modal dialog. Any help?
<script>
$(function () {
$("#dialog-confirm").dialog({
resizable: false,
height: 140,
modal: true,
buttons: {
"Delete all items": function () {
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
});
</script>
Ajax delete
<script>
$(function () {
$(".delbutton").click(function () {
//Save the link in a variable called element
var element = $(this);
//Find the id of the link that was clicked
var del_id = element.attr("name");
//Built a url to send
var info = 'name=' + del_id;
if (confirm("All PR and PO in this record will be deleted. Are you want to delete?")) {
$.ajax({
type: "GET",
url: "delete.php",
data: info,
success: function () {}
});
$(this).parents(".record").animate({
backgroundColor: "#fbc7c7"
}, "fast")
.animate({
opacity: "hide"
}, "slow");
}
return false;
});
});
</script>
You will override confirm method of javascript in your html code as follow
<script>
function confirm(message) {
var myTitle =
"<div style='float: left'>Error</div><div style='float: right; margin-right: 15px;'>Close</div>";
$('<div id="dlgTest1" style="display: none;min-height:auto;"><p style="text-align:justify;font-family:verdana;font-weight: bold;">'+message+'</p></div>').dialog({
resizable: false,
modal: true,
width: 300,
height: 'auto',
bgiframe: false,
//position: ['top', 5],
draggable: true,
closeOnEscape: true,
minHeight:20,
buttons: [{
text: "Cancel",
"style": 'background-color:#CCCCCC !important;color:rgb(119, 119, 119);font-family:verdana',
click:function(){
$(this).dialog('close');
return false;
}
},{
text: "Ok",
"style": 'background-color:#007AC0 !important;color:white;font-family:verdana',
click:function(){
$(this).dialog('close');
}
}
],
close:function(){ $(this).dialog('destroy').remove(); }
}).siblings('.ui-dialog-titlebar').append(myTitle); // title goes here;
//$("#dlgTest1").dialog("open").dialog("moveToTop");
};
and then use it , But be careful don't use html submit button on it, Use html normal button
//try this code
<script>
var isConfirmed=false;
$(function () {
$("#dialog-confirm").dialog({
resizable: false,
height: 140,
modal: true,
buttons: {
"Delete all items": function () {
isConfirmed=true;
$(this).dialog("close");
},
Cancel: function () {
isConfirmed=false;
$(this).dialog("close");
}
}
});
$(".delbutton").click(function () {
//Save the link in a variable called element
var element = $(this);
//Find the id of the link that was clicked
var del_id = element.attr("name");
//Built a url to send
var info = 'name=' + del_id;
$("#dialog-confirm").html("All PR and PO in this record will be deleted. Are you want to delete?");
if (isConfirmed) {
$.ajax({
type: "GET",
url: "delete.php",
data: info,
success: function () {}
});
$(this).parents(".record").animate({
backgroundColor: "#fbc7c7"
}, "fast")
.animate({
opacity: "hide"
}, "slow");
}
return false;
});
});
</script>
//replace your script with this code and try
<script>
var isConfirmed=false;
$(function () {
$("#dialog-confirm").dialog({
resizable: false,
height: 140,
modal: true,
buttons: {
"Delete all items": function () {
isConfirmed=true;
$(this).dialog("close");
},
Cancel: function () {
isConfirmed=false;
$(this).dialog("close");
}
}
});
$(".delbutton").click(function () {
//Save the link in a variable called element
var element = $(this);
//Find the id of the link that was clicked
var del_id = element.attr("name");
//Built a url to send
var info = 'name=' + del_id;
$("#dialog-confirm").html("All PR and PO in this record will be deleted. Are you want to delete?");
$("#dialog-confirm").dialog();
if (isConfirmed) {
$.ajax({
type: "GET",
url: "delete.php",
data: info,
success: function () {}
});
$(this).parents(".record").animate({
backgroundColor: "#fbc7c7"
}, "fast")
.animate({
opacity: "hide"
}, "slow");
}
return false;
});
});
</script>

error from dialog when using jquery and ajax

I get a an alert: Object XMLHttpRequest. This happens when I click Add Recipient on my dialog. The code below POSts the new values to the database. It opens a dialog or form and the action of the form is to add or insert a new value to the database. I pasted the code below because I think thats likely the source of the error.
Below is the javascript for my code:
$(function () {
$('#dialog-form-add').dialog({
autoOpen: false,
modal: true,
height: 425,
width: 475,
buttons: {
'Add Recipient': function () {
$.ajax({
type: "POST",
url: $("#add-recipient-form").attr('action'),
data: $("#add-recipient-form").serialize(),
dataType: "text/plain",
success: function (response) {
$('#dialog-form-add').dialog('close');
$("#grid").load('/Default/ #grid', function () {
$('tbody > tr:first')
.effect("highlight", {}, 2000);
});
},
error: function (response) {
alert(response);
$('#dialog-form').dialog('close');
}
});
},
Cancel: function () {
$('#dialog-form-add').dialog('close');
}
}
});
$('#requestdate').datepicker({ dateFormat: 'yy-mm-dd' });
$('#add-recipient')
.button().click(function () {
$('#dialog-form-add').dialog('open');
});
});

Categories