'Global variable not changing on event

I have a global variable called userValue. When the page loads, this value is finding the selected option and storing that options value. On load it would be storing default or null since the option is disabled. However, onchange (more options populate dynamically per site), I'm trying to store the value of the selected option globally so I can simply keep reusing the varialbe userValue. What I have below works properly when I include:

   userValue = $('#my_SiteUsers').find(':selected').val();

in the RefreshGroupList() function, but if i have to do that, doesn't that defeat the purpose of having a global variable? Right now, any change I make returns "default"

HTML:

 <select id="my_SiteUsers" style="width:200px;" onchange="RefreshGroupLists()">
        <option value='default' disabled="disabled">Select a user</option>
      </select>

JS:

  var user, userValue, userText, group, strHTMLSiteUsers, strHTMLSiteGroups, strHTMLAvailable, strHTMLAssigned, arrOptionsAssigned, arrGroups, arrUsers, intOpts, booMatch, booErr;

        $(document).ready(function(){ 
            user = $('#m

y_SiteUsers');
        userValue = $('#my_SiteUsers').find(':selected').val();
        userText = $('#my_SiteUsers').find(':selected').text();
        group = $('#my_SiteGroups');
        groupsAssigned = $("#my_SPGroupsAssigned").html("");
        groupAvailable = $("#my_SPGroupsAvailable").html("");
        userAssigned = $("#my_SPUsersAssigned").html("");
        userAvailable = $("#my_SPUsersAvailable").html("");

        $("button").click(function() { return false; });

        populateUsers();
            populateGroups();
        });


function RefreshGroupLists(){
            //Populate the Groups Assigned
          $().SPServices({
              operation: "GetGroupCollectionFromUser",
              userLoginName: userValue,
              async: true,
              completefunc: function(xData, Status) {
                $(xData.responseXML).find("errorstring").each(function() {
                  alert("User not found");
                  booErr = "true";
                  return;
                });
                $(xData.responseXML).find("Group").each(function() {
                  strHTMLAvailable += "<option value='" + $(this).attr("Name") + "'>" + $(this).attr("Name") + "</option>";
                  arrOptionsAssigned[intOpts] = $(this).attr("Name");
                  intOpts = intOpts + 1;
                });
                groupsAssigned.append(strHTMLAvailable);
              }
          });
}

JSFiddle

javascriptjqueryvariablesglobal-variablesjavaspringhibernate


Solution 1:[1]

I would do something like this.

// window.userValue = ''; // not necessary

$(document).ready(function(){
    var userValue;

    $('#my_SiteUsers').on('change', function(){
        RefreshGroupLists();
    });

    function RefreshGroupLists(){
        userValue = $('#my_SiteUsers').find(':selected').val();
        alert(userValue);
    }  
});

Its better to keep event handlers in your JS, not in your HTML, and to declare globals, though you shouldn't really need a global var for this, whatever you need to do with userValue can be put in RefreshGroupLists.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions