使用 Ajax 提交表单后 Jquery/Ajax/CSS 显示/隐藏 div答案

【问题标题】：Jquery/Ajax/CSS show/hide div after form subimit with Ajax使用 Ajax 提交表单后 Jquery/Ajax/CSS 显示/隐藏 div
【发布时间】：2017-08-02 16:44:44
【问题描述】：

我在使用 Ajax 发布表单后显示隐藏的 DIV 时遇到问题。设置是这样的；

index.html - 我的内容和表单从资源页面加载到 div 中

<div id="inst_stud_resource_change_success" style="display: none;">
            <div class="greenbox">
            Deleted!
            </div>
        </div>
        <div id="inst_stud_resources_getpackages">
            <script type="text/javascript">
                $("#inst_stud_resources_getpackages").fadeOut("slow").load('/inst/stud/resources/getpackages?inst_id={{ inst.id }}&stud_id={{ stud.id }}').fadeIn('slow');
            </script>
        </div>

/inst/stud/resources/getpackages.html - 此页面包含 index.html 上的 DIV 所需的表单和内容

Jquery 在 getpackages.html 上的使用方式类似；

<script type="text/javascript">
$(document).ready(function() {

$('#delete_package').on('submit', function(event) {

    $.ajax({
        data : {
            stud_id : $('#stud_id').val(),
            pck_id : $('#pck_id').val()
        },
        type : 'POST',
        url : '{{ url_for('mod_inst_stud.delete_package2') }}'
    })
    .done(function(data) {

        if (data.error) {
            $('#errorAlert').text(data.error).show(); // IGNORE haven't gotten this far
            $('#successAlert').hide(); // IGNORE haven't gotten this far
        }
        else {
            $("#inst_stud_resources_getpackages").hide(); // doesn't seem to do anything
            $('#inst_stud_resource_change_success').show(); // never shows the div on Index.html
            $('#inst_stud_resource_change_success').delay(3200).hide(); // never hides, since it is never shown..
            $("#inst_stud_resources_getpackages").load('/inst/stud/resources/getpackages?inst_id={{ inst.id }}&stud_id={{ stud.id }}').show(); // this seems to work since the div from index.html is updated with the new content from getpackages.html
        }

    });

    event.preventDefault();

});

});

有什么想法吗？我在 web 开发方面并不是很擅长，我的背景更多是在 python/flask，而不是 Jquery/Ajax/CSS。

【问题讨论】：

这个不太清楚，萌I am having an issue showing a hidden DIV after posting a form with Ajax，你需要说一下你现在有什么，到目前为止你做了什么
您确定您的事件处理程序绑定到#delete_package？我不知道#delete_package 在您的 HTML 中的哪个位置，但如果它是 #inst_stud_resources_getpackages 的子级，那么您的事件处理程序根本不会绑定。我建议使用浏览器的开发人员工具在代码中设置断点。这样你就可以准确地看到哪些代码正在被访问，哪些没有。例如，developers.google.com/web/tools/chrome-devtools/javascript
嗯，会发生什么......在表单提交之后，我返回一些 JSON 到 Ajax 以查看它是成功提交还是失败，如果成功我想显示一个 DIV 5 秒说它那是成功的。目前，我上面的代码在成功返回时根本没有显示 DIV。它所做的只是重新加载内容，但我希望在显示成功的 DIV 后将其放在最后。
是的，我知道 #delete_package 已绑定，因为 else 语句的最后一行有效。它将新内容重新加载到 DIV 中。但它之前的 3 行似乎什么也没做。我不知道为什么..
我认为 ajax 返回错误。 else 语句的最后一行没有执行。而是通过此脚本加载文档 $("#inst_stud_resources_getpackages").fadeOut("slow").load('/inst/stud/resources/getpackages?inst_id={{ inst.id }}&stud_id={{ stud. id }}').fadeIn('slow');

标签： javascript jquery css ajax jinja2

【解决方案1】：

我找到了解决办法..

else {
            $("#inst_stud_resources_getpackages").hide();
            $('#inst_stud_resource_change_success').fadeIn(1000);
            $('#inst_stud_resource_change_success').delay(2600).fadeOut(3500);
            $("#inst_stud_resources_getpackages").delay(7200).fadeIn().load('/inst/stud/resources/getpackages?inst_id={{ inst.id }}&stud_id={{ stud.id }}');
        }

显然在 Jquery 中有一个队列，但是 .load() 总是会排在最前面。所以它否定了我打电话的顺序。我不得不移动一些线条，并在 .load() 中添加一个动画，以延迟它以正确的方式加载。现在似乎运行良好。

【讨论】：