如何使表单在隐藏后重新出现以显示成功的 AJAX 消息

Question

我试图在成功的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()
      {
      });
    });
}); 

任何帮助将不胜感激！谢谢！

Answer 1

$('.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 或类）使用正确的选择器

Answer 2

这是我

在我的项目中所做的，我只是从服务器给出 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 一样。