0

我在网页上的 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 + ")");
});
4

2 回答 2

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 + ")");
于 2012-07-03T13:43:29.493 回答
0

...我需要这样做，以便在关闭 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();
    ...
});
于 2012-07-03T13:44:44.180 回答