jQuery - 刷新 DIV 的内容答案

【问题标题】：jQuery - Refresh Contents of a DIVjQuery - 刷新 DIV 的内容
【发布时间】：2012-07-03 13:39:30
【问题描述】：

我在网页上的 jQuery 弹出窗口中有一个表单。 jQuery 弹出窗口是一个名为 .vote-form 的 div，其中的表单名为“#form”。

提交表单后，jQuery 弹出窗口中的内容会变为成功消息。我需要这样做，以便在关闭 jQuery 弹出窗口时删除成功消息并将表单刷新回原始表单，以便当再次打开 jQuery 弹出窗口时，表单再次显示而不是成功消息.

我为获得此结果而进行的微弱尝试涉及在关闭 jQuery 弹出窗口时刷新整个页面。这部分具有预期的结果，但是当页面刷新时，大多数浏览器都会弹出一个窗口，询问用户是否要重新提交表单内容。我需要避免这种情况。

这是我处理关闭 .vote-form 的代码：

$('.vote-form-close').click(function(event) {
    event.stopPropagation();
    $(".vote-form").fadeOut("normal");
    $("#the-lights").fadeTo("slow",0);
    $("#the-lights").css({'display' : 'none'});
    window.location.reload();
});

我怀疑它可能只刷新 div，而不是整个页面，但我不知道如何完成它。

有人可以帮助我吗？

编辑：根据以下答案之一，我修改了我的代码。我还想展示用于打开表单的代码：

$('.vote').click(function() {
    $(this).parent().find(".vote-form").fadeIn("normal");
    $("#the-lights").css({'display' : 'block'});
    $("#the-lights").fadeTo("slow",0.7);
});
$('.vote-form-close').click(function(event) {
    event.stopPropagation();
    $(".vote-form").fadeOut("normal");
    $("#the-lights").fadeTo("slow",0);
    $("#the-lights").css({'display' : 'none'});
    $(".vote-form").load(window.location.href  + " .vote-form-container");
});

这就是问题所在 - 我在页面上有 3 个表单。加载“vote-form-container”时，会将所有三个表单加载到 .vote-form 框中 - 如何修改代码以仅加载作为特定 .vote-form 一部分的 .vote-form-container - 我怀疑我必须使用 $(this) 但我尝试将代码修改为此并没有用：

$(".vote-form")(this).load(window.location.href  + " .vote-form-container");

我认为我做错了。

编辑 2：现在“关闭”按钮在第一次重新加载表单后不起作用：

$('.vote').click(function() {
    $(this).parent().find(".vote-form").fadeIn("normal");
    $("#the-lights").css({'display' : 'block'});
    $("#the-lights").fadeTo("slow",0.7);
});
$('.vote-form-close').click(function(event) {
    event.stopPropagation();
    $(".vote-form").fadeOut("normal");
    $("#the-lights").fadeTo("slow",0);
    $("#the-lights").css({'display' : 'none'});
    var current_form = $(this).closest('.vote-form'),
    index = $('.vote-form').index(current_form)
    current_form.load(window.location.href  + " .vote-form-container:eq(" + index + ")");
});

【问题讨论】：

标签： forms jquery jquery-selectors

【解决方案1】：

不要重新加载页面，而是重定向您的用户：

window.location.href = window.location.href.toString()

或者用ajax加载新表单：

$(".vote-form").load(window.location.href  + " .vote-form");

有关 ajax 方法的更多信息，请参阅api.jquery.com/load/#loading-page-fragments

更新：

使用 jQuery 的 index 函数，您只能替换当前表单。

 // I asume your button is in the form
 var current_form = $(this).closest('.vote-form'),
     index = $('.vote-form').index(current_form)

 current_form.load(window.location.href  + " .vote-form:eq(" + index + ")");

【讨论】：

这段代码有帮助，但是，如果我在页面上有多个表单实例怎么办？查看我对原始帖子的编辑
它可能，我想，但是否可以使用 $this 来选择正确的实例？我在上面扩展了我的帖子，请看一下
它可以工作，但是，当重新加载表单时，它会停止关闭按钮的工作。请参阅上面的更新代码。事实上，它似乎破坏了应该在框内运行的任何脚本（表单使用 ajax 提交）

【解决方案2】：

...我需要这样做，以便在关闭 jQuery 弹出窗口时，删除成功消息并将表单刷新回原始表单...

所以，如果我理解得很好：

$('.vote-form-close').click(function(event) {
    event.stopPropagation();
    var vf = $(".vote-form");

    /* fadeout and remove inner content of the popup */
    vf.fadeOut("normal", function() { vf.empty(); });

    /* reset the form */
    document.getElementById('form').reset();
    ...
});

【讨论】：