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。

隐藏它以显示成功的AJAX消息后，如何重新显示该表单？

2 个答案: