javascript - sessionScope HashMap 和复选框

Question

问题

我遇到了严重的问题(也许更多的是理解问题？)，sessionScope 只是不想与我合作？事情是这样的:

• 我的网站有很多复选框。单击其中一个时，使用 ajax 调用将复选框信息存储到 sessionScope hashmap 中。这有效。
• 如果取消选中复选框，则会再次进行 ajax 调用，这一次，它会从 sessionScrope HashMap 中删除该条目。这有效。
• 检查和取消检查非常有效，因为我在每次 ajax 调用后都会列出 hashmap 以查看调试信息。

现在...如果我用复选框刷新我的主站点，另一个 JavaScript 会获取 sessionScope HashMap 并检查存储在 sessionScope HashMap 中的复选框。非常不言自明，对吧？

嗯，在我刷新站点后，页面看起来就像是使用上一个 sessionScope HashMap(意思是刷新页面之前的那个)。但是，事情并没有结束。第二次刷新后，显示正确的结果。第三次刷新后，它显示了之前的 HashMap 状态，因此它保持不变。 :|

我在这里遗漏了什么吗？一旦我刷新，HashMap 现在就从之前的状态恢复过来，无需向其写入任何内容，只需读取它。

这怎么可能？

请帮助我理解这件事，因为我不知道发生了什么......

致以诚挚的问候，

格雷戈尔

更新(代码):

复选框页面:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
    xmlns:xc="http://www.ibm.com/xsp/custom">

    <xp:this.resources>
        <xp:styleSheet href="/gama.css"></xp:styleSheet>
        <xp:styleSheet
            href="#{javascript:ROOT_PATH}/js/jquery-ui/css/smoothness/jquery-ui-1.10.3.custom.min.css">
        </xp:styleSheet>
        <xp:script src="/global.jss" clientSide="false"></xp:script>
        <xp:script src="#{javascript:ROOT_PATH}/js/jquery-2.0.3.min.js"
            clientSide="true">
        </xp:script>
        <xp:script
            src="#{javascript:ROOT_PATH}/js/jquery-ui/js/jquery-ui-1.10.3.custom.min.js"
            clientSide="true">
        </xp:script>
        <xp:script src="#{javascript:ROOT_PATH}/gama.js"
            clientSide="true">
        </xp:script>
    </xp:this.resources>


    <xp:this.data>

        <xp:dominoView var="view1" databaseName="***HIDDEN***.nsf"
            viewName="dflt">
        </xp:dominoView>
    </xp:this.data>

    <xp:table style="width:80.0%" border="1">
        <xp:tr>
            <xp:td
                style="width:100.0px;border-bottom: 1px solid #e8e8e8;" valign="top"
                styleClass="xspPanelViewColumnHeader">
                <xp:br></xp:br>
                10.5.*
            </xp:td>
            <xp:td valign="top"
                style="border-bottom: 1px solid #e8e8e8;width:auto">
                <xp:checkBox text="10.5.33" id="checkBox3"></xp:checkBox>
                <xp:checkBox text="10.5.34" id="checkBox4"></xp:checkBox>
                <xp:checkBox text="10.5.35" id="checkBox5"></xp:checkBox>
                <xp:checkBox text="10.5.38" id="checkBox6"></xp:checkBox>
                <xp:checkBox text="10.5.39" id="checkBox7"></xp:checkBox>
                <xp:checkBox text="10.5.40" id="checkBox8"></xp:checkBox>
                <xp:br></xp:br>
                <xp:checkBox text="10.5.49" id="checkBox9"></xp:checkBox>
                <xp:checkBox text="10.5.50" id="checkBox10"></xp:checkBox>
                <xp:checkBox text="10.5.51" id="checkBox11"></xp:checkBox>
                <xp:checkBox text="10.5.54" id="checkBox12"></xp:checkBox>
                <xp:checkBox text="10.5.55" id="checkBox13"></xp:checkBox>
                <xp:checkBox text="10.5.56" id="checkBox14"></xp:checkBox>
            </xp:td>
        </xp:tr>
        <xp:tr>
            <xp:td styleClass="xspPanelViewColumnHeader" valign="top"
                style="border-bottom: 1px solid #e8e8e8;">
                10.6.*
            </xp:td>
            <xp:td style="border-bottom: 1px solid #e8e8e8;">
                <xp:checkBox text="10.6.32" id="checkBox15"></xp:checkBox>

            </xp:td>
        </xp:tr>
        <xp:tr>
            <xp:td styleClass="xspPanelViewColumnHeader"
                style="border-bottom: 1px solid #e8e8e8;">
                192.*
            </xp:td>
            <xp:td style="border-bottom: 1px solid #e8e8e8;">

            </xp:td>
        </xp:tr>
        <xp:tr>
            <xp:td styleClass="xspPanelViewColumnHeader"
                style="border-bottom: 1px solid #e8e8e8;">
                193.*
            </xp:td>
            <xp:td style="border-bottom: 1px solid #e8e8e8;">

            </xp:td>
        </xp:tr>
        <xp:tr>
            <xp:td styleClass="xspPanelViewColumnHeader"
                style="border-bottom: 1px solid #e8e8e8;">
                10.21.*
            </xp:td>
            <xp:td style="border-bottom: 1px solid #e8e8e8;">


                <xp:checkBox text="10.21.8" id="checkBox2"></xp:checkBox>
                <xp:checkBox text="10.21.12" id="checkBox1"></xp:checkBox>
            </xp:td>
        </xp:tr>
        <xp:tr>
            <xp:td styleClass="xspPanelViewColumnHeader" valign="top">
                172.24.*
            </xp:td>
            <xp:td>

            </xp:td>
        </xp:tr>
    </xp:table>
    <xp:br></xp:br>


    <div id="container"></div>



    <xp:eventHandler event="onClientLoad" submit="true"
        refreshMode="norefresh">
        <xp:this.action><![CDATA[#{javascript:

        // GET INFO FROM NETKEYS SESSIONSCOPE AND SAVE IT TO JSON FORMAT
        sessionScope.netKeys = (sessionScope.netKeys || new java.util.HashMap());
        var netKeysJSON:com.ibm.commons.util.io.json.JsonJavaObject = 
          new com.ibm.commons.util.io.json.JsonJavaObject();

        var arr_key = sessionScope.netKeys.keySet();
        //print ("Printing netKeys");
        for (x in arr_key) {
            print(x +" > "+ sessionScope.netKeys[x]);
            netKeysJSON.put(x, sessionScope.netKeys[x]);
        }
        sessionScope.netKeysJSON = "";
        sessionScope.netKeysJSON = netKeysJSON.toString();


        }]]></xp:this.action>
        <xp:this.script><![CDATA[

        // READ ALL JSON ENTRIES AND CHECK SPECIFIC CHECKBOXES!
        myVar = '#{javascript:sessionScope.get("netKeysJSON")}';

        //print("Printing JSON");
        if (myVar.length > 0) {

            var arr = $.parseJSON(myVar);

            for( key in arr ) {
                console.log(key +" >> "+ arr[key]);

                //$("label[for='"+ key +"']").remove();
                $("input[id='"+ key +"']").prop('checked', true);
                loadNetsInfo(arr[key], key, true);
            }

        }

]]></xp:this.script>
    </xp:eventHandler>
