i need a ok / cancel delete confirmation dialogue box before i send ajax request in order to remove item from database
var id=ID;
$.ajax({
type: "POST",
url: "sample.aspx?Mode=Delete",
data: { id: id },
success: function (response) {
});
You can simply use Javascript's confirm function. This is the easiest approach :)
var r = confirm("Are you sure you want to delete this?");
if (r == true) {
var id=ID;
$.ajax({
type: "POST",
url: "sample.aspx?Mode=Delete",
data: { id: id },
success: function (response) {}
});
} else {
// Do something if they push cancel button
}
You need to use jquery UI plugins.
Then just before the ajax function you need to do this:
$('a.deleteBtn').on('click', function (e) {
e.preventDefault();
** get you values here **
$('div.deleteDialog').dialog({
modal: true,
width: 400,
height: 'auto',
buttons: {
"Delete": function () {
$(this).dialog('close');
setTimeout(function () {
$.ajax({
method: 'POST',
url: url,
data: {****},
success: function () {
},
error: function () {
});
}, 1000);
},
"Cancel": function () {
$(this).dialog('close');
}
}
});
});
In youy html file you need to add the dialog
<div class="deleteDialog" title="Package Delete Confirmation" style="display: none">
Are you sure you want to delete this?
</div>
Related
button Uptade
<button type="button" id="custom-icon" onclick="UpdateParents()"">Update</button>
function AJAX
function UpdateParents() {
var ParentsOBJ = { IDkids: $("#IDkids").val(), NameKids: $("#NameKids").val(), LastNameKids: $("#LastNameKids1").val(), NameFather: $("#NameFather").val(), NameMother: $("#NameMother").val(), PhoneMother: $("#PhoneMother").val(), PhoneFather: $("#PhoneFather").val() };
$.ajax({
type: "PUT",
url: "/api/Parents/" + ParentsOBJ.IDkids,
data: JSON.stringify(ParentsOBJ),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
Parents = JSON.parse(data);
$('#custom-icon').on('click',function () {
swal({ title: "update", text: "ok.", icon: "/up.jpg" });
setTimeout(function () {
location.reload();
}, 2000);
});
},
failure: function (errMsg) {
alert(errMsg);
}
});
$('#custom-icon').on('click',function ()
Only when I double-click the button does the operation take place.
I can understand why this is happening (click in click),
But can't solve the problem.
I will be happy to resolve!!!
The problem is that you double bind the $('#custom-icon'), and the 2nd bind takes place inside an ajax success callback, which takes in place only after the ajax request that has been triggered from the first click has been finished.
All you need to do is to remove the 2nd binding, as it's unnecessary because you already bind the click event from the html, your new code will look like this:
function UpdateParents() {
var ParentsOBJ = { IDkids: $("#IDkids").val(), NameKids: $("#NameKids").val(), LastNameKids: $("#LastNameKids1").val(), NameFather: $("#NameFather").val(), NameMother: $("#NameMother").val(), PhoneMother: $("#PhoneMother").val(), PhoneFather: $("#PhoneFather").val() };
$.ajax({
type: "PUT",
url: "/api/Parents/" + ParentsOBJ.IDkids,
data: JSON.stringify(ParentsOBJ),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
Parents = JSON.parse(data);
swal({ title: "update", text: "ok.", icon: "/up.jpg" });
setTimeout(function () {
location.reload();
}, 2000);
},
failure: function (errMsg) {
alert(errMsg);
}
});
A better practice here would be to accept a callback method from the UpdateParents function, and then pass the success as a callback.
I'm creating a modal when I click I will pass the id and action to the serverside to save a logs.
Here is my sample code but can't get it to work. I'm using a usercontrol.
$("a.modal_show2").click(function () {
$(this).each(function () {
if ($(this)) {
var storecheckid = $(this).attr("id");
$.ajax({
type: "POST",
url: "TalkTalk.aspx/saveLogs",
data: {
action: 'video_tag',
clickedlinktag: storecheckid
},
dataType: "text",
success: function (response) {
console.log(response);
}
});
}
});
});
[System.Web.Services.WebMethod]
public static string saveLogs(string action, string clickedlinktag)
{
DataHelper.InsertLogs("TalkTalk", Convert.ToInt16(clickedlinktag), Convert.ToInt16(TwwId));
return clickedlinktag;
}
Thanks
data: JSON.stringify({ action: 'video_tag', clickedlinktag: storecheckid })
// response is a wrapper for your data. your data is in `d`.
success: function (response) {
console.log(response.d);
}
I want to delete a row from the table, but the success part of ajax does not execute.
function fn_delete() {
$("a.delete").click(function () {
idProduct = $(this).parents("tr").find("td").eq(1).html();
$.ajax({
type: "POST",
url: "DeleteProduct",
data: { idProduct },
success: function () {
$(this).parents("tr").fadeOut("normal", function () {
$(this).remove();
}
});
});
};
this inside your success callback will not be the same as this in the code that makes the ajax call, unless you explicitly set the context:
$.ajax({
context: this,
data: ...
});
I don't think this is giving the value that you're expecting.
Try this:
function fn_delete() {
$("a.delete").click(function () {
idProduct = $(this).parents("tr").find("td").eq(1).html();
var myRow = $(this).parents("tr");
$.ajax({
type: "POST",
url: "DeleteProduct",
data: { idProduct },
success: function () {
$(this).parents("tr").fadeOut("normal", function () {
myRow.remove();
});
}
});
});
I use mvc4. There is button in rows of jqgrid. when clicked button, open pop up and in pop up edit data of row's grid. but when clicked button of pop up don't pass data to action of controller.
code of pop up:
{
name: 'Notes',
width: 160,
sortable: false,
resizable: false,
search: false,
formatter: function () {
return "<button onclick='OpenDialog()' style='margin-left:12px'>Pop Up Dlg</button>";
}
}
code of pop up (http://jqueryui.com/dialog/#modal-form):
<script>
$(function() {
var dialog, form,
modserial = $("#ModSerial"),
simno = $("#SimNo"),
function addUser() {
$(function() {
$.ajax({
url: '#Url.Action("EditMet", "MetGrid")',
data: "{'ModSerial':'" + document.getElementById('ModSerial').value + "', 'SimNo':'" + document.getElementById('SimNo').value + "'}",
type: "Post",
dataType: "Html",
success: function(result) {
$("#Data").html(result);
},
error: function() {
alert("Error!");
}
});
});
}
function log() {}
dialog = $("#dialog-form").dialog({
autoOpen: false,
height: 400,
width: 350,
modal: true,
buttons: {
"...": log,
"Confirm": addUser,
Cancel: function() {
dialog.dialog("close");
}
},
close: function() {
form[0].reset();
allFields.removeClass("ui-state-error");
}
});
form = dialog.find("form").on("submit", function(event) {
event.preventDefault();
addUser();
});
});
</script>
When call action(#Url.Action("EditMeter", "MeterGrid")), pass null to controller. How to pass data and id's row grid to action?
You should use contentType: "application/json;charset=utf-8" and stringify the JSON data like follwoing.
$.ajax({
url: '#Url.Action("EditMet", "MetGrid")',
data: JSON.stringify({"ModSerial": document.getElementById('ModSerial').value, "SimNo": document.getElementById('SimNo').value}),
type: "post",
contentType: "application/json;charset=utf-8",
dataType: "Html",
success: function(result) {
$("#Data").html(result);
},
error: function() {
alert("Error!");
}
});
Hope it will work now.
Please consider the following code:
function autoRecursiveLoad(checkingElementId) {
if (checkingElementId.length) {
return;
}
else {
var targetId = $("#targetContent");
var requestUrl = $('#ajaxUrl').val();
$.ajax({
url: requestUrl,
cache: false,
type: "POST",
async:false,
beforeSend: function(){
},
complete: function(){
autoRecursiveLoad(checkingElementId);
},
success: function(data) {
targetId.append(data);
},
error: function(e) {
}
});
}
}
in the code: checkingElementId is the id of the dynamically generated element. I used checkingElementId.length to see if it already exists yet, if not, send ajax request to load the content, create div with the id of checkingElementId and then appends to targetId, then perform recursive call.
The problem is the div with id of checkingElementId is generated successfully but the code to check if it exists (checkingElementId.length) never worked. Hence, the above function will loop forever. Am I doing something wrong?
I dont know if it is the best solution or not, but this works for me, I trigger the DOMNodeInserted event on the fly, so the function is updated as follows:
function autoRecursiveLoad(checkingElementId) {
$(document).on('DOMNodeInserted', checkingElementId, function () {
// do something when the new dynamically generated item (checkingElementId) added to the page
});
if (checkingElementId.length) {
return;
}
else {
var targetId = $("#targetContent");
var requestUrl = $('#ajaxUrl').val();
$.ajax({
url: requestUrl,
cache: false,
type: "POST",
async:false,
beforeSend: function(){
},
complete: function(){
autoRecursiveLoad(checkingElementId);
},
success: function(data) {
targetId.append(data);
},
error: function(e) {
}
});
}
}