Why do I get undefined when displaying value in a global variable?

Question

I just don't get it, obviously. I've tried setters and getters, self invoking functions, you name it. It's like the click handler is returning a value but there's no way for me to keep it?

This is my code in the first file request.js

var testId = (function (inId) {
    var citeId  = inId;
    return citeId;
})();

function mainAjax() {
   return $.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'
   });
}

var promise = mainAjax();

this is the code in my second file requestMain.js,

promise.done(function (json) {
   var linkBase = "http://www.sciencebase.gov/catalog/item/";
   var link = "";                     
   var itemId = "";                    
   var urlId = "";

   $.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);
      }
      testId = json.items[itemId].id;
      alert(testId);                      
}); // END Click event  

}).fail(function() {
   alert("Ajax call failed!");
});

This webpage displays a list of links. A link could have some more information that I want displayed on a second webpage or it could have nothing. So when a link is clicked I need to store/save/keep the id from the link so that I can use it in the url to make another ajax request, because until I get the id the ajax request for the next page will have no idea what information to ask for.

For now I'm simply doing this

alert(testId);

But what I'm trying to do is this,

$.ajax({
    type: 'GET',
    url: 'https://www.sciencebase.gov/catalog/itemLink/' + testId + '?format=jsonp',
    jsonpCallback: 'getSBJSON',
    contentType: "application/json",
    dataType: 'jsonp',
    // Then doing something with json.something

testId would be used in the url and it would change depending on the link that was clicked on the previous page. The ajax call is totally dependent on the click event and is displayed on a separate webpage with new information.

And this would be in my third file requestCitation.js which currently gives me a big undefined when doing

alert(testId);

I think this is a scope issue, but how can I store the value returned from a click??? So that I can then use it globally? It seems like the value disappears outside of the scope as if there was never a click at all even thought I'm storing it in a variable?

the html for the first page has script tags for request.js and requestMain.js and the second page has script tags for request.js and requestCitation.js, so they can both see the variable testId.

Thanks for the help!

Here's the jsfiddle

These are the links and when a link is clicked

Answer 1

I'm not entirely sure what you're trying to do but if you're trying to keep the data returned from the AJAX request as a global variable, I would have thought it was done using something similar to the below.

Eg

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'
      data: '';
      success: function(data){
         promise = data;
      }
});

But as I said I'm not understanding fully so I could be very wrong with my answer.

Answer 2

Your testId is holding the value retuned by the function you're calling, and since the function returns its argument and you've called it without arguments, it will be undefined :

var testId = (function (inId) {
  var citeId  = inId;
  return citeId; //returns the argument
})(); // called with no argument