I'm initializing three functions on loading the page and then performing some events on click so I want that when a click event is pressed I just reload those functions completely in the given code it loads the function again but the previous one remains there so I want that when I load the function again it should remove the previously loaded one.
$('#locationdeleteconfirm').click(function(e) {
e.preventDefault();
$.ajax({
url: "php/deleteLocationByID.php",
type: 'POST',
dataType: 'json',
data: {
name: $('#dname').val(),
locationID: $('#dlocation').val(),
id: $('#editlocationid').val(),
},
//if user enters correct data and api gives back the data then we run success funtion
success: function(result) {
console.log(result);
//if status of data is ok we fetch the data from fields and put them in results table in html
if (result.status.name == "ok") {
//fetching fields from api and showing them in html table
Swal.fire({
title: "Deleted",
text: "Deleted",
type: "success"
}).then(function() {
$("#locdeleteconfirm").modal("hide");
$("#editlocationmodal2").modal("hide");
$('.modal-backdrop').removeClass('modal-backdrop');
$('#locationtable').load(location.href + " #locationtable>*")
getlocations();
getdepartments();
getallemployees();
});
} else {
//if the upper condition fails
console.log("error");
}
},
//if there is no success in retrieving data from api
error: function(jqXHR, textStatus, errorThrown) {
console.log("error");
$('#txterror').html("Enter Valid Id");
}
});
})
getloactions();
getdepartments();
getallemployees();
these are the three functions that are loading on the page load event I want them to reload once the click event is performed
Related
I added a dataLayer push when there's a success 'add to cart' on Shopify, but it fires only when I'm adding a product from the product page, and not from collection page.
any idea why or how to trigger the data layer also when the add to cart happens on the collection page?
Couldn't find anywhere else in the code a place where the add.js is triggered.
Thanks!
Here is the code from the theme.js on Shopify, I emphasized the code I added
cart.prototype.addItemFromForm = function(evt) {
evt.preventDefault();
var params = {
type: 'POST',
url: '/cart/add.js',
data: this.$form.serialize(),
dataType: 'json',
success: $.proxy(function(lineItem) {
**window.dataLayer.push({event: 'addToCart',
common_data: lineItem
})**
this.success(lineItem);
}, this),
error: $.proxy(function(XMLHttpRequest, textStatus) {
this.error(XMLHttpRequest, textStatus);
}, this)
};
I am making a delete choice using javascript, but I have a few problems when the data is deleted, the website does not load so the data is still on the display. to eliminate it I need to press F5, then the data disappears
function deleteAll() {
if ($('input:checked').length < 1) {
alert('Pilih data yang akan di hapus!')
} else if (confirm("Apakah yakin akan menghapus semua data terpilih?")) {
$.ajax({
url: "zakatfitrah/hapus",
type: "POST",
data: $('#form-zfitrah').serialize(),
success: function(data) {
table.ajax.reload();
},
error: function(data) {
alert("Tidak Dapat Menghapus Data!");
}
});
}
First of all, can you specify how you are displaying messages from ajax response if you are using the following method
<div id="myDiv">test</div>
ajax response:
$('#message').html(result.message);
setTimeout(function()
{
$('#message').html("");
}, 3000);
It's not clear what data you would like to delete. What you'll probably need to do is delete the element that holds the data.
Element:
<div id="myDiv">test</div>
Delete:
$('#myDiv').remove();
My callback form works fine, but when client push the submit button, a
notification Your request sent successfully will appear beside buttons, and if user clicks several times on submit button then several requests are sent to the server, but what I need is when users push the submit button callback form will be hidden, and new form with Your request sent successfully will appear.
$json = [
'status' => 1,
'text' => _('Your request successfully sent')
];
die(json_encode($json));
} else {
$error = [
'status' => 0,
'text' => _('Write Full name and phone number')
];
die(json_encode($error));
}
}
ajax
$.ajax({
url: "../../engine/ajax/eogpo.php",
type: "POST",
dataType: "JSON",
data: {
action: 'orderCallWidget',
phone: $('#phoneWidget').val(),
FIO: $('#FIOWidget').val(),
data: $('input, select').serialize()
},
beforeSend: function() {
$("#overLoader").show();
},
success: function(data) {
if(data.status) {
$('.product__form__error').html("");
$("#successMessage").html(data.text);
} else {
$("#successMessage").html("");
$('.product__form__error').html(data.text);
}
$("#overLoader").hide();
},
error: function() {
$('.product__form__error').html('<?php echo _("Unknown error"); ?>');
$("#overLoader").hide();
}
});
});
Ok, suppose your button has the id myButton, just add this after $("#overLoader").hide();:
$("#myButton).attr("disabled",true);
You can easily adapt this to hide a div or completely remove elements from the DOM.
I have a page which loads multiple tables separated by TAB using bootstrap.
In the third tab called patient tab, I have an action being done inside a modal.
An ajax call in the view will call an action in controller, when the logic successfully returned to the view, it will call an alert box and to load the latest result set in the table, I put location.reload() function, HOWEVER, the page returns or load in the first TAB and not in the 3rd where I do some action.
Can I specify or force the Tab to be loaded?
here the snippet of the ajax call in view, since it is quite long
}).promise().done(function () {
$.ajax({
type: 'POST',
url: '/Patient/SaveWeight',
dataType: 'json',
contentType: 'application/json',
data: JSON.stringify(add_upd_obj_arr),
dataType: "json",
traditional: true,
success: function (result) {
if (result.errMsg == '' || result.errMsg == "") {
bootbox.alert({
size: "small",
title: "Confirmation!",
message: "Successfully Updated.",
callback: function () {
$('#ModalVitalSign').modal('hide');
location.reload();
}
});
} else {
bootbox.alert(result.errMsg);
}
},
error: function () {
bootbox.alert({
size: "small",
title: "Error!",
message: "There is an error while loading data."
});
}
});
});
I tried this, but does not refresh
window.location.hash = tab_treatment_info; //id of the third tab
I am trying to POST some data to my ASP.Net MVC Web API controller and trying to get it back in the response. I have the following script for the post:
$('#recordUser').click(function () {
$.ajax({
type: 'POST',
url: 'api/RecordUser',
data: $("#recordUserForm").serialize(),
dataType: 'json',
success: function (useremail) {
console.log(useremail);
},
error: function (xhr, status, err) {
},
complete: function (xhr, status) {
if (status === 'error' || !xhr.responseText) {
alert("Error");
}
else {
var data = xhr.responseText;
alert(data);
//...
}
}
});
});
The problem with this script is that whenever I try to post the data, the jQuery comes back in "error" instead of "success".
I have made sure that there is no problem with my controller. I can get into my api method in debug mode whenever the request is made and can see that it is getting the data from the POST request and is returning it back. This controller is quite simple:
public class RecordUserController : ApiController
{
public RecordUserEmailDTO Post(RecordUserEmailDTO userEmail)
{
return userEmail;
}
}
I am not sure how I can get jQuery to print out any useful error messages. Currently when I try to debug the jQuery code using Chrome console it shows an empty xhr.responseText, nothing in "err" object and "status" set to "error" which as you see is not quite helpful.
One more thing that I have tried is to run the following code directly from the console:
$.ajax({
type: 'POST',
url: 'api/RecordUser',
data: {"Email":"email#address.com"},
dataType: 'json',
success: function (useremail) {
console.log(useremail);
},
error: function (xhr, status, err) {
console.log(xhr);
console.log(err);
console.log(status);
alert(err.Message);
},
complete: function (xhr, status) {
if (status === 'error' || !xhr.responseText) {
alert("Error");
}
else {
var data = xhr.responseText;
alert(data);
}
}
});
i.e. using the same script without actually clicking on the button and submitting the form. Surprisingly, this comes back with the right response and I can see my data printed out in console. For me this atleast means that my Web API controller is working fine but leaves me with no clue as to why it is not working on clicking the button or submitting the form and goes into "error" instead of "success".
I have failed to find any errors in my approach and would be glad if someone could help me in getting a response back when the form is posted.
As suggested by Alnitak, I was using complete callback along with success and error ones. Removing complete from my code fixed the issue.
Thanks to Alnitak.