</xp:view>

ajax 页面:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" rendered="false">


    <xp:this.afterRenderResponse><![CDATA[#{javascript:
    var writer = facesContext.getResponseWriter();
    sessionScope.netKeys = (sessionScope.netKeys || new java.util.HashMap());

    var act = param.get("act");
    var ip  = param.get("ip");
    var id  = param.get("id");

    /**
     * problem!
    **/
    if (ip == null || ip.length == 0 ||
        id == null || id.length == 0 ||  
        act == null || act.length == 0) 
    {
        writer.write("ERROR: No parameters specified.");
        writer.endDocument();
        return false;
    }

    // NO PROBLEM!

    // REMOVE
    if (act == "rem") {
        sessionScope.netKeys.remove(id);
        print("Removed "+ id +" from netKeys");
    }

    // LIST ALL
    else if (act == "list") {
    print("List of all items in HashMap ("+ sessionScope.netKeys.size() +")");
        var arr_key = sessionScope.netKeys.keySet();
        for (x in arr_key) {
            print(x +" > "+ sessionScope.netKeys[x]);
            //netKeysJSON.put(x, sessionScope.netKeys[x]);
        }
    }

    // WIPE ALL
    else if (act == "wipe") {
        sessionScope.netKeys = null;
        sessionScope.remove("netKeys");
        print("Array netKeys wiped.");
    }

    // ADD + VIEW
    else if (act == "view") {
        var output = "<table style=\"display: inline-table; width: 150px;\" id=\"subnet_"+ ip +"\" border='1'><tr><td colspan=\"2\"><b>"+ ip +"</b></td></tr>";

        sessionScope.netKeys.put(id, ip);
        //writer.write("*** "+ sessionScope.netKeys.get(id));

        // start getting info now...

        var db:NotesDatabase = session.getDatabase("", "***HIDDEN***.nsf");
        var doc:NotesDocument = null;


        ////////////////
        // subnet info
        ////////////////        
        //var formula:string = "Subject=\"" + requestScope.query + "\"";
        var formula:string = "Form = \"SubnetInfo\" & subnet = \""+ ip +"\"";
        var dc:NotesDocumentCollection = db.search(formula);
        //print(formula);

        if (dc.getCount() > 0) {
            doc = dc.getFirstDocument();
            var desc = doc.getMIMEEntity("description").getContentAsText();
            output += "<tr><td colspan=\"2\">"+ desc +"</td></tr>";
        }

        else {
            print ("ID "+ id +" & IP "+ ip +" doesn't have any info. Removing entry.");
            sessionScope.netKeys.remove(id);
        }

        ////////////////
        // ip's
        ////////////////
        var formula:string = "Form = \"IP\" & Net = \""+ ip +"\"";
        dc = db.search(formula);
        //print("dc count: "+ dc.getCount());

        doc = dc.getFirstDocument();

        while (doc != null) {
            var docURL = "NetsSingle.xsp?action=editDocument&documentId=" + doc.getNoteID();
            //print(docURL);
            output += "<tr><td><a href=\""+ docURL +"\">"+ doc.getItemValueInteger("IP") +"</a></td><td>"+ ((doc.getItemValueString("inUseFor").length == 0) ? "&nbsp" : doc.getItemValueString("inUseFor")) +"</td></tr>";

            doc = dc.getNextDocument();
        }


        output += "</table>";
        writer.write(output);

    } // end: ADD + VIEW


writer.endDocument();
}]]></xp:this.afterRenderResponse>

