如何在隱藏表單以顯示成功的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消息後重新顯示錶單？

回答

相關問題