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

我试图在成功的ajax调用后显示确认消息。用户点击链接发送消息给另一个用户，打开一个对话框。在他们发送信息后，我隐藏了表单，并显示一条简单信息，如“发送信息”。但是，用户关闭对话框并重新打开后，表单不会再出现，并且消息仍然存在。如何在隐藏表单以显示成功的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() 
     { 

     }); 
    }); 
});

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

来源

2012-04-13 Johnathan Au

您是否在Developer Tools控制台中看到任何javascript错误消息？你知道这个函数返回成功吗？您是否说您的div＃messageStatus弹出窗口正在显示并淡出，但弹出窗口消失后窗体不显示？除非你打算把东西放在那里，否则你可以调用fadeOut（'slow'）。是否有可能你的两个切换互相取消？你是否已经逐行打破了代码？ – veeTrain 2012-04-13 12:16:42

没有错误，因为它没有错。如果你明白我的意思，这就是我正在努力的逻辑。我在说隐藏窗体后messageStatus正在消失，然后消息就消失了。我的抱怨是，如果用户关闭中间动画对话框会怎么样？消息的淡入淡出动画暂停，直到用户重新打开对话框，显然这不是用户友好的。当用户在对话框出现时关闭对话框时，表单在重新打开时应该重新出现。 – 2012-04-13 12:43:32

您的选择器对我来说似乎过于复杂。我会尝试给出ID并选择它，而不是'$（'form'，$（this）.next（'。popUpDialog'））'你的场景很难理解。也许你可以演示（或模拟）[jsfiddle]（http://jsfiddle.net）中的行为。 – veeTrain 2012-04-13 13:51:08

$('.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-13 09:44:50 Deadlykipper

我已经试过$ divDialog，我已经保存为一个变量，它指向对话框，并且表单在链接内，并且不起作用 – 2012-04-13 10:03:07

你不能只是''（“＃studentForm”） .show（）;'？或者如果你需要更通用的'$（this）.next（“。popUpDialog”）。find（“form”）。show（）;'？ – Deadlykipper 2012-04-13 10:19:54

Nope :(不起作用:( – 2012-04-13 11:15:25

这是我在我的项目做了，我只是给了响应为1或0从服务器如果删除成功只是隐藏的div，你可以做到这一点是相同的像，这是从我的项目中的代码snippest：

$(".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-13 11:14:50 Jitendra

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

回答

相关问题