jQuery的负载通过形式DIV重新加载内容的DIV提交(jQuery load reloading

我正在一个邮件系统。我已经完成了收件箱和消息观看部分。他们被加载在用户帐户页面上的DIV，这一切与作品进行刷新页面。

我根据这个jQuery开发上的这篇文章。

得到了一些帮助，在这里得到的消息链接到与出刷新页面，以及如何添加一个过滤器，让资料链接竟然刷新到实际的个人资料页的专区内打开邮件。这一切都很好。

我转移到使用模态（Twitter的引导）来加载外部形式的消息发送方。这工作过，但现在我已经花了年龄试图找出如何做我的链接做同样的事情，与表单提交即得到它与出刷新整个页面提交。同样，我使用几乎相同的jQuery作为收件箱中的一部分。

下面是收件箱中的代码：

<p id="waiting"><!-- ajax loading --></p>
<div class="messages"><!-- inbox --></div>

使用Javascript：

$.ajaxSetup({ cache: false});
$(document).ready(function(){
    // set up the click event
    $('a.loader').live('click', function() {
        var toLoad = '<? echo base_url(); ?>user/messaging/';
        $('.messages').fadeOut(100, loadContent);
        $('#load').remove();
        $('#waiting').append('<div id="load" style="height: 700px; background:url(<? echo base_url(); ?>files/recordCovers/index.html?<? echo rand(5,1555); ?>); background-size: cover;"><div class="circle"></div><div class="circle1"></div></div>');
        $('#load').fadeOut(1000);

        function loadContent() {
            $('.messages').load(toLoad, '', function(response, status, xhr) {
                if (status == 'error') {
                    var msg = "Sorry but there was an error: ";
                    $(".messages").html(msg + xhr.status + " " + xhr.statusText);
                }            
            }).fadeIn(4000, hideLoader());
        }
        function hideLoader() {
            $('#load').fadeOut(2000);
        }
        return false;
    });
});

<? // this makes the links open in the same div
// a:not(.profile) allows profile links to open in browser window
// we put class="profile" on profile links.?>
$(".messages").on("click", "a:not(.profile)", function (e) {
    $(".messages").load($(this).attr("href"));
    e.preventDefault();
});

Answer 1:

如果你想保持正常形态，只是捕捉提交事件，那么你可以做这样的事情：

http://jsfiddle.net/ufomammut66/uPvYx/2/

基本上，在提交该表格，我们要运行一个函数，而不是提交马上的。我们发送一个Ajax调用（提交表单数据），然后return false 。返回false将提交表单停止页面（在这一点上，将再次提交它，因为我们只是用Ajax提交它）。所以，你可以做你的逻辑，你的Ajax调用，任何额外的检查/处理则返回false阻止提交。

我加在里面更多的情况下，有点你想有一些错误恢复或周围使用了AJAX的提交情况。如果返回true，而不是虚假的，该网页将继续与表单提交，并重定向到该页面。所以，如果你有一个模式禁用AJAX提交您可以使用这里。我把废话检查在那里只是作为一个概念证明。您可以用支票玩玩看它的工作。

Answer 2:

我想这会帮助你：

function submit()
{
 $.ajax({
      type:'POST',
      url: "your url to submit",
      data: ({param_1:somevar}),    
      dataType:"json",  
      beforeSend: function(){ //do something here }
          success: function(return){ //do something here }
 });
}

不要把任何提交按钮。您可以致电与提交功能：

$('#button').click(function(){
        submit(somevalue);  
      });

文章来源: jQuery load reloading content in div via form submit in div