动态加载DIV

时间:2017-07-07 15:34:46

标签: jquery html ajax forms

我有多个复选框,这些复选框是根据jsp中核心标记的foreach循环从集合中迭代形成的,带有两个参数ID(文本框的id)和密钥。两个ID和密钥都填充了动态地基于迭代。在Oncheck上,它调用一个具有AJAX代码的函数。来自ajax的响应,这是一个JSON,JSON根据密钥在相同的div上动态动态。我正在使用标签视图类似于您在Compose中可以找到的内容。这些选项卡也由id的复选框动态控制。如果单击复选框,则按钮可见,反之亦然。(注意:按钮也会触发ajax调用)我现在面临的问题是,如果我禁用复选框,则div保留旧密钥的值。我知道问题在于我的代码设计。任何人都说如何重新设计。我会附上代码供参考:

function enableButton(id, key) {
        openError(key);
        if (!flag) {
            document.getElementById("resultTab").style.display = 'block';
        }
        if (flag){
            document.getElementById(id).checked = false;
        }
        var lastCharacterOfId = document.getElementById(id).id.charAt(document
                .getElementById(id).id.length - 1);
        var checkBox = document.getElementById(id);
        var button = document.getElementById("btn_" + lastCharacterOfId);
        if (checkBox.checked) {
            $("#good").html('');
            button.style.display = 'block';
            button.disabled = false;
            counterForScript++;
            //openError(key);
        } else {
            $("#good").html('');
            button.style.display = 'none'
            button.disabled = true;
            if(!flag){
            counterForScript--;
            }
            if (counterForScript > 0) {
                console.log(checkBoxKeyArray[counterForScript]);
            }
        }
        if (counterForScript == 0) {
            document.getElementById("resultTab").style.display = 'none';
        }

function openError(key){

    if ($("#aFile").get(0).files.length == 0) {
        alert("Please select a file ");
        flag = true;
        return false;
    }

    if ($("#aFile").val().substring($("#aFile").val().lastIndexOf(".") + 1,
            $("#aFile").val().length) != 'log') {
        alert("Please select only Log Files");
        flag = true;
        return false;
    }

    $("#good").html('');
    var length = 0;
    $(document)
            .ready(
                    function() {

                        $.ajax({
                                    type : "POST",
                                    enctype : 'multipart/form-data',
                                    url : "uploadServlet",
                                    data : formData,
                                    processData : false,
                                    contentType : false,
                                    cache : false,
                                    timeout : 600000,
                                    dataType : 'json',

                                    success : function(data) {

                                        $("#good").append("<br><span align=\"left\" style=\"margin-left:1%\">Total Number of occurences of the search string <font style=\"font-weight: bold; text-transform: uppercase;\">"
                                                                + key
                                                                + "</font>: "
                                                                + data.length
                                                                + "</span>");
                                        if (data.length > 0) {$("#good").append(
                                                            "<p align=\"left\" style=\"margin-left:1%;margin-top:4%\">Your search string <font style=\"font-weight: bold; text-transform: uppercase;\">"
                                                                    + key
                                                                    + "</font> can be found in Line Numbers:");
                                        }
                                        $
                                                .each(
                                                        data,
                                                        function(id,
                                                                element) {
                                                            $("#good")
                                                                    .append(
                                                                            "<span style=\"margin-left:1%;\">"
                                                                                    + element
                                                                                    + "</span></p>");
                                                        });

                                    },
                                });
                    });
}

HTML代码:                                                                      

                                        文件:                                                                               

                                

                            <p>
                                <font style="font-weight: bold;">SEARCH:</font>
                                <c:forEach var="hm" items="${logAnalysisHashMap}">
                                    <c:set var="count" value="${count + 1}" scope="page" />
                                    <input type="checkbox" id="cb_${count}"
                                        onchange="enableButton(this.id,'${hm.key}');" />
                                    <font style="font-weight: bold; text-transform: uppercase;">
                                        ${hm.key} </font>
                                </c:forEach>
                            </p>
                        </div>


                        <div class="tab" id="resultTab"
                            style="width: 90%; margin-left: 5%; height: 40%; margin-top: 2%; position: relative; overflow: auto; display: none">

                            <div style="display: block; clear: both;">
                                <c:forEach var="hm" items="${logAnalysisHashMap}">
                                    <c:set var="countbtn" value="${countbtn + 1}" scope="page" />
                                    <button class="tablinks" id="btn_${countbtn}"
                                        onclick='openError("${hm.key}");' style="display: none;"
                                        disabled>
                                        <font style="font-weight: bold; text-transform: uppercase;">${hm.key}
                                        </font>
                                    </button>
                                </c:forEach>
                            </div>

1 个答案:

答案 0 :(得分:0)

  

我现在面临的问题是,如果我禁用复选框,div会保留旧密钥的值。

您可以使用change的jQuery checkbox事件,并在禁用该复选框时删除其值。例如 -

$(document).ready(function() {

    $('#checkbox1').change(function() {  //Detecting change!!
        if(this.checked) {               //When checkbox is clicked
            var returnVal = confirm("Are you sure?");
        }

        else{
            //check box is unchecked!! 
            //Remove your div key value..
        }
    });
});

有关.change()(jQuery)

的更多详细信息,请参阅this