CODEWITHSUNDEEP
javascriptjqueryarrays
Mr. Concolato
Mr. Concolato

Reputation: 2230

Strange Array Scope issue with Jquery/JavaScript

I am trying to create an array, then on mouseup() populate it with data then access it down stream with one of the jquery slider modules in the console like so:

day_range = new Array();

$( "#slider-range" ).slider({
          orientation: "vertical",
          range: true,
          values: [ 30, 45 ],
          slide: function( event, ui ) {
            $( "#amount" ).val(ui.values[ 0 ] + " - " + ui.values[ 1 ]+" Days" );
            beginDay = ui.values[ 0 ];
            endDay = ui.values[ 1 ]             
          }
});
$( "#amount" ).val($( "#slider-range" ).slider( "values", 0 ) +
          " - " + $( "#slider-range" ).slider( "values", 1 ) +" Days" );

$(".ui-slider-handle").mouseup(function(){
  day_range.length = 0;

  day_range.push(beginDay, endDay);     
});

console.log(day_range);

Problem: In FF, I am able to see the empty array upon loading with the message "There are no child objects". This is odd to me, because i created an array up stream not an array of objects unless this is automatically being done. Now when I move the slider, I see that my array gets populated in FF, but not in Chrome. When I try to access the indexes with:

console.log(day_range[0]);

It is undefined in both. I feel that this might be a trivial issue where I am making a stupid mistake, but I could not find anything on this specific issue. In reviewing the Jquery scope documentation, it looks like what I am doing is correct. Here is the code in action in jsFiddle. But, something is obviously missing. What am i doing wrong?

Thanks in advance. It might help if when you access the jsFiddle like, you open your js logs in your browser to see what is happening. Particularly in FF.

Upvotes: 0

Views: 69

Answers (1)

Mr. Concolato
Mr. Concolato

Reputation: 2230

We know that if you create a sort of global variable with respect to nested functions, that you can modify that variable within a nested function and then see the changed variable downstream. Like so:

function main(){
  var a = 1;
  function one(){
     a = a + 2;
  } 
  one();
  console.log(a); // a = 3
}

I have thought that there might be a way to access an event based function in the same way, and there isn't way to do this. The only way to achieve what i was looking for is by doing this:

$(".ui-slider-handle").mouseup(function(){
  day_range.length = 0;

  day_range.push(beginDay, endDay);  
  console.log(day_range[0]);

  //more code here like an ajax call etc
});

Lesson learned, thanks to all for your comments. My apologies for any confusion, particularly on my part ;). Now if anyone can improve on this answer, then i will give you the credit for solving the issue. I just wanted to share my conclusion. But again, if you found it helpful ...

Upvotes: 1

Related Questions