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
})
});
Related
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);
});
});
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 wonder why AJAX keeps making calls, this way its so hard to press a button and the site is not functional like this... : http://buycheapvaporizer.com/products.php
My JS file:
$(document).ready(function(){
product();
function product(){
$.ajax({
url : "productloader2.php",
method: "POST",
data : {getProduct:1},
success : function(data){
$("#get_product").html(data);
},
complete: function() {
setTimeout(product, 10000);
}
});
}
});
I checked productloader2.php which has main.js and same code you have posted here. This will create an infinite loop of product being called by every load of productloader2.php. You would better remove main.js in productloader2.php. You could use JSON to grab prodcuts.
product();
function product(){
$.ajax({
url : "productloader2.php",
method: "POST",
data : {getProduct:1},
success : function(data){
$("#get_product").html(data);
},
complete: function() {
setTimeout(product, 10000000000000);
}
});
}
Here's a flow chart of happens
products.php calls product() is for first time (and registers interval)
productloader2.php is loaded
product() is called from productloader2.php (first time and registers interval).
productloader2.php is loaded from productloader2.php of 2. and calls product() again and the loop continues.
Eventually, the page might crash.
When ajax request complete it executes setTimeout(product, 10000); which then call product function again after 10000ms.
$(document).ready(function(){
product();
function product(){
$.ajax({
url : "productloader2.php",
method: "POST",
data : {getProduct:1},
success : function(data){
$("#get_product").html(data);
}
});
}
});
Is there a way to detect all AJAX calls (both GET and POST)? I need to do a generic way to show a loading div while the AJAX call process are running. Something like the code below:
$.ajax({
url: 'my/url',
type: "GET",
dataType: "json",
beforeSend: function() {
$('#loading').show();
},
success: function() {
$('#loading').hide();
// do some stuff...
}
Instead to call in every AJAX beforeSend() and success() behaviors (show and hide the loading div), I'm searching a generic way to handle it. When I have an AJAX call, I just do it:
$.ajax({
url: 'my/url',
type: "GET",
dataType: "json",
success: function() {
// do some stuff...
}
When that beforeSend() behavior is implicity in this request and the same for the success() hide behavior. Do you have any idea how can I treat this thing?
Thank you all!
Yes, you can do this using .ajaxStart() & .ajaxStop() methods like:
$(document).ready(function () {
$(document).ajaxStart(function () {
$('#loading').show();
}).ajaxStop(function () {
$('#loading').hide();
});
});
Funnily enough, I was trying to do this myself this morning!
$('#loading').bind('ajaxSend', function() {
$(this).show();
}).bind('ajaxStop', function() {
$(this).hide();
}).bind('ajaxError', function() {
$this.hide();
});
Obviously, lots of different ways to achieve this, but I prefer to bind the visibility of the loading message to the AJAX events, rather than the other way around...
I have a plugin raty (http://wbotelhos.com/raty) that is loaded to document.ready, the page content changes at the click of a button reloading a part of the DOM, and the document is not ready "recalculated" and I will not reload all javascript (there are other similar behavior) I tried this solution but without success
function star(){
alert("star");
...code plugin...
}
$(document).ready(function() {
star();
});
$.ajax({
..code..
done: function(creaStella) {
alert("D");
star();
},
complete:function(){
alert("C");
star();
},
});
After call ajax i have alert("star") but i haven't my div populated
Incorrect usage of $.ajax
$.ajax({
..code..
success: function(creaStella) {
//code to populate div goes here
alert("complete");
star();
}
}).done(function(){
//or here
alert("complete2");
});
use success/done as show (or both).
I resolve in this Way..(promise().done)
also form with jquery validate plugin before dosen't works
function star(){
//plugin star
}
$(document).ready(function() {
formJqueryValidate1();
formJqueryValidate2();
star();
});
function formJqueryValidate1() {
//my check
function formJqueryValidate2() {
//my check
}
$.ajax({
success: function(msg) {
$('#myid').html(msg.template).promise().done(function(){
formJqueryValidate1();
formJqueryValidate2();
star();
});
}
}
});