Home/ Questions/Q 6828329
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T22:22:13+00:00

I’m sure a similar question has been asked before, and I’ve looked around for

  • 0

I’m sure a similar question has been asked before, and I’ve looked around for a while for an answer that I can apply to my particular situation, but haven’t had any luck. Basically, I have a web application that acts like a time management system for its users, allowing them to see, add, and modify time intervals which they’ve applied to a bug or problem at work. For the time being, I have a simple select box — populated via an AJAX call to a servlet — that the user can select their name from. Once their name (or any other, for that matter) is selected, the page then makes another AJAX call to the servlet to load all of their bugs and information.

I have been asked to save the last user selected in this select box to be saved as a cookie so that each time the page is loaded, it will automatically load in the information and bugs of that previously-selected user. Yes, I know this isn’t quite as protected and streamlined as a full-fledged login authentication system, but it’s what I’ve been asked to do for the time being. This is what I’ve been trying thus far:

HTML

<!DOCTYPE HTML>
<html>
    <head>
        <title>Lighthouse</title>
        <script type="text/javascript" src="scripts/jquery.min.js"></script>
        <script type="text/javascript" src="scripts/jquery.cookie.min.js"></script>
        <script type="text/javascript" src="scripts/index.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                Script();
            });
        </script>
    </head>
    <body>
        <p>
            <label for="users">Select Your Name:&nbsp;</label>
            <select id="userSelect" name="user" onChange="javascript:Update();">
                <option value="561">Jon Smith</option>
                <option value="482">Bill Murray</option>
                <option value="711">Luke Skywalker</option>
                <option value="241">Harry Potter</option>
            </select>
        </p>
    </body>
</html>

JavaScript

function Script() {
    InitializeUsers();
}

function InitializeUsers() {
    var userId = $.cookie("fogbugzId");
    if(userId != null) $("#userSelect").val(userId).change();
}

function Update() {
    var userId = $("#userSelect").val();
    $.cookie("fogbugzId", userId, { expires: 365 });

    $.get("servlet?command=getBugs", {
        id: userId
    }, function(data) {
        LoadEverythingAboutThatUser(data);
    }
}

Now, I’m making use of the jQuery Cookie plugin in order to create and look for the cookie I’m setting for the user. Now, I have it set up so that each time the page is loaded, the script first checks for the cookie to see if one is present. If so, it changes the selectbox’s value to that of the user ID stored in the cookie. In theory, this is supposed to induce the onChange function of the select box, Update(). It may be a bit redundant, but I then set the cookie again to the current ID selected by the box, just in case they chose a different name. So, each time the box changes, it saves the ID. Each time the page loads, it looks for an ID and loads the page with the information of that user.

Unfortunately, it’s not working properly. I check Chrome’s cookie list and find that the ID is clearly saved properly:
enter image description here
However, when I refresh the page, the select box either remains at the starting option or doesn’t even load the names into the select box all together. Can anyone either see a problem with what I have here or perhaps have a better recommendation?

Edit:
In addition to updating my code to match the answer I selected, it seemed as though I also needed to place the checking of the cookie and tiggering of the selectbox change within the .complete(function() {}) of the $.get call. I’m not sure if this is right, but I think that since the AJAX request was not immediate, I was having issues with trying to select an option that had not been fully loaded into the selectbox. With this change, I ensure that all of the options are loaded in before I attempt to trigger a change to my desired option.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    the issue is with .change();. this function is supposed to bind a change event to an element, not fire a change.

    what you can do is use .trigger(‘change’):

    if(userId != null) $("#userSelect").val(userId).trigger('change');

    The best way to enable the trigger is to delete the onChange attribute of the select, and add the following code $(document).ready block:

    $('#userSelect').change(function() {
    Update();
});

    If you use inline “onChange”, the update function shall be defined on page load, it may not work in some scenarios (ajax, fiddle). (basically, you have to define the update function in the html, before the select, to be certain). Moreover, it’s better to have all the code in a js “file”.

    here is a fiddle

    • 0