1

ajax呼び出しが成功した後、確認メッセージを表示しようとしています。ユーザーがリンクをクリックして別のユーザーにメッセージを送信すると、ダイアログが開きます。彼らがメッセージを送信した後、私はフォームを非表示にし、「送信されたメッセージ」などの簡単なメッセージが表示されます。ただし、ユーザーがダイアログを閉じて再度開いた後、フォームは再表示されず、メッセージは引き続き表示されます。

これは、ポップアップダイアログとメッセージフォームです。

    <a href="#MessageStudent" class="popUpLink">Message</a>
    <div class="popUpDialog" id="messageStudentDialog">
        <div id="messageStatus"></div>                                      
        <form class="sendMessageForm" id="studentForm" action="" method="POST">     
            <fieldset>
                <input type="hidden" value="317" name="studentID">
                <textarea rows="3" cols="35" name="message"></textarea>
                <input type="submit" value="Send Message">
            </fieldset>
        </form>
    </div>

これは、リンクとダイアログをクリックするためのjQueryハンドラーです。

function popUpDialogs()
{
    $('.popUpLink').each(function()
    {
         if(!$.data(this, 'dialog')) 
         {
            $divDialog = $(this).next('.popUpDialog');
            $.data(this, 'dialog', $divDialog.dialog(
            {
                autoOpen: false,
                modal: true,
                title: $divDialog.attr('title')

            }));
         }
    }).on('click',function() 
    { 
        $.data(this, 'dialog').dialog('open'); 
        $('form',$divDialog).toggle(); //This is what I'm trying but doesn't work
        return false; 
    });
}

これは私のAJAXフォームハンドラーです：

$('form.sendMessageForm', '.popUpDialog').on('submit', function()
{
    event.preventDefault();
    var form =  $(this);
    var popUpDialog = form.parent();
    var data = new Array();
    var data = form.serialize();
    $.post('',  { sendMessage : data}, function(response)
    {           
        $(form).toggle();//This is what I'm trying but it doesn't work
        $('div#messageStatus', popUpDialog).html("<p>Message Sent!</p>").hide().fadeIn(3000).animate({opacity: 1.0}, 3000)     //<== wait 3 sec before fading out
          .fadeOut('slow', function()
      {

      });
    });
});

どんな助けでもいただければ幸いです！ありがとう！

4

2 に答える 2

0 
$('.popUpLink').each(function()
{
     if(!$.data(this, 'dialog')) 
     {
        $divDialog = $(this).next('.popUpDialog');
        $.data(this, 'dialog', $divDialog.dialog(
        {
            autoOpen: false,
            modal: true,
            title: $divDialog.attr('title')

        }));
     }
}).on('click',function() 
{ 
    $.data(this, 'dialog').dialog('open'); 
    $('form',this).toggle(); //This is what I'm trying but doesn't work
    return false; 
});

ただの考え（テストされていません）ですが...- $('form',this)'これは'リンクを参照している.popUpLinkと私は信じています。そして、あなたのフォームはそのリンクの中にはありません。再度表示するフォーム（IDまたはクラス）に適切なセレクターを使用します

于 2012-04-13T09:44:50.370 に答える
0

これは私のプロジェクトで行ったことです。削除が成功した場合は、サーバーから1または0として応答し、divを非表示にします。同じように実行できます。これは、私のプロジェクトからのコードスニッペストです。

 $(".deleteDiv").unbind("click").click(function (event) {
        event.preventDefault();

        if ($(".deleteDiv")) {

            var dataString = 'PostId=' + $(this).attr("data-id");
            $.ajax({
                type: 'POST',
                url: "ajax/deletepost.aspx",
                context: this,
                //                data: { TargetId: "" },
                data: dataString,
                success: function (data) { /* do something here */
                    if(data == 1){
                     $(this).parents("div.story_wrapper").addClass("noData");
                     $(".noData").slideUp();
                    }

                },
                error: function (xhr, type, exception) { alert("Error: " + type); }
            })

        }

    return false;

});

それは100％動作し、私のプロジェクトで失敗することはありませんでした（うまくいけば!!!!）

また、noDataを使用したように、使用クラスをフラグとして非表示および表示します。

于 2012-04-13T11:14:50.673 に答える