The problem is that only my first updateProgress function runs while syncDNS is waiting. All other calls made through setInterval keep waiting until syncDNS is finished. Why is that?
$("#syncDNS").click(function() {
$('#status').html("");
$('#status').addClass('loading');
function updateProgress() {
$.ajax({
type: 'POST',
url: 'index.php?action=checkProgress',
datatype: 'text',
async: 'true',
success: function(data) {
$('#status').html(data);
}
});
}
$.ajax({
url: 'index.php?action=sync',
async: 'true',
success: function(response) {
clearInterval(loop);
$('#status').removeClass('loading');
if (response) {
$('#status').addClass('alert alert-warning').html("<h4>Aviso</h4>" + response);
} else {
$('#status').addClass('alert alert-success').html("<h4>Sucesso</h4>" + "DNS sincronizado com sucesso!");
}
}
});
updateProgress();
var loop = setInterval(function() {
updateProgress();
}, 1000);
});
Remove clearInterval(loop); then it will work again and again.
$.ajax({
url: 'index.php?action=sync',
async: 'true',
success: function(response) {
//clearInterval(loop);
$('#status').removeClass('loading');
if (response) {
$('#status').addClass('alert alert-warning').html("<h4>Aviso</h4>" + response);
} else {
$('#status').addClass('alert alert-success').html("<h4>Sucesso</h4>" + "DNS
sincronizado com sucesso!");
}
}
});
Related
This is my code I don't want repeat my ajax how can I optimize it ? and then have shorter code?
so i show you just an example here:
function for() {
if (forceexs) {
if (login == "inte") {
$.ajax({
url: "index_content.php?mode=ppanel=forgotten&force_mssante=0",
success: function (html) {
$(".panel-body").html(i18n.tr(html));
$("#rpps").focus();
},
});
} else if (login == "ex") {
$.ajax({
url: "index.php?mode=nel=forgorce_mssante=1",
success: function (html) {
$(".panel-body").html(i18n.tr(html));
$("#rpps").focus();
},
});
} else {
$.ajax({
url: "index.php?mode=phel=internal_or_external",
success: function (html) {
$(".panel-body").html(i18n.tr(html));
$("#rpps").focus();
},
});
}
} else {
$.ajax({
url: "index.php?mode=pel=forgotten",
success: function (html) {
$(".panel-body").html(i18n.tr(html));
$("#rpps").focus();
},
});
}
}
This is the shortest one more easy to understand
function ajaxRequest(GETQuery) {
$.ajax({
url:'index_content?'+GETQuery,
success: function(html) {
$(".panel-body").html(i18n.tr(html));
$("#rpps").focus();}
})
}
}
I have the following 3 AJAX function, and the problem is that it loads sessionAllCoursePage3 first then sessionAllCoursePage2 then sessionAllCoursePage1, I wanted to be inverse. I want to ensure that page1 is loaded first, then page 2, page 3, etc.
// Retrieve last 9 session
$.ajax({
type: "POST",
data: { run: true, providerName: $('#providerName').val() },
url: '/app/functions/sessionAllCoursePage1.php',
cache: false,
success: function(response) {
// Response is value returned from php
$('#contentPage1').html(response);
return false;
}
});
// Retrieve the next 9 session
$.ajax({
type: "POST",
data: { run: true, providerName: $('#providerName').val() },
url: '/app/functions/sessionAllCoursePage2.php',
cache: false,
success: function(response) {
// Response is value returned from php
$('#contentPage2').html(response);
return false;
}
});
// Retrieve the next 9 session
$.ajax({
type: "POST",
data: { run: true, providerName: $('#providerName').val() },
url: '/app/functions/sessionAllCoursePage3.php',
cache: false,
success: function(response) {
// Response is value returned from php
$('#contentPage3').html(response);
return false;
}
});
I'd suggest you chain them with promises:
// Retrieve last 9 session
$.ajax({
type: "POST",
data: {
run: true,
providerName: $('#providerName').val()
},
url: '/app/functions/sessionAllCoursePage1.php',
cache: false
}).then(function(response) {
$('#contentPage1').html(response);
return $.ajax({
type: "POST",
data: {
run: true,
providerName: $('#providerName').val()
},
url: '/app/functions/sessionAllCoursePage2.php',
cache: false
}).then(function(response) {
$('#contentPage2').html(response);
return $.ajax({
type: "POST",
data: {
run: true,
providerName: $('#providerName').val()
},
url: '/app/functions/sessionAllCoursePage3.php',
cache: false
});
}).then(function(response) {
$('#contentPage3').html(response);
});
Or, using a little more shared code:
function ajaxCommon(url, resultId) {
return $.ajax({
type: "POST",
url: url,
data: {
run: true,
providerName: $('#providerName').val()
},
cache: false
}).then(function(result) {
$("#" + resultId).html(result);
});
}
ajaxCommon('/app/functions/sessionAllCoursePage1.php', 'contentPage1').then(function() {
return ajaxCommon('/app/functions/sessionAllCoursePage2.php', 'contentPage2');
}).then(function() {
return ajaxCommon('/app/functions/sessionAllCoursePage3.php', 'contentPage3');
});
Or, a little more table/loop driven:
function ajaxCommon(url, resultId) {
return $.ajax({
type: "POST",
url: url,
data: {run: true, providerName: $('#providerName').val()},
cache: false
}).then(function(result) {
$("#" + resultId).html(result);
});
}
[1,2,3].reduce(function(p, item) {
return p.then(function() {
return ajaxCommon('/app/functions/sessionAllCoursePage' + item + '.php', 'contentPage' + item);
});
}, Promise.resolve());
Just place your asynchronous code inside some request callback (e.g. success). Didactically:
var firstRequestOptions = {
success: function () {
secondRequest();
}
};
var secondRequestOptions = {
success: function () {
thirdRequest();
}
};
var thirdRequestOptions = {
success: function () {
firstRequest();
}
};
var firstRequest = function () {
console.log('request 1');
$.ajax(firstRequestOptions);
};
var secondRequest = function () {
console.log('request 2');
$.ajax(secondRequestOptions);
};
var thirdRequest = function () {
console.log('request 3');
$.ajax(thirdRequestOptions);
};
Then:
firstRequest();
The log should be:
> request 1
> request 2
> request 3
> request 1
> request 2
...
You can use Array.prototype.shift(), String.prototype.match() with Regexp /\d/ to match digit character in url, .then()
function request(url) {
return $.ajax({
type: "POST",
data: {run: true, providerName: $('#providerName').val()},
url: url,
cache:false,
success: function (response) {
$('#contentPage' + url.match(/\d/)[0]).html(response);
}
});
}
var urls = ['/app/functions/sessionAllCoursePage1.php'
, '/app/functions/sessionAllCoursePage2.php'
, '/app/functions/sessionAllCoursePage3.php'];
request(urls.shift())
.then(function re() {
if (urls.length) {
request(urls.shift()).then(re)
}
})
// can use `.catch()` here at jQuery 3.0+
.fail(function(jqxhr, textStatus, errorThrown) {
// handle error
console.log(errorThrown);
});
plnkr http://plnkr.co/edit/fREO6Jzw65gq2s3jrwjp?p=preview
I am trying to refresh the page after a jQuery AJAX call. It appears that the page is refreshing (only sometimes) before all the data has been transmitted. Can anyone see why by this snippet below. I have the refresh code in the success function so I am confused.
I tried adding async = false and that didn't seem to work either.
function sendRating(rating, reload_on_return) {
$.ajax({
type: "POST",
dataType: 'json',
url: window.url_root + cid + "/",
data: {
"rating": rating.r2 / 100.0
},
success: function(data) {
if (data.hasOwnProperty('success')) {
console.log("data was sent!");
if (reload_on_return) {
location.reload();
}
}
},
error: function() {
console.log("Data didn't get sent!!");
}
})
You could possibly do a setTimeout, to make it wait for a split second before the refresh can execute.
function sendRating(rating, reload_on_return) {
$.ajax({
type: "POST",
dataType: 'json',
url: window.url_root + cid + "/",
async: false,
data: {
"rating": rating.r2 / 100.0
},
success: function(data) {
if (data.hasOwnProperty('success')) {
console.log("data was sent!");
if (reload_on_return) {
setTimeout(
function()
{
location.reload();
}, 0001);
}
}
},
error: function() {
console.log("Data didn't get sent!!");
}
})
My code looks like this. The problem is, PHP side does it job and returns right value. But ajax doesn't execute things inside success: function. What am I missing?
AnswerDiv.on("click", ".NotSelectedAnswer", function() {
var NotSelectedAnswerBtn = $(".NotSelectedAnswer"),
SelectedAnswerBtn = $(".SelectedAnswer"),
AnswerDiv = $("div.Answer"),
querystring="fromID="+SelectedAnswerBtn.data("id")+"&toID="+$(this).data("id")+"&op=SelectAsAnswer";
$.ajax({
url: 'processor.php',
type: "POST",
dataType: "json",
data: querystring,
success: function(data) {
if(data.status)
{
SelectedAnswerBtn.removeClass("SelectedAnswer").addClass("NotSelectedAnswer").button("enable");
$(this).removeClass(" NotSelectedAnswer").addClass("SelectedAnswer").button("disable");
$("div.Answer[data-id=" + SelectedAnswerBtn.data("id") + "]").toggleClass("SelectedDiv");
$("div.Answer[data-id=" + $(this).data("id") + "]").toggleClass("SelectedDiv");
}
}
});
return false;
});
Try to cache $(this) before ajax call
AnswerDiv.on("click", ".NotSelectedAnswer", function() {
var NotSelectedAnswerBtn = $(".NotSelectedAnswer"),
SelectedAnswerBtn = $(".SelectedAnswer"),
AnswerDiv = $("div.Answer"),
thisElem=$(this),
querystring="fromID="+SelectedAnswerBtn.data("id")+"&toID="+$(this).data("id")+"&op=SelectAsAnswer";
$.ajax({
url: 'processor.php',
type: "POST",
dataType: "json",
data: querystring,
success: function(data) {
if(data.status)
{
SelectedAnswerBtn.removeClass("SelectedAnswer").addClass("NotSelectedAnswer").button("enable");
thisElem.removeClass(" NotSelectedAnswer").addClass("SelectedAnswer").button("disable");
$("div.Answer[data-id=" + SelectedAnswerBtn.data("id") + "]").toggleClass("SelectedDiv");
$("div.Answer[data-id=" +thisElem.data("id")+ "]").toggleClass("SelectedDiv");
return false;
}
}
});
});
function VReload()
{
$.ajax({
type: "GET",
url: "/foo/",
success: function (data) {
$("#myid").html(data);
}
});
}
$(document).ready(function() {
setInterval('VReload()', 1000)
});
This piece of code is working fine on Mozilla and chrome but not on IE. Ajax call is not firing on IE. What could be the reason.
Switch off caching by doing this:
$.ajax({
type: "GET",
cache: false,
url: "/foo/",
success: function (data) {
$("#myid").html(data);
}
});
set cache false
$.ajaxSetup({ cache: false });
or
$.ajax({
cache: false,
//other options
});
Try this:
function VReload()
{
var timestamp = new Date();
$.ajax({
type: "GET",
url: "/foo/" + "×tamp=" + timestamp.getTime(),
success: function (data) {
$("#myid").html(data);
}
});
}
$(document).ready(function() {
setInterval('VReload()', 1000)
});
use jQuery's $.get() function
$.get('/foo/', {}, function(data){
// whatever
});