San Ya San Ya - 3 months ago 14
Ajax Question

multiple Ajax with same jsonpCallback as done callback

I have different Ajax calls to same API with different path and query in URL, but with with same jsonpCallback I can't change

When I called one Ajax url - everything fine!

But when I need get responses from multiple, I got errors, cause their executing at once. I tryed callbacks, I tryed "async:false", I tryed "returning ajax with when,then,done etc - NOTHING WORKS as I expected :(

function timenow() {
var a = new Date,
b = a.getMinutes();
b < 10 && (b = "0" + b);
var c = a.getHours();
c > 12 && (c -= 12);
var d = c + ":" + b;
return d
}

function ajaxCall(p, callback) {
if (p == 1) {
url = 'https://api.vk.com/method/wall.get?owner_id=-93100300&offset=0&count=1&filter=owner&callback=logResults'
} else {
url = "https://api.github.com/users/jeresig?callback=logResults"
}
return $.ajax({
url: url,
dataType: "jsonp",
jsonp: false,
jsonpCallback: "logResults",
cache: true,
}).done(function(r) {
callback(r);
});
}

$.when(
ajaxCall(0, function(r) {
console.log(r);
console.log(r.data.avatar_url + ' ' + timenow());
}),
ajaxCall(1, function(r) {
console.log(r);
console.log(r.response[1].id + ' ' + timenow());
}),
ajaxCall(0, function(r) {
console.log(r.data.bio + ' ' + timenow());
}),
ajaxCall(1, function(r) {
console.log(r.response[1].id + ' ' + timenow());
}),
ajaxCall(0, function(r) {
console.log(r.data.blog + ' ' + timenow());
}),
ajaxCall(1, function(r) {
console.log(r.response[1].from_id + ' ' + timenow());
}),
ajaxCall(0, function(r) {
console.log(r.data.company + ' ' + timenow());
}),
ajaxCall(1, function(r) {
console.log(r.response[1].to_id + ' ' + timenow());
}),
ajaxCall(0, function(r) {
console.log(r.data.created_at + ' ' + timenow());
}),
ajaxCall(1, function(r) {
console.log(r.response[1].date + ' ' + timenow());
}),
ajaxCall(0, function(r) {
console.log(r.data.email + ' ' + timenow());
}),
ajaxCall(1, function(r) {
console.log(r.response[1].post_type + ' ' + timenow());
}),
ajaxCall(0, function(r) {
console.log(r.data.events_url + ' ' + timenow());
}),
ajaxCall(1, function(r) {
console.log(r.response[1].text + ' ' + timenow());
}),
ajaxCall(0, function(r) {
console.log(r.data.followers + ' ' + timenow());
}),
ajaxCall(1, function(r) {
console.log(r.response[1].is_pinned + ' ' + timenow());
}),
ajaxCall(0, function(r) {
console.log(r.data.followers_url + ' ' + timenow());
}),
ajaxCall(1, function(r) {
console.log(r.response[1].reposts.count + ' ' + timenow());
}),
ajaxCall(0, function(r) {
console.log(r.data.following + ' ' + timenow());
}),
ajaxCall(1, function(r) {
console.log(r.response[1].likes.count + ' ' + timenow());
}),
ajaxCall(0, function(r) {
console.log(r.data.following_url + ' ' + timenow());
}),
ajaxCall(1, function(r) {
console.log(r.response[1].comments.count + ' ' + timenow());
}),
ajaxCall(0, function(r) {
console.log(r.data.gists_url + ' ' + timenow());
})
).done(console.log('Ajaxing done ' + timenow()));


LOG ERROR

I think problem in same jsonpCallback, so when I use callback in ajax it always rewrites it with new function, so I am getting errors.

P.S. Still can't set up async to false, working sample https://jsfiddle.net/ypmkn5k0/

<div id="log"></div>

<script>
$.ajaxSetup({ async: false});


$.ajax({
url: 'https://api.github.com/users/jeresig?callback=logResults',
dataType: "jsonp",
jsonp: false,
jsonpCallback: "logResults",
cache: true,
async: false,
}).done(function(r) {
$('#log').append(r.data.avatar_url+'</br>');
});

$('#log').append('Ajaxing done </br>');
</script>


