How show loading window in async query?(or may be sync) - javascript

i have:
function load_data(data) {
var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
myMask.show();
$.ajax({
url: '/dostup/data_json.php',
method: 'GET',
async: true,
data: {
epsg: data
},
dataType: 'json',
error: function(jqXHR, status, error) {
console.log('ошибка получения данных: '+data);
},
success: function(data2) {
window[data] = data2;
window[data+"_layer"].clearLayers();
window[data+"_layer"].addData(eval(data));
myMask.hide();
}
});
}
And myMask hidden before window[data] loading on site(client).
I try set async: false and myMask not show(i try and beforeSend too).
P.S. i have:
function search_handler(val) {
search_list=[];
for (var t = 0; t < layer_array.length; t++) { //>
if (window[layer_array[t]] != undefined && !eval(layer_array[t]).features) load_data(layer_array[t]);
if (window[layer_array[t]] != undefined && eval(layer_array[t]).features) {
for (var i = 0; i < eval(layer_array[t]).features.length; i++) { //>
search_list.push(eval(layer_array[t]).features[i]);
}
}
}
....more script
}
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

You need to use ajaxStart and ajaxStop like that:
$(document)
.ajaxStart(function () {
myMask.show();
})
.ajaxStop(function () {
myMask.hide();
});

Related

Ajax request showing error

I am getting an error on ajax call - "No handler found for "undefined". Attached the screenshot in the following. I'm running this on react-redux application.
Had any of you guys faced the same issue? Any help? The code is given in the following:
export function updateBrandAdmin(data) {
console.log(data);
var brand_admin_data = data;
var updateUrl = `<url for ajax request>`;
return function(dispatch) {
var brandAdminData = new FormData();
//append description
if(data.description && (data.description != "")) {
brandAdminData.append("description", brand_admin_data.description);
}
//append banner name
if(brand_admin_data.brand_name && (brand_admin_data.brand_name != "")) {
brandAdminData.append("name", brand_admin_data.brand_name);
}
//append products
if (brand_admin_data.productids && brand_admin_data.productids.length > 0) {
for(var j=0; j < brand_admin_data.productids.length; j++) {
brandAdminData.append("products_ids[]", brand_admin_data.productids[j]);
}
}
//append logo
//The issue was here when I wasn't giving this check
if (brand_admin_data.logoAttribute.files[0]) {
brandAdminData.append("logo", brand_admin_data.logoAttribute.files[0]);
}
//append banner attributes
if (brand_admin_data.banners_attributes) {
// formData.append("video_attributes[]", null);
// if(brand_admin_data.banners_attributes.length > 0) {
// for(var i=0; i < brand_admin_data.banners_attributes.length; i++) {
brandAdminData.append("banners_attributes[]", brand_admin_data.banners_attributes[0].files[0]);
// }
// }
}
// console.log(data);
// console.log(updateUrl);
$.ajax({
type: "PUT",
url: updateUrl,
data: brandAdminData,
headers: getToken(),
success: function(resp, status) {
console.log(resp);
},
async: true,
cache: false,
contentType: false,
processData: false,
timeout: 60000
});
}
}

popup close event detect javascript

I want to know hot to detect popup close event, When i open popup close event automatically call, its i am using .close event.
function start() {
$.ajax({
type: "post",
dataType: "html",
url: 'client_get',
crossDomain: true,
data: {
'id': '123'
},
success: function(response) {
try {
var json = JSON.parse(response);
} catch (err) {
start();
}
jQuery(document).ready(function($) {
var close_interval = setInterval(function() {
var newwindow = window.open('https://www.example.com/key?v=' + json[0]['url'], 'key', 'width=800,height=600,status=0,toolbar=0');
if (newwindow.close) {
console.log("Closed");
clearInterval(close_interval);
}
}, 1000);
});
}
});
}
Capturing the close event of a window requires the onbeforeunload event handler:
var new_window = window.open('some url')
new_window.onbeforeunload = function(){ my code}
so in your case:
function start() {
$.ajax({
type: "post",
dataType: "html",
url: 'client_get',
crossDomain: true,
data: {
'id': '123'
},
success: function (response) {
try {
var json = JSON.parse(response);
} catch (err) {
start();
}
jQuery(document).ready(function ($) {
var close_interval = setInterval(function () {
var newwindow = window.open('https://www.example.com/key?v=' + json[0]['url'], 'key', 'width=800,height=600,status=0,toolbar=0');
newwindow.onload = function() {
newwindow.onbeforeunload = function() {
console.log("Closed");
clearInterval(close_interval);
}
}
}, 1000);
});
}
});
}

properly queuing different ajax requests

