Scope issue (javascript)

Question

I am running javascript variables from Mysql using PHP with Ajax/JSON. My original question can be found here: from mysql to javascript variable. Basically I now am having an issue with the variables being recognised throughout the remainder of the script. On my last question you see the two variables go from:

var tag_name = 'example';
var client_id = '123456789';

To now using (Thank you @Richard Rodriguez):

$.ajax({
   url: 'call.php',
   dataType: 'json'
}).done(
   function(data){
     var tag_name = data[0];
     var client_id = data[1];
   }
);

I believe the issue might just be a javascript function conflict? Here is a link to the script I am trying to modify from github: https://raw.github.com/ryancw/instagram-scroll/master/instagram-scroll.js. I hope seeing the original file can help diagnose what is causing the issue? I researched for that the last 2 hours with no luck. Any suggestions or even links to good articles on javascript function conflicts (if that is the issue) will be a great help.

EDIT (Full Code):

var tag_name = null;
var client_id = null;
var thumb_dimension = null;
var div_to_add_pics = null;
var include_caption = null;
var include_username = null;
var url = null;

function processData() {
   console.log(tag_name);
   console.log(thumb_dimension);  
    console.log(div_to_add_pics);
    console.log(include_caption);
   console.log(include_username);
   console.log(url);
}

$.ajax({
   url: 'call.php',
   dataType: 'json'
}).done(
   function(data){
     tag_name = data[0];
     client_id = data[1];
     thumb_dimension = 220;
    div_to_add_pics = '#img';
    include_caption = false;
    include_username = false;
    url = 'https://api.instagram.com/v1/tags/'+tag_name+'/media/recent?client_id='+client_id;
     processData();
   }
);

Patrick Evans · Accepted Answer · 2013-09-22 02:35:10Z

0

Your problem is scope not function conflict. The way the variables are declared they are visible in the local scope only, you either need to use them there, or pass them to another function that can use them, or (while polluting the global scope) declare them globally and remove the var keywords in the .done callback

using them locally

$.ajax({
   url: 'call.php',
   dataType: 'json'
}).done(
   function(data){
     var tag_name = data[0];
     var client_id = data[1];

     var clienttag = client_id+tag_name;
     //blah blah blah
   }
);

passing them to another function

function processData(tag_name,client_id) {
   console.log(tag_name);
   console.log(client_id);  
}

$.ajax({
   url: 'call.php',
   dataType: 'json'
}).done(
   function(data){
     var tag_name = data[0];
     var client_id = data[1];
     processData(tag_name,client_id);
   }
);

declaring globally (which is the least optimal as it pollutes the global space)

var tag_name = null;
var client_id = null;

function processData() {
   console.log(tag_name);
   console.log(client_id);  
}

$.ajax({
   url: 'call.php',
   dataType: 'json'
}).done(
   function(data){
     tag_name = data[0];
     client_id = data[1];
     processData();
   }
);

edited Sep 22, 2013 at 2:35

answered Sep 22, 2013 at 2:25

Patrick Evans

42.8k6 gold badges81 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Robert Levy Over a year ago

fair warning that if you do option 3 (global), people won't want to be your friend anymore. just sayin...

SethCodes Over a year ago

@Patrick Thanks a lot, that information did help me understand the issue better. Considering I am trying to make it work with the script on github (which is linked), I would want to declare them globally as the variables are used throughout the entire script, in other variables, in ProcessData(response) and other functions. Tried using all three methods with no luck.

Patrick Evans Over a year ago

if you need them global then the third option will work, if it didnt then you did not copy it correctly. the 2 variables should be declared in the global space (outside any function)

SethCodes Over a year ago

@PatrickEvans Third option should work, I cannot diagnose why it does not, can you check the github raw file I linked?

Patrick Evans Over a year ago

there is a global variable named url that builds a url from the two variables, unless you have modified url in your ajax done callback function then the loadResults function which uses the global url variable is using a invalid url. that is the only thing i can see, you should edit your question to show how you modified that script so we can see how you modified it.

|

Collectives™ on Stack Overflow

Scope issue (javascript)

1 Answer 1

10 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Linked

Related