Question

I’m having issues getting a variable declared in an .click function to be updated in a Get function within the click function. I’ve gathered that even though the variable has the same name, within the Get function it is really declaring it anew.

I’ve tried to find examples helping me, but it appears to me that the Get method is such a specialized function that the examples didn’t seem to apply.

I would like the value of ‘SettingContentToEdit’ to get updated with information retrieved with the Get function.

Below is the code.

Thank you for your help!

 $(".cellSetting").click(function () {
          var clickedClass = $(this).attr("class");
          var clickedItemID = $(this).attr("id")
          var SettingContentToEdit = "not changed";

          var JSONSend = {
              'ItemName': clickedItemID,  //send the item name so the model knows which one to pull up!
              'ItemSetting': clickedClass
          };




          $.get(
                        '/Home/getItem',
                         JSONSend,
                          function (data) {

                              //  $('#dialog').html(data.ItemSettings[data.SettingToEdit]);

                              SettingContentToEdit = data.ItemSettings[data.SettingToEdit];

                              alert(SettingContentToEdit); //returns the correct info

                          }
                        );

          alert(SettingContentToEdit);  //returns "not changed"

});

Answer 1

Your issue is that your ajax call is asyncronous. The success handler for the get() function is called some time after your click handler and the alert() has already completed. You can refer to the local variables in your success handler, but the code that follows the success handler executes BEFORE the success handler does.

This is because your get() operate is asynchronous. Calling it just STARTS the networking operation and then your javascript execution continues (while the networking operation works in the background). After starting the networking operation, your alert() is called. Then, some time LATER, the Ajax call completes and the success handler is executed.

This is a very common mistake and has indeed been asked and answered hundreds (if not thousands) of times here on SO (I’ve personally probably answered 20-30) so you are not alone in missing this understanding at first.

If you want to use the results of the ajax operation, then you need to put the code that does that either in your success handler or put it in a function that you call from your success handler. You cannot put it after the get() function because it will execute too soon before the results are known.