</xp:view>

ajax 函数调用(选中/取消选中复选框时运行的 JavaScript):

function loadNetsInfo(ip, id, add) {
    var url = "_netsGetInfo.xsp?act="+ ((add == true) ? "view" : "rem") +"&ip="+ ip +"&id="+ id;

    //alert(url);

    $.ajax({
      url: url,
      cache: false,
      success: function(result){

        if (add == true) {
            $("#container").append(result);
        }
        else {
            $("[id='subnet_"+ ip +"']").remove();
        }

    }});
}

解决方案

正如 @stwissel 在回答我的问题时所建议的那样，他就是我所做的，解决了所有问题。这样，我还优化并替换了 javascript，这加快了代码流程!

faces-config.xml(通过 Package Explorer 打开)。请注意，我尝试创建自己的类(您可以这样做来扩展 HashMap)，但我不需要它，因此唯一合乎逻辑且简单的方法就是添加 HashMap 类型的 session 范围托管 bean。

  <managed-bean>
    <managed-bean-name>checkBoxStatus</managed-bean-name>
    <managed-bean-class>java.util.HashMap</managed-bean-class>
    <managed-bean-scope>session</managed-bean-scope>
  </managed-bean>

在我的主页上，所有复选框现在都由托管 bean 处理，如下所示:

<xp:checkBox text="10.5.33" id="checkBox3" value="#{checkBoxStatus['10.5.33']}"></xp:checkBox>

所以该值是 true 或 false，这意味着检查或不检查。所以 HashMap 看起来像

checkBoxStatus['10.5.33'] = true;
checkBoxStatus['10.1.31'] = true;
checkBoxStatus['192.168.1'] = false;
checkBoxStatus['10.6.207'] = true;

上面的代码只是根据我们在面孔中创建的 bean 来选中或取消选中复选框。

现在，我不再从 session 数组创建 JSON 字符串，然后使用 ajax 调用从服务器接收信息，而是循环遍历其 id 以 checkBox 开头/结尾的复选框:

<xp:this.script><![CDATA[
// GO THROUGH ALL CHECKED ELEMENTS, CALL _netsGetInfo
$( "input[id*='checkBox']:checked" ).each(function( index ) {
        var id = $(this).attr('id');
        var ip = $("label[for='"+ id +"']").text();
        var ip_clean = ip.replace(/\./g, "_");

        console.log( index + ": " + id +", "+ ip +", "+ ip_clean );
        loadNetsInfo(ip, id, true);
});
]]></xp:this.script>

_netsGetInfo.xsp 不像以前那样管理任何 session HashMap。

案件已结，一切顺利!

非常感谢 stwissel 和 stackoverflow 社区。遗憾的是，IBM Developerworks 社区根本没有提供任何帮助。

Answer 1

不建议在更改复选框时运行服务器往返。我要做的就是:将复选框绑定(bind)到托管 bean。例如，将其称为复选框状态。然后您的复选框具有 value="#{checkboxstatus['someid']}"绑定(bind)将确保值正确更新。然后，您可以决定是否将每个框的更改发送回，或者仅将其发送回用户想要执行的操作。该bean可以是默认的HashMap