P.S.S Oh, I checked documentation once again, now I understand, very sad(((


Cross-domain requests and dataType: "jsonp" requests do not support
synchronous operation.


P.S.S.S I did last try with callbacking and it's WORKS, FUK-FUK-FUK, DON'T KNOW WHY IT WASn'T ON REAL PROJECT, BUT I WILL TRY TO EMPLIMENT IT:

function timenow(){var a=new Date,b=a.getMinutes();b<10&&(b="0"+b);var c=a.getHours();c>12&&(c-=12);var d=c+":"+b;return d}

function ajaxCall(p,callback) {
if(p==1){
url='https://api.vk.com/method/wall.get?owner_id=-93100300&offset=0&count=1&filter=owner&callback=logResults'
} else {
url="https://api.github.com/users/jeresig?callback=logResults"
}
$.ajax({
url: url,
dataType: "jsonp",
jsonp: false,
jsonpCallback: "logResults",
cache: true,
success: function (r) {
callback(r);
},
});
}


ajaxCall(0,function(r){console.log(r); console.log(r.data.avatar_url+' '+timenow());
ajaxCall(1,function(r){console.log(r); console.log(r.response[1].id+' '+timenow());
ajaxCall(0,function(r){console.log(r.data.bio+' '+timenow());
ajaxCall(1,function(r){console.log(r.response[1].id+' '+timenow());
ajaxCall(0,function(r){console.log(r.data.blog+' '+timenow());
ajaxCall(1,function(r){console.log(r.response[1].from_id+' '+timenow());
ajaxCall(0,function(r){console.log(r.data.company+' '+timenow());
ajaxCall(1,function(r){console.log(r.response[1].to_id+' '+timenow());
ajaxCall(0,function(r){console.log(r.data.created_at+' '+timenow());
ajaxCall(1,function(r){console.log(r.response[1].date+' '+timenow());
ajaxCall(0,function(r){console.log(r.data.email+' '+timenow());
ajaxCall(1,function(r){console.log(r.response[1].post_type+' '+timenow());
ajaxCall(0,function(r){console.log(r.data.events_url+' '+timenow());
ajaxCall(1,function(r){console.log(r.response[1].text+' '+timenow());
ajaxCall(0,function(r){console.log(r.data.followers+' '+timenow());
ajaxCall(1,function(r){console.log(r.response[1].is_pinned+' '+timenow());
ajaxCall(0,function(r){console.log(r.data.followers_url+' '+timenow());
ajaxCall(1,function(r){console.log(r.response[1].reposts.count+' '+timenow());
ajaxCall(0,function(r){console.log(r.data.following+' '+timenow());
ajaxCall(1,function(r){console.log(r.response[1].likes.count+' '+timenow());
ajaxCall(0,function(r){console.log(r.data.following_url+' '+timenow());
ajaxCall(1,function(r){console.log(r.response[1].comments.count+' '+timenow());
ajaxCall(0,function(r){console.log(r.data.gists_url+' '+timenow());
console.log('Ajaxing done '+timenow());
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});


enter image description here

Answer

The main problem I see is in your .done() at the very end. This should be enclosed in a function. That and I think it would be better if you declared your 'url' variable so that there is no confusion over it's localization.

function timenow() {
  var a = new Date,
    b = a.getMinutes();
  b < 10 && (b = "0" + b);
  var c = a.getHours();
  c > 12 && (c -= 12);
  var d = c + ":" + b;
  return d
}

function ajaxCall(p, callback) {
  var url = 'https://api.github.com/users/jeresig?callback=logResults';
  if (p == 1) {
    url = 'https://api.vk.com/method/wall.get?owner_id=-93100300&offset=0&count=1&filter=owner&callback=logResults'
  }
  return $.ajax({
    url: url,
    dataType: "jsonp",
    jsonp: false,
    jsonpCallback: "logResults",
    cache: true,
  }).done(function(r) {
    callback(r);
  });
}

$.when(
  ajaxCall(0, function(r) {
    console.log(r);
    console.log(r.data.avatar_url + ' ' + timenow());
  }),
  ajaxCall(1, function(r) {
    console.log(r);
    console.log(r.response[1].id + ' ' + timenow());
  }),
  ajaxCall(0, function(r) {
    console.log(r.data.bio + ' ' + timenow());
  }),
  ajaxCall(1, function(r) {
    console.log(r.response[1].id + ' ' + timenow());
  }),
  ajaxCall(0, function(r) {
    console.log(r.data.blog + ' ' + timenow());
  }),
  ajaxCall(1, function(r) {
    console.log(r.response[1].from_id + ' ' + timenow());
  }),
  ajaxCall(0, function(r) {
    console.log(r.data.company + ' ' + timenow());
  }),
  ajaxCall(1, function(r) {
    console.log(r.response[1].to_id + ' ' + timenow());
  }),
  ajaxCall(0, function(r) {
    console.log(r.data.created_at + ' ' + timenow());
  }),
  ajaxCall(1, function(r) {
    console.log(r.response[1].date + ' ' + timenow());
  }),
  ajaxCall(0, function(r) {
    console.log(r.data.email + ' ' + timenow());
  }),
  ajaxCall(1, function(r) {
    console.log(r.response[1].post_type + ' ' + timenow());
  }),
  ajaxCall(0, function(r) {
    console.log(r.data.events_url + ' ' + timenow());
  }),
  ajaxCall(1, function(r) {
    console.log(r.response[1].text + ' ' + timenow());
  }),
  ajaxCall(0, function(r) {
    console.log(r.data.followers + ' ' + timenow());
  }),
  ajaxCall(1, function(r) {
    console.log(r.response[1].is_pinned + ' ' + timenow());
  }),
  ajaxCall(0, function(r) {
    console.log(r.data.followers_url + ' ' + timenow());
  }),
  ajaxCall(1, function(r) {
    console.log(r.response[1].reposts.count + ' ' + timenow());
  }),
  ajaxCall(0, function(r) {
    console.log(r.data.following + ' ' + timenow());
  }),
  ajaxCall(1, function(r) {
    console.log(r.response[1].likes.count + ' ' + timenow());
  }),
  ajaxCall(0, function(r) {
    console.log(r.data.following_url + ' ' + timenow());
  }),
  ajaxCall(1, function(r) {
    console.log(r.response[1].comments.count + ' ' + timenow());
  }),
  ajaxCall(0, function(r) {
    console.log(r.data.gists_url + ' ' + timenow());
  })
).done(function() { console.log('Ajaxing done ' + timenow()); });

If you are going to use the async: false argument, then there's no point in enclosing all of these in a .when/.done, and if you know that you can't call these asynchronously, then I would recommend that you remove the .when logic and simply call the function sequentially with the async: false property.

It would also be helpful to see your jsonpCallback. If you have any variables or resources that would be considered shared, then that could also be a problem.