按钮单击删除dom隐藏元素阻止我显示它

时间:2016-12-27 16:53:42

标签: javascript ajax get

我做了一件简单的事情,但我不明白为什么会出现以下问题:当我在表单中输入一个值并单击按钮执行该功能时,“加载”#39;元素消失,无法显示。

Javascript如下:

<div>
    <input id="magLog" name="magLog" type="text" style="width: 500px;"/>
    <button id="StartITSMcheck">Check</button>
</div>
<div>
    <div id="logContainer" class="filtersUNoBorder" style="padding-left: 8px; height:auto">
        <div id="loading" class="clear loading">
                Caricamento in corso...</div>
        <!--Add text after check-->
    </div>
</div>    
<script type="text/javascript">
    $(document).ready(function () {
        $("#loading").hide();
    });
    $("#StartITSMcheck").click(function () {
        if ($("#magLog").val() != "" && $("#magLog").val() != undefined) {
            $('#loading').show();  // show the loading message.
            $.ajax({
                type: "GET",
                url: '<%= Url.Action("StartITSMcheck", "Integration") %>',
                async: false,
                data: { "magLog": $("#magLog").val() },
                datatype: "html",
                success: function (result) {
                    $("#logContainer").html(result);
                    $('#loading').hide(); // hide the loading message
                },
                error: function (req, status, error) {
                    if (req.responseText.indexOf('12017') != -1) {
                        alert("CATCH: Status: " + status + " Error " + req.responseText);
                    }
                    else {
                        alert("Error getting data.com -> Req.responseText: " + req.responseText + "Req.status: " + req.status + "  status: " + status + " error: " + error);
                    }
                }
            });
        } else $("#logContainer").html("<p>Gentilmente inserire un magazzino logico</p>");
    });
</script>

1 个答案:

答案 0 :(得分:1)

$("#logContainer").html(result);

这可能是导致问题的原因。您已使用响应替换div中的所有内容,其中包括您的加载元素。尝试将它放在div之外,如下所示:

<div id="logContainer" class="filtersUNoBorder" style="padding-left: 8px; height:auto">
    <!--Add text after check-->
</div>
<div id="loading" class="clear loading">Caricamento in corso...</div>