0

Web ページの 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のみを更新することは可能だと思いますが、それを達成する方法がわかりません。

誰かが私を助けることができますか?

編集:以下の回答の1つに基づいて、コードを変更しました。また、フォームを開くために使用されるコードも示したいと思いました。

$('.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」がロードされると、3 つすべてのフォームが .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を参照してください。

アップデート：

jQueryindex関数を使用すると、現在のフォームのみを置き換えることができます。

 // 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 に答える