JavaScript function variable scoping issue

Question

I have the following JavaScript function:

    $('div[id^="event"]').each(function( index ) {
    fullID = $(this).attr('id');
    object = $(this);
    idOnly = fullID.replace( /^\D+/g, '');
    var jqxhr = $.ajax({
    type: 'POST',
    url: '/welcome',
    data: { 
        'lat': lat, 
        'lon': lon ,
        'eventID': idOnly
    },
    success: function(msg){
        object.show();
        
  }
});
                
});

What I want this piece of code to do is the following :

For each div id which has an ID which starts with event, get the number portion of the div element id (for example one could have an id of 'event39410') - so get the '39410' piece - send that along with two variables to an AJAX service - and when the response comes back, show the div with id 'event39410'.

The ajax component works fine - the problem is however, that if i have 10 of these event tags, I get 10 ajax calls to my backend, but I only ever get the last 'event' div shown - which suggests that by the time the success function gets called the object is always referencing the last entry in the loop.

Can somebody help me to fix this variable scoping issue?

lshettyl · Accepted Answer · 2015-03-16 16:56:45Z

2

You need var in front of those 3 globals variables!

$('div[id^="event"]').each(function( index ) {
    var fullID = this.id;
    var object = $(this);
    var idOnly = fullID.replace(/^\D+/g, '');
    var jqxhr = $.ajax({
        type: 'POST',
        url: '/welcome',
        data: { 
            'lat': lat, 
            'lon': lon ,
            'eventID': idOnly
        },
        success: function(msg){
            object.show();

        }
    }); 
});

answered Mar 16, 2015 at 16:56

lshettyl

8,1815 gold badges27 silver badges31 bronze badges

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

1 Comment

RenegadeAndy Over a year ago

Boom! Too much switching between different languages! Thank you

Collectives™ on Stack Overflow

JavaScript function variable scoping issue

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related