Close active ajax request (setTimeout) - javascript

I'm trying to stop an active ajax request when I click on checkbox. i active an ajax which calls every second to a url, but when i uncheck the checkbox, I was trying to close the ajax request. I tried with listener.abort(); and it doesnt work and also i added xhr.abort() and nothing happend.
Any suggestion?
function listener() {
$.get('http://localhost:3000/get-value', function (dataf) {
if (dataf.result != "") {
$.ajax({
url: "http://localhost:8000/login",
data: { pId: dataf.result },
type: "POST",
success: function (result) {
if (result.name != "") {
$.get('http://localhost:3000/close-conn');
window.location.href = result.url;
}
}
});
}
setTimeout(listener, 1000);
});
}
function GetCheckStatus() {
var flag = chkAuto.GetValue();
if (flag) {
$.ajax({
url: "http://localhost:3000/open-conn",
type: "GET",
});
listener();
} else {
$.ajax({
url: "http://localhost:3000/close-conn",
type: "GET",
});
// Doesnt work
listener.abort();
}
}

You're calling the .abort() method on the function, not the actual request object. Try something like this instead.
Define variables for the $.get request and the setTimeout, then abort/clear them as needed.
var xhr, timeout;
function listener() {
xhr = $.get('http://localhost:3000/get-value', function (dataf) {
if (dataf.result != "") {
$.ajax({
url: "http://localhost:8000/login",
data: { pId: dataf.result },
type: "POST",
success: function (result) {
if (result.name != "") {
$.get('http://localhost:3000/close-conn');
window.location.href = result.url;
}
}
});
}
timeout = setTimeout(listener, 1000);
});
}
function GetCheckStatus() {
var flag = chkAuto.GetValue();
if (flag) {
$.ajax({
url: "http://localhost:3000/open-conn",
type: "GET",
});
listener();
} else {
$.ajax({
url: "http://localhost:3000/close-conn",
type: "GET",
});
//Cancel the current request and prevent the next one from being triggered
xhr.abort();
clearTimeout(timeout);
}
}

Related

Prevent script from duplicating?

I'm having this problem with Ajax where each time data is sent, the script gets duplicated and it makes my audio overlap or play multiple times.
$.ajax({
url: 'fetch.php',
method: 'POST',
data: { limit: limit, start: start },
cache: false,
success: function (data) {
$('#load_quotes_recent').append(data);
if (!$.trim(data)) {
action = 'active';
} else {
action = 'inactive';
}
if (window.location == 'https://www.example.com/') {
$('.icon-wrapper').on('click', function () {
var postid = $(this).data('id');
$post = $(this);
$.ajax({
url: 'fetch.php',
type: 'post',
data: {
'liked': 1,
'postid': postid
},
success: function (response) {
var audio = new Audio('../sounds/pop.mp3');
audio.pause();
audio.currentTime = 0;
audio.play();
}
});
});
}
}
});
I was wondering if there was a way to prevent the script from duplicating itself so that the audio won't overlap?
The reason why I have it like this is because if I were to put the script in fetch.php Ajax will think I still have data left once I've reached the end even though I do not.
It would be great if there was a way to "replace" the same script instead of duplicating them.
Why not just initialise the audio separate from the AJAX, then only have it play when needed?
var audio = new Audio('../sounds/pop.mp3');
$.ajax({
url: 'fetch.php',
method: 'POST',
data: { limit: limit, start: start },
cache: false,
success: function (data) {
$('#load_quotes_recent').append(data);
if (!$.trim(data)) {
action = 'active';
} else {
action = 'inactive';
}
if (window.location == 'https://www.example.com/') {
$('.icon-wrapper').on('click', function () {
var postid = $(this).data('id');
$post = $(this);
$.ajax({
url: 'fetch.php',
type: 'post',
data: {
'liked': 1,
'postid': postid
},
success: function (response) {
audio.pause();
audio.currentTime = 0;
audio.play();
}
});
});
}
}
});

how to wait load() complete and get variable in selector

my problem to get text in td after .load(url) to variable
load code
$("#tr1").load("include/test.php?page=1");
and code for get variable in .load(include/test.php?page=1)
i can not getid
run before complete load
$(window).bind('load', function () {
var getid = $("td:first").text();
function updatenewrow(getid) {
$.ajax({
type: "POST",
url: 'test1.php',
data: {id: getid},//only input
success: function (response) {
if (response > getid) {
$("#tr1").load("include/test.php?page=1");
}
}
});
}
//setInterval(updatenewrow(getid), 4000);
});
It's not clear what you are trying to accomplish the way you have posed the question.
Maybe this is what you're looking for:
function updatenewrow(getid) {
$.ajax({
type: "POST",
url: 'test1.php',
data: { id: getid },
success: function (response) {
if (response > getid) {
$("#tr1").load("include/test.php?page=1");
}
}
});
}
$("#tr1").load("include/test.php?page=1", function(response, status, xhr){
if(xhr.status == 200){
var getid = $("td:first", this).text();
updatenewrow(getid);
}
});
Hope that helps.

While ajax, async:true,deferred

3 hours i cant resolve the problem and found solution in internet. Some one please help me.
How i can create loop of ajax requests, while the data from ajax not equally "stop" using while and async:true?
This is not work example:
do {
promise = json('json.php');
promise.success(function again(data) {
if(data === 'stop') {
return false;
} else {
console.log('data');
}
});
} while (again());
function json(url) {
return $.ajax({
type: "GET",
dataType: 'text',
url: url
});
}
function again(data) {
if (data !== 'stop') {
alert(data);
sendReq();
}
}
function sendReq() {
json(location.href).success(again);
}
function json(url) {
return $.ajax({
type: 'GET',
dataType: 'text',
url: url
});
}
sendReq();

