Question

我确定之前已经问过类似的问题了，我已经四处寻找答案，我可以应用于我的特定情况，但没有运气。基本上，我有一个Web应用程序，它像用户的时间管理系统，允许他们查看，添加和修改他们应用于工作中的错误或问题的时间间隔。目前，我有一个简单的选择框 - 通过对servlet的AJAX调用填充 - 用户可以从中选择他们的名字。一旦选择了他们的名字（或任何其他名称），页面就会对servlet进行另一次AJAX调用，以加载他们的所有错误和信息。

我被要求保存在此选择框中选择的最后一个用户保存为cookie，这样每次加载页面时，它都会自动加载以前选择的用户的信息和错误。是的，我知道这不像完整的登录身份验证系统那样受到保护和简化，但这是我暂时要求做的事情。这是我到目前为止所尝试的：

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);
    }
}

现在，我正在使用jQuery Cookie插件来创建和查找我为用户设置的cookie。现在，我已将其设置为每次加载页面时，脚本首先检查cookie以查看是否存在cookie。如果是这样，它会将selectbox的值更改为存储在cookie中的用户ID的值。理论上，这应该引起选择框onChange的{{1}}功能。它可能有点多余，但我再次将cookie设置为框中选择的当前ID，以防它们选择不同的名称。因此，每次更改框时，都会保存ID。每次加载页面时，它都会查找ID并加载包含该用户信息的页面。

不幸的是，它无法正常工作。我查看了Chrome的Cookie列表，发现ID已明确保存： enter image description here 但是，当我刷新页面时，选择框仍然保留在启动选项中，或者甚至不会将名称一起加载到选择框中。任何人都可以看到我在这里有什么问题，或者可能有更好的推荐？

修改除了更新我的代码以匹配我选择的答案之外，似乎我还需要在Update()调用的.complete(function() {})内对cookie进行检查并更改选择框的更改。我不确定这是否正确，但我认为由于AJAX请求不是立竿见影的，我在尝试选择尚未完全加载到选择框中的选项时遇到了问题。通过此更改，我确保在尝试触发对所需选项的更改之前已加载所有选项。

Answer 1

问题在于.change();。此函数应该将更改事件绑定到元素，而不是触发更改。

你可以做的是使用.trigger（'change'）：

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

启用触发器的最佳方法是删除select的onChange属性，并添加以下代码$（document）.ready block：

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

如果使用内联“onChange”，则应在页面加载时定义更新函数，它可能在某些情况下不起作用（ajax，小提琴）。（基本上，你必须在html中定义更新函数，在选择之前，确定）。此外，最好将所有代码放在js“文件”中。

here is a fiddle

使用Cookie记住以前的用户

HTML

的JavaScript

1 个答案: