$.ajax is not working but $.getJSON is working

Question

I am trying to get share count of pininterest and below code is working well

var pi_like_count = 0;
PIUrl = "https://api.pinterest.com/v1/urls/count.json?url=" + url1 + "&format=jsonp" + '&callback=?'
$.getJSON(PIUrl, function (data) {
    pi_like_count = data.count;

    alert(pi_like_count +' pininterest');
});

but when I am trying to put below code issue is coming as

var pi_like_count = 0;
PIUrl = "https://api.pinterest.com/v1/urls/count.json?url=" + url1 + "&format=jsonp" + '&callback=?'
$.ajax({
    method: 'GET',
    url: PIUrl,
    success: function (data) {
        pi_like_count = data.count;

        alert(pi_like_count + ' pininterest');
    },
    error: function (data) {
        alert('error' + data.count + ' pininterest');
        console.log(data);
    },
    async: false
});

Console.log error as

promise: function promise()
readyState: 4
responseText: "{\"error\":\"Invalid callback, use only letters, numbers, square brackets, underscores, and periods.\"}"

This issue is coming when I am using $.ajax, I had tried same to get facebook share count and is working well but pininterest is not working

more explaination

 function GetScores(url) {
    var FBUrl, TWUrl, LNUrl, GLUrl, PIUrl;
    var url1 = "";
    url1 = encodeURIComponent(url1 || url);  

    //Fetch counters from PInterest
    var pi_like_count = 0;
    PIUrl = "https://api.pinterest.com/v1/urls/count.json?url=" + url1 + "&format=jsonp" + '&callback=?'  
    $.ajax({
        type: 'GET',
        dataType: 'json',
        url: PIUrl,
        success: function (data) {
            pi_like_count = data.count;
            alert(pi_like_count + ' pininterest');
        }        ,
        complete: function (jqXHR, data) {
            pi_like_count = data.count;
            alert(pi_like_count + ' pininterest complete');
        },
        error: function (req, status, error) {
            alert('error');
        },
        async: false
    });

    //Fetch counters from Facebook
    var fb_share_count = 0;

    FBUrl = "https://graph.facebook.com/?id=" + url1 + "&format=json";

    $.ajax({
        type: 'GET',
        url: FBUrl,
        success: function (data) {
            fb_share_count = data.share.share_count;
            alert(fb_share_count+' facebook');
        },
        async: false
    });
    var totalshare = parseInt(fb_share_count) + parseInt(pi_like_count);

    return totalshare;
    }

Here Facebook count and total share count is get then after the pinterest count alert is showing i.e. when this function is calling second time then after pinterest is giving old count.

@Andy My main issue is that my return function is being called then after pinterest count is get, so to resolve this issue I had made use of $.ajax that with async: false, after editing datatype to json the function is working properly but still it is called after the function get returns — Mitesh Jain, Feb 21 '18 at 12:21
you could use `complete` to make sure you get the data when the query is completed. see https://stackoverflow.com/questions/10149199/how-to-get-jquery-ajax-data-in-the-compete-function you may not even need `async: false` — Lorenzo Canavaggio, Feb 21 '18 at 12:26
Remove `async : false` and make separate functions wich return the shares in the `success`. Then call all your functions in a parent function and do your additions there — Lorenzo Canavaggio, Feb 21 '18 at 12:36

score 1 · Accepted Answer · edited Feb 21 '18 at 13:10

Try it:

function GetScores(url, onCountTotal) {
    var FBUrl, TWUrl, LNUrl, GLUrl, PIUrl;
    var url1 = "";
    url1 = encodeURIComponent(url1 || url);
    //Fetch counters from PInterest
    var pi_like_count = 0;
    PIUrl = "https://api.pinterest.com/v1/urls/count.json?url=" + url1 + "&format=jsonp" + '&callback=?';
    $.ajax({
        type: 'GET',
        dataType: 'json',
        url: PIUrl,
        success: function (data) {
            pi_like_count = data.count;
            var fb_share_count = 0;
            FBUrl = "https://graph.facebook.com/?id=" + url1 + "&format=json";
            $.ajax({
                type: 'GET',
                dataType: 'json',
                url: FBUrl,
                success: function (data) {
                    fb_share_count = data.share.share_count;
                    var totalshare = parseInt(fb_share_count) + parseInt(pi_like_count);
                    onCountTotal(totalshare);
                    //alert(fb_share_count + ' facebook');
                },
                error: function (data) {
                    onCountTotal(-1);
                },
                async: true
            });
        },
        error: function (req, status, error) {
            onCountTotal(-1);
        },
        async: true
    });
}

//EXAMPLE HERE CALL FUNCTION WITH CALLBACK
GetScores("http://www.google.com", function (count) {
    alert("Count = " + count);
});

I had earlier tried this but this function get result after my function get returns value — Mitesh Jain, Feb 21 '18 at 12:25
You tested and not working? From my side i received Count = 46041149 — toto, Feb 21 '18 at 14:54

Lorenzo Canavaggio · Answer 2 · 2018-02-21T15:03:46.287

0

Here's what you could try using a CallBack :

var result = 0; 

function handleData(data) {
    result+=data.count;
}

function GetScores(url) {
    var url1 = encodeURIComponent(url1 || url);
    getFb(url1).done(handleData);
    getPi(url1).done(handleData);
    return result;
}

function getPi(url1){

    var PIUrl = "https://api.pinterest.com/v1/urls/count.json?url=" + url1 + "&format=jsonp" + '&callback=?'; 

    return $.ajax({
        type: 'GET',
        dataType: 'json',
        url: PIUrl
    });
}

function getFb(url1){

    var FBUrl = "https://graph.facebook.com/?id=" + url1 + "&format=json";

    return $.ajax({
        type: 'GET',
        url: FBUrl
    });
}

You can adapt for every platform you need the shares from, just add another function in GetScores and handle properly the returned json

You could also do something like :

function getFb(url1, callback){

var FBUrl = "https://graph.facebook.com/?id=" + url1 + "&format=json";

    $.ajax({
        type: 'GET',
        url: FBUrl,
        success: callback
    });
}

getFb(function(data){
    result+=data.count;
});

Try to adapt your code depending on the result of your alerts

edited Feb 21 '18 at 15:03

answered Feb 21 '18 at 12:45

Lorenzo Canavaggio

331
2
14

it is not working 1st return is done then after pinterest gives value – Mitesh Jain Feb 21 '18 at 13:35
See my edit : return directly the `data.count`and if it don't work, try to return in the `complete`like i showed before – Lorenzo Canavaggio Feb 21 '18 at 13:52
i came across this https://stackoverflow.com/questions/5316697/jquery-return-data-after-ajax-call-success i think it's the same problem as yours, i will try to edit my answer in this way – Lorenzo Canavaggio Feb 21 '18 at 14:01
what is test it is saying test is not defined? – Mitesh Jain Feb 21 '18 at 14:12
sorry it was a mistake i just removed it – Lorenzo Canavaggio Feb 21 '18 at 14:13
hm, maybe because it is depreciated in some way. but we are getting close i think – Lorenzo Canavaggio Feb 21 '18 at 14:17
Are you testing from your end?? – Mitesh Jain Feb 21 '18 at 14:20
no i can't where i'm from i only got my browser and it's not very practical – Lorenzo Canavaggio Feb 21 '18 at 14:32
see my edit, a callback should be the best way of solving your problem – Lorenzo Canavaggio Feb 21 '18 at 14:52

$.ajax is not working but $.getJSON is working

2 Answers2