jQuery - 刷新DIV的内容

时间:2012-07-03 13:39:31

标签: forms jquery jquery-selectors

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

2 个答案:

答案 0 :(得分: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 + ")");

答案 1 :(得分: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();
    ...
});