Question

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

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

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

这是我处理关闭.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 + ")");
});

Answer 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 + ")");

Answer 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();
    ...
});

jQuery - 刷新DIV的内容

2 个答案: