Why am I not getting any data when trying to use the promise returned from my ajax call

Question

I've tried several solutions from this forum and others but nothing seems to work. I'm not sure if this is a logic issue and simply can not be done the way I'd like or if I'm just not accessing the return the right way.

What I'm trying to do is list a set of links (code is in an external file Main.js) and when the link is clicked take the id and use it to make a 2nd ajax call and open will also open a 2nd window (code is in external file Cites.js) with more information about the link clicked.

The problem is I can't get the id from the second ajax call in Main.js to be used in my Cites.js file. I'm trying to return the second ajax call and then use .done() to either get the data returned or try to get the global variable projectId.

Here's the code in my Main.js

var projectId = '';
var promise = $.ajax({
    type: 'GET',
    url: 'https://www.sciencebase.gov/catalog/items?parentId=504108e5e4b07a90c5ec62d4&max=60&offset=0&format=jsonp',
    jsonpCallback: 'getSBJSON',
    contentType: "application/json",
    dataType: 'jsonp'
    }).then(function(json) {
                 var linkBase = "http://www.sciencebase.gov/catalog/item/";
                 var link = "";                     
                 var itemId = "";                    
                 var urlId = "";
                 var itemLinkLength = "";

                 $.each(json.items, function(i,item) {
                     link = linkBase + this.id;

                     $('#sbItems').append('<li><b><a href="' + link + '" id="idNum' + i + ' ">' + this.title + '</a> - </b>' + this.summary + '</li>');                     
                 });                     

                 $('#sbItems a').on('click', function (e) {
                     e.preventDefault();                         

                     var str = $(this).attr('id');                         

                     if (str.length == 7) {                      
                          itemId = str.slice(5,6);
                     } else if (str.length == 8) {
                          itemId = str.slice(5,7);
                     }

                     urlId = json.items[itemId].id;
                     //alert(urlId);

                     return $.ajax({
                                    type: 'GET',
                                    url: 'https://www.sciencebase.gov/catalog/itemLink/' + urlId + '?format=jsonp',
                                    jsonpCallback: 'getSBJSON',
                                    contentType: "application/json",
                                   dataType: 'jsonp',
                                   success: function(json) {
                                            if (json.length > 0) {
                                                projectId = json.id;
                                                window.open('Citations.html', '_self');
                                            } else {
                                                var page = linkBase + urlId;
                                                window.open(page);
                                            }

                                   },
                                   error: function(e) {
                                       console.log(e.message);
                                   }                     
                     }); // END 2nd ajax
                }); // END Click event
}); // END promise

and Here's how I'm calling it in my Cites.js

promise.done(function () {
    alert(projectId);
});

Thanks for the help

Why are you returning an ajax promise from the click handler? — Bergi, Feb 21 '13 at 21:25
When I tried to do it outside of the click event I wasn't able to get the id and then use it in the ajax call to first see if it returns a length greater than 0. So I did it all inside — jc72, Feb 21 '13 at 21:29

score 0 · Accepted Answer · edited May 23 '17 at 12:12

0

You do promise = $.ajax(…).then(function(){…}) - yet the then method does create a new promise for the result of the anonymous function (in old versions of jQuery this was pipe) - see also pipe() and then() documentation vs reality in jQuery 1.8.

However, since you don't return anything from the anon function you won't receive anything in promise.done().

If you want to do a chain ajax->click->ajax->done, you will need to manually build a promise for the click handler.

edited May 23 '17 at 12:12

Community

1
1

answered Feb 21 '13 at 21:31

Bergi

630,263
148
957
1,375

ok so could I somehow assign something to my global variable inside of the click handler and return it? Allowing me to do promise.done() to display the variable? and just skip the second ajax call – jc72 Feb 21 '13 at 22:07
You should not use a global variable, but explicitly resolve your promise with the value. So you want to get a value from the click handlers scope? – Bergi Feb 21 '13 at 22:43
Yes Bergi, I just want to take the id value from the click handler and use it in another file. – jc72 Feb 21 '13 at 22:47
Had to change the question since the real problem is I can't seem to get the promise object to work in a separate file. Thanks for all your help!! – jc72 Feb 22 '13 at 09:15
Huh? That's a completely different question. I think you should revert it and ask a new one. – Bergi Feb 22 '13 at 12:05
Thanks Bergi, the problem had to do with the script tags in my markup! – jc72 Feb 22 '13 at 18:32
I accepted becuase this actaully made me re-think how my code was working, although it's still a mess this helped, thanks Bergi – jc72 Feb 23 '13 at 23:46

Why am I not getting any data when trying to use the promise returned from my ajax call

1 Answers1