I use jQuery Ajax request to access PHP script where i delete data from my MySql database like this
$(document).on("click", "#del_mon", function(e) {
e.preventDefault();
$.ajax({
url: "http://localhost/test/del.php"
});
location.reload(true);
});
#del_mon is my button.
This code only works once on Firefox, but not after. I tried this on Chrome (Version 80.0.3987.122) and Edge (Version 80.0.361.62), works multiple times on both. Firefox version i use is 73.0.1 and is up to date. I use Ajax request to add and read data from my database as well and that works fine on Firefox.
I get no errors in my console.
I tried to find solution and i changed my click functions from this
$("#del_mon").click(function(e) {});
to this
$(document).on("click", "#del_mon", function(e) {});
As shown in this stack post. But this does not work for me.
Reloading the page may be cancelling the AJAX request that was about to be sent.
You should do the reload when the response is received, not immediately after sending the AJAX request.
$(document).on("click", "#del_mon", function(e) {
e.preventDefault();
$.ajax({
url: "http://localhost/test/del.php",
success: function() {
location.reload(true);
}
});
});
You should try to make an action just before your call has been done.
$(document).on("click", "#del_mon", function(e) {
e.preventDefault();
$.ajax({
url: "http://localhost/test/del.php",
success: function() {
location.reload(true);
}
});
});
As #Barmar said before, but I would recommend to use done and catch for a future iteration, just to know if the problem is in the call or not.
async function getData(){
const data = await $.ajax({
url: 'http://localhost/test/del.php',
type: 'get',
dataType: 'json'
});
return data;
}
$(document).on("click", "#del_mon", function(e) {
e.preventDefault();
getData().then((response) => {
console.log("done ",response);
location.reload(true);
}).catch((error) => {
//console.log("fail ", error);
});
});
Related
I have dynamically loaded content .task-listing. The click works because it does "show" the div. But the ajax request doesnt function properly. I get a 200 status in the console, but I get no response from the server. If I refresh the page, it works properly. Why would this occur? I cant figure it out, I have been researching for over 2 hours. When I use firefox it doesnt happen again until I close the browser...
$(document).ready(function () {
$(document).on("click", ".task-listing", function () {
var info = $(this).attr("id");
getTaskInfo(info);
$(".task-data").show();
});
});
function getTaskInfo(info) {
$.ajax({
type: "POST",
url: "/src/php/get-info-task.php",
dataType: "json",
data: "info=" + info,
success: function (response) {
alert("ok");
},
});
}
Ajax is not working I have to reload the page to make it work. Because of ajax was not reloading i used location.reload but I don't want this so please anyone can help me out how to make ajax function work. Its removing data but I need to refresh the page to see
$(document).ready(function() {
$('.headertrash').click(function(e){
e.preventDefault();
var trashcartid = this.id;
var splittrash = trashcartid.split('-');
var cartdelid = splittrash[1];
//Ajax Request
$.ajax({
url: 'delusing.php',
type: 'POST',
data: { id:cartdelid },
success: function(response){
// Remove row from HTML Table
$(this).closest('li').fadeOut(300,function(){
$(this).closest('li').remove();
});
//I uses location.reload as alternative
// location.reload();
}});
e.preventDefault();
});
I am going to assume that your request is working and returns success.
From your code and question I am deducing that the actual issue is not with ajax not working but with the li not fading and disappearing.
The issue you are experiencing is due to the this you are using, the way you are using this it means the ajax request, but your intent is to get the element associated with $('.headertrash') to fix your issue:
$(document).ready(function() {
$('.headertrash').click(function(e){
e.preventDefault();
var trashcartid = this.id;
var splittrash = trashcartid.split('-');
var cartdelid = splittrash[1];
var clickedElement = $(this);
//Ajax Request
$.ajax({
url: 'delusing.php',
type: 'POST',
data: { id:cartdelid },
success: function(response) {
// Remove row from HTML Table
clickedElement.closest('li').fadeOut(300,function() {
clickedElement.closest('li').remove();
});
}
});
});
});
See: Ajax (this) not working for more details
I am using ajax loadmore pagination which works fine on localhost, but I am considering my method not applicable to live host.
This is what i am doing:
$(".button").click(function(){
setTimout(function(){
$('#loader').show();
$.ajax({
//ajax stuffs
success:function(data){
$("loadmore").append(data).
}
});
} ,2000);
});
Technically speaking to me this is just taking 2 seconds to do what is inside the setTimeout function which is not right for user experience on the live server as ajax would be calling after 2 seconds.
What I want:
Let ajax call be made while the loader icon is loading. once the call is made successfully then the loader icon should stop and loadmore data should be appended.
Something like this:
$(".button").click(function(){
$("#loader").show()
$.ajax({
//ajax stuffs
success:function(data){
}
});
if(success is finished){
$("#loader").hide()
$("#loadmore").append(data)
}
});
Please how can I achieve that, thanks
Would this work for you?
$(".button").click(function(){
$("#loader").show()
$.ajax({
//ajax stuffs
success:function(data){
}
})
.done(function (data) {
$("#loader").hide();
$("#loadmore").append(data);
}).fail(function (jqXHR, textStatus) {
// do something
})
});
I have a requirment where in AJAX call has to happen before document.ready and the response from the AJAX call will be used to update some HTML elements.
So I have something like below:
var ajaxget = $.ajax({
type: 'GET',
url:'/xxx/get',
success: function(resp) {
//logic
}
});
$(document).ready(function(){
$.when(ajaxget).done(function(resp) {
//do ur logic
$(documet).trigger("yyyy");
});
});
//the above part is common across pages and placed in the <head>
//below one goes into multiple places based on the pages
$(document).ready(function(){
$(document).on('yyyy', function() {
});
});
The issue is the trigger event "yyyy" doesn't get executed in IE and intermittently on other browsers as well. Please help!
Might be better to use then() instead of success to be sure that whatever happens in success is completed before the $.when.done
Note that success is not part of the promise chain
Try:
var ajaxget = $.ajax({
type: 'GET',
url: '/xxx/get'
}).then(function(resp) {
//logic
return resp;
});
$(document).ready(function() {
ajaxget.then(function(resp) {
//do ur logic
$(documet).trigger("yyyy");
});
});
But also note you are triggering the event before you register it also if the order shown in question is correct
This code works for me. Simply i defined "yyyy" event before triggering.
$(document).ready(function () {
$(document).on("yyyy", function () {
console.log('triggered');
});
$.ajax({
type:'GET',
url:'some.jsp',//your url
success:function(resp){
//logic
$(document).trigger("yyyy");
console.log(resp);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I have an ajax function that creates a link that triggers another ajax function. For some reason the second ajax function refuses to go through POST event if I've set type: "POST"
The two functionas are below:
function HandleActivateLink(source) {
var url = source.attr('href');
window.alert(url)
$.ajax({
type: "POST",
url: url,
success: function (server_response) {
window.alert("well done")
}
});
return false;
}
function HandleDeleteLink() {
$('a.delete-link').click(function () {
var url = $(this).attr('href');
var the_link = $(this)
$.ajax({
type: "POST", // GET or POST
url: url, // the file to call
success: function (server_response) {
if (server_response.object_deleted) {
FlashMessage('#form-success', 'Link Deleted <a class="activate-link" href="' + url.replace('delete', 'activate') + '">Undo</a>');
$('a.activate-link').click(function(){
HandleActivateLink($(this));
});
the_link.parent().hide();
} else {
var form_errors = server_response.errors;
alert(form_errors)
}
}
});
return false;
});
}
You'll notice HandleDeleteLink creates a new link on success, and generates a new click event for the created link. It all works butHandleActivateLink sends the request to the server as GET. I've tried using $.post instead with no luck.
Any pointers, much appreciated.
In the second event you do not inform the client to prevent the default behaviour.
One way to do this would be to change:
$('a.activate-link').click(function(){
HandleActivateLink($(this));
});
to:
$('a.activate-link').click(function(){
return HandleActivateLink($(this));
});
(This works because HandleActiveLink already returns false.)
A nicer way to do this is to pass in the event argument to the click function and tell it to preventDefault
$('a.activate-link').click(function(e){
e.preventDefault();
HandleActivateLink($(this));
});
what is your url?
btw You can't send a cross-domain post via javascript.