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 回答