提交的表单，通过ajax的响应

目前我有这个，它很好地工作 - 这是一个电子邮件注册列表，它会根据情况返回成功的响应或错误。提交的表单，通过ajax的响应

$.ajax({ 
    type: "POST", 
    url: "mailing_list/mailing_list_add2.php", 
    data: dataString, 
    success: function(response) { 
     $('#emailform').html("<div id='display_block'></div>"); 
     $('#display_block')      
     .hide() 
     .fadeIn(500, function() { 
      $('#display_block').html(response) 
     });    
} 
}); 
return false; 
});

表单位于ID为“emailform”的div中，“display_block”为响应。我需要的是响应会在短时间后自动消失，然后表单淡入。我尝试了一些东西，但没有任何工作。

任何帮助什么添加到上面的代码将不胜感激。

来源

2012-03-19 Andy

假设您最初的HTML是什么样子，

<div id="emailform"> 
    <form> 
    ... 
    </form> 
</div>

你可以继续这样，

.ajax({  
type: "POST",  
url: "mailing_list/mailing_list_add2.php",  
data: dataString,  
success: function(response) { 

    var backupHtml = $('#emailform').html();   
    $('#emailform').html("<div id='display_block'></div>");    

    $('#display_block')        
    .hide()  
    .html(response)  
    .fadeIn(500, function() {    
     $(this).fadeOut(5000,function(){ 
      $('#emailform').html(backupHtml); 
     }); 
    }); 

} 
});

来源

2012-03-19 11:10:19 redDevil

响应淡出确定，但emailform没有再次出现。 – Andy 2012-03-19 11:28:10

等等，我错了。有效！！！太好了，谢谢。 – Andy 2012-03-19 11:35:25

我更新了jquery，我想你的html标记看起来像上面的权利？ – redDevil 2012-03-19 11:35:35

里面什么也没有display_block当你消失进去。它只是空的，我改变了代码：

$.ajax({ 
    type: "POST", 
    url: "mailing_list/mailing_list_add2.php", 
    data: dataString, 
    success: function(response) { 

     var backedup = $('#emailform').html(); // Take a snapshot of whats inside the emailform 
     $('#emailform').html("<div id='display_block'></div>"); 
     $('#display_block')      
     .hide() 
     .html(response) // New line! 
     .fadeIn(500,function(){ // After we finsish the fadeIn 
      $('#emailform').hide().html(backedup).fadeIn(500); // Reset the old content and fade it in 
     });   
} 
}); 
return false; 
});

我创建了一个的jsfiddle你http://jsfiddle.net/XHkWr/1/

来源

2012-03-19 11:10:50

它淡入并显示好，但我想要的是它淡出和电子表格淡入。 – Andy 2012-03-19 11:27:33

我更新了我的代码 – 2012-03-19 11:35:19

而不是所有的巨型巨型。

$('#emailform').html("<div id='display_block'></div>"); 
$('#display_block').hide().html(response).stop().fadeIn(500);

来源

2012-03-19 11:34:55 Starx

，但OP在'emailform' div中有'display_block' div ..您的代码不处理那个 – redDevil 2012-03-19 11:38:18

@achusonline，为什么？我错过了什么吗？ – Starx 2012-03-19 11:40:19

在他的代码中，他用'display_block' div更新'emailform' div，并在其中放置响应。那么上面的代码如何处理将'emailform' div内容更新为原始格式呢？ – redDevil 2012-03-19 11:44:59

我会说，这将是一个正确的解决办法：

$.ajax({ 
     url: 'mailing_list/mailing_list_add2.php', 
     type: 'post', 
     data: dataString, 
     success: function(data, textStatus, jqXHR) { 
      var $emailForm = $('#emailform').html(); 
      $('#emailform').html('<div id="display_block"></div>'); 

      $('#emailform').hide().html(data).fadeIn(500).delay(3000).fadeOut(500, function() { 
       $('#emailform').html($emailForm); 
      }); 
      return false; 
     }, 
     error: function(jqXHR, textStatus, errorThrown) { 
      var $emailForm = $('#emailform').html(); 
      $('#emailform').html('<div id="display_block"></div>'); 

      $('#display_block').hide().html(textStatus).fadeIn(500).delay(3000).fadeOut(500, function() { 
       $('#emailform').html($emailForm); 
      }); 
      return false; 
     } 
    });

结果在这里：http://jsfiddle.net/p9URt/2/

来源

2012-03-19 11:49:23 Eugene

提交的表单，通过ajax的响应

回答

相关问题