Update jQuery variable on event

Question

I have the jquery var location_dir is set and used in var like so:

var location_dir = 'home/user';

var settings = {
   formData: {
       location: location_dir
   }
}

$("#mulitplefileuploader").uploadFile(settings);

location_dir get's updated with click events like so:

$(document).on('click', 'a.folder', function () {
   location_dir = $(this).data("location");
});

So my final script look like this:

var location_dir = 'home/user';

$(document).on('click', 'a.folder', function () {
   location_dir = $(this).data("location");
});

var settings = {
   formData: {
       location: location_dir
   }
}

$("#mulitplefileuploader").uploadFile(settings);

The issue is that location_dir is not getting updated on those click events and instead maintaing the initial value. Do I need to wrap the var settings = { ... in a function or something?

remove the "var" before location_dir only type => location_dir = 'home/user'; — chakroun yesser, Dec 30 '13 at 16:54
@chakrounyesser That will simply make the variable global, which will not help in this case (see Joseph the Dreamer's answer), and is considered poor practice (ie http://stackoverflow.com/questions/10525582/why-are-global-variables-considered-bad-practice-javascript). — Igor, Dec 30 '13 at 16:57

score 1 · Accepted Answer · answered Dec 30 '13 at 16:54

That variable isn't the issue, it's your settings variable, update that!

$(document).on('click', 'a.folder', function () {
    settings.formData.location = $(this).data("location");
});

You're simply grabbing the value of that variable, it's not a reference. You have to update settings since it's what you're actually using in the uploadFile function.

Joseph · Answer 2 · 2013-12-30T17:01:07.043

The thing is, JS isn't reactive. By the time the parser passes through this code, settings.formData.location as well as uploadFile gets the value of location_dir at that moment. By the time you click, you only change the location_dir variable, and not others.

Assuming you need to change settings.formData.location for uploadFile, you either:

Need to check the documentation for that plugin if they provide an interface to re-initialize the configs.
You could also tinker with the internals of the plugin, find where that value is stored, and modify it there.
Remove the existing element, replace it and reinitialize the plugin on that new element with the new settings. Crude, but should work.
Hope that the plugin relied on the config object for getting the location path and didn't internally cache it. Objects are passed by reference, and you can edit it as long as you have that reference. If they didn't cache it, then you can directly do settings.formData.location = anotherValue and it should change the location the plugin uses.

Thanks for the answer and the detail in it. The fourth option, or rather @tymeJV answer did the trick. — George Ortiz, Dec 30 '13 at 17:06

score 0 · Answer 3 · answered Dec 30 '13 at 17:07

you need to do all this with in the on click event as the items outside are being run anyway and all you are doing on a the click is setting the value.

  var location_dir = 'home/user';

  $(document).on('click', 'a.folder', function () {
      var loc = ($(this).data("location"))? $(this).data("location") : location_dir;
      $("#mulitplefileuploader").uploadFile({formData: {location:  loc }});
  });

Update jQuery variable on event

3 Answers3