I see a lot of solutions to queue ajax requests but I am trying to understand how to implement one for this case. Should it be a push and shift queue?:
var urlList = ['urlA', 'urlB', 'urlC', ...];
function initSession() {
for (var i = 0; i < urlList.length; i++) {
getResponse(urlList[i]); // this is what I would like to queue.
}
}
function getResponse(theURL) {
steps.shuffleLetters({
"text": messages[mesInd]
});
$.ajax({
method: 'GET',
url: theURL,
dataType: 'text',
success: function(data) {
setTimeout(function() {
steps.shuffleLetters({
"text": data
});
}, 1000);
mesInd = mesInd + 1;
},
error: function(data) {
setTimeout(function() {
steps.shuffleLetters({
"text": "Click Again!"
});
}, 1000);
mesInd = 0;
}
});
}
You can do that by removing the for loop and call the next url after the success of the current request
Check the code below:
var urlList = ['urlA','urlB','urlC',...];
var length = urlList.length;
var currentRequest = 0;
getResponse(urlList[currentRequest]);
function getResponse(theURL){
steps.shuffleLetters({"text": messages[mesInd]});
$.ajax({
method: 'GET',
url: theURL,
dataType: 'text',
success: function (data) {
setTimeout(function(){steps.shuffleLetters({"text": data});}, 1000);
//Here you will call the next request
currentRequest +=1;
if(currentRequest < length)
{
getResponse(urlList[currentRequest]);
}
mesInd = mesInd+1;
},
error: function (data) {
setTimeout(function(){steps.shuffleLetters({"text": "Click Again!"});}, 1000);
mesInd = 0;
}
});
}

query clearInterval when variable is "x"

I have made a function that is controlling a row in a my database for a certain number with AJAX.
Im calling the function with a click function and putting the function in a setInterval function to make the check 10 times a second.
In the beginning it will return 0, but at some point (usually within 5 seconds) it will return something els than 0, when it does i want to clearInterval.
But im not sure how to this?
This is my function:
function get_buzzer() {
$.ajax({
url: 'ajax_buzzer.php',
dataType: 'json',
async: false,
type: 'post',
data: {
job: 'get'
},
success:function(s) {
if(s['number'] == 0) {
var player = false;
} else {
var player = true;
}
}, error:function(e) {
}
});
}
$(document).ready(function() {
$('#test').click(function() {
var buzzer = setInterval("get_buzzer()",100);
});
});
You can do something like
$(document).ready(function () {
//make buzzer a share variable
var buzzer;
$('#test').click(function () {
buzzer = setInterval(get_buzzer, 100);
});
function get_buzzer() {
$.ajax({
url: 'ajax_buzzer.php',
dataType: 'json',
async: false,
type: 'post',
data: {
job: 'get'
},
success: function (s) {
if (s['number'] != 0) {
//if number is not 0 then clear the interval
clearInterval(buzzer)
}
},
error: function (e) {}
});
}
});
Try this : declare global variable to store interval and call window.clearInterval in success call of ajax
var buzzer;
function get_buzzer() {
$.ajax({
url: 'ajax_buzzer.php',
dataType: 'json',
async: false,
type: 'post',
data: {
job: 'get'
},
success:function(s) {
if(s['number'] == 0) {
var player = false;
} else {
var player = true;
//clear interval
window.clearInterval(buzzer);
}
}, error:function(e) {
}
});
}
$(document).ready(function() {
$('#test').click(function() {
buzzer = setInterval("get_buzzer()",100);
});
});
Use:
inside success use: And make var buzzer Gloval var.
clearInterval(buzzer);
Refence
You just need to clear the interval in the success handler of ajax call over a condition.
success: function (s) {
if (s['number'] != 0) {
//if number is not 0 then clear the interval
clearInterval(buzzer)
}
},
error: function (e) {}

jquery triggerhandler not being called

the trigger below never call. The alert on call never pop up.
It was triggered by these statements. See second block.
$('#sCart').trigger('add', {
stock_id: stock_id
$('#sCart').on('add', function(event, data) {
alert('on add');
$.ajax({
url: '$subCartUpdate'.replace('$tokenHolder', Math.random()),
type: 'GET',
dataType: 'json',
beforeSend: function(jqXHR) {
jqXHR.setRequestHeader('if-Modified-Since', '0');
},
success: function(success, statusText, jqXHR) {
alert(statusText);
$('#sCart').trigger('clear');
$('#sCart').html(success.subCart);
if(timerId === null) {
$('#sCart').queue('add', function() {
$(this).fadeIn(function() {
$(this).dequeue('add');
});
});
} else {
clearTimeout(timerId);
}
timerId = setTimeout(function() {
$('#sCart').fadeOut();
timerId = null;
}, 7000);
$('#sCart').queue('add', function() {
var updatedItemSelector = '#stock_'+data.stock_id;
var updatedItem = $(updatedItemSelector).fadeOut(500);
updatedItem.fadeIn(2000, function() {
$(this).dequeue('add');
});
});
if(success.reservedTimeStamp) {
$('#sCartTimer').trigger('start', {timer: success.reservedTimeStamp});
}
$('#sCart').dequeue('add');
},
error: function(jqXHR, statusText, errors) {
var i = 0;
}
});
});
It was triggered from code below.
$.ajax({
url: '$addUrl',
type: 'POST',
data: {
id: stock_id,
amount: amount
},
success: function(success, statusText, jqXHR) {
alert(statusText);
if(success.reload) {
location.reload(true);
} else if(success.redirect) {
location.href = success.redirect;
} else {
$('#sCart').trigger('add', {
stock_id: stock_id
});
$('.product-amount').val(1);
//$('.type .selected').first().trigger('click');
$('.stock_left').trigger('update');
$('.purchase').trigger('unblock');
}
},
error: function(jqXHR, statusText, error) {
var i = 0;
}
});

Categories