Ajax post in function in external js

I've made a function with an ajax post. This function is in an external js file on my server. (functions.js).
From another page I call the function like this:
$('table.table_sort td').click(function(e)
{
var url = "https://<?=$_conf['siteurl']?>/files/process.ajax.php";
sortTable(url, e);
});
The function in the functions.js looks like this:
function sortTable(url, e)
{
if( !$(e.target).is(".last, .last input")){
$('input[name="sort"]').parent('td').removeClass('sort_active');
$('input[name="sort"]').parents('td').children('div').removeClass().addClass('sort_none');
if($(this).children('input[type="radio"]:first').is(':checked'))
{
$(this).children('input[type="radio"]:last').prop('checked', true);
$(this).children('div').removeClass().addClass('sort_asc');
$('input[name="sort"]:checked').parent('td').addClass('sort_active');
}
else
{
$(this).children('input[type="radio"]:first').prop('checked', true);
$(this).children('div').removeClass().addClass('sort_desc');
$('input[name="sort"]:checked').parent('td').addClass('sort_active');
}
$.ajax({
type: "POST",
url: url,
async: false,
data: $('#myform').serialize(),
complete: function(data)
{
$('#results').html(data.responseText);
}
});
}
}
Unfortunately nothing happened. When I do this it work:
$('table.table_sort td').click(function(e)
{
var url = "https://<?=$_conf['siteurl']?>/files/process.ajax.php";
if( !$(e.target).is(".last, .last input")){
$('input[name="sort"]').parent('td').removeClass('sort_active');
$('input[name="sort"]').parents('td').children('div').removeClass().addClass('sort_none');
if($(this).children('input[type="radio"]:first').is(':checked'))
{
$(this).children('input[type="radio"]:last').prop('checked', true);
$(this).children('div').removeClass().addClass('sort_asc');
$('input[name="sort"]:checked').parent('td').addClass('sort_active');
}
else
{
$(this).children('input[type="radio"]:first').prop('checked', true);
$(this).children('div').removeClass().addClass('sort_desc');
$('input[name="sort"]:checked').parent('td').addClass('sort_active');
}
$.ajax({
type: "POST",
url: url,
async: false,
data: $('#myform').serialize(),
complete: function(data)
{
$('#results').html(data.responseText);
}
});
}
});
Any ideas?
Your problem is the use of this inside the function. You need to pass that into the function as this inside the function does not return the clicked element...
$('table.table_sort td').click(function(e) {
var url = "https://<?=$_conf['siteurl']?>/files/process.ajax.php";
sortTable(this, url, e);
});
function sortTable(el, url, e)
{
var $el = $(el);
if( !$(e.target).is(".last, .last input")){
$('input[name="sort"]').parent('td').removeClass('sort_active');
$('input[name="sort"]').parents('td').children('div').removeClass().addClass('sort_none');
if($el.children('input[type="radio"]:first').is(':checked'))
{
$el.children('input[type="radio"]:last').prop('checked', true);
$el.children('div').removeClass().addClass('sort_asc');
$('input[name="sort"]:checked').parent('td').addClass('sort_active');
}
else
{
$el.children('input[type="radio"]:first').prop('checked', true);
$el.children('div').removeClass().addClass('sort_desc');
$('input[name="sort"]:checked').parent('td').addClass('sort_active');
}
$.ajax({
type: "POST",
url: url,
async: false,
data: $('#myform').serialize(),
complete: function(data)
{
$('#results').html(data.responseText);
}
});
}
}
You should now be able to put the function back in an external file, as you originally wanted :)

jquery exit function in ajax call

Is there a way to exit a function, depending on the result of an GET request.
For example, in the below function, hi, if the GET results in data, where data === '1', I want to exit the function.
function hi () {
$.ajax({
url: "/shop/haveItem",
type: "GET",
success: function (data) {
if (data == '1') {
// exit hi() function
}
}
});
// some executable code when data is not '1'
}
How can I go about accomplishing this?
I think the solution can be something like this
function hi () {
$.ajax({
url: "/shop/haveItem",
type: "GET",
success: function (data) {
if (data == '1') {
ifData1();
} else {
ifDataNot1()
}
}
});
}
function ifData1 () { /* etc */ }
function ifDataNot1 () { /* etc */ }
If you have an ajax function, you should always work with callback functions. If you make an ajax function synchronous, then the browser will be blocked for the duration of ajax call. Which means that the application will remain non-responsive during the duration of the call.
You should be able to return false to simulate "exit".
function hi()
{
$.ajax({
url: "/shop/haveItem",
type: "GET",
async:false,
success: function(data){
if(data == '1')
return false
}
});
//some executable code when data is not '1'
...
}
One thing you can do is have a flag variable. Assign it to true or false, depending on if you want to exit or not.
function hi()
{
var flag=false;
$.ajax({
url: "/shop/haveItem",
type: "GET",
async:false,
success: function(data){
if(data == '1')
flag=true;
}
});
if ( flag ) return;
//some executable code when data is not '1'
...
}
Creating a global flag variable I think would work the best. Tested and working!!
window.flag = [];
function hi()
{
$.ajax({
url: "/shop/haveItem",
type: "GET",
async:false,
success: function(data){
if(data == '1')
flag = true;
}
});
if (flag) {
return false;
}
//some executable code when data is not '1'
...
}

Categories