jQuery通过表单提交div来加载div中的内容 [英] jQuery load relaoding content in div via form submit in div

问题描述

我正在研究一个消息系统。我已完成收件箱和消息查看部分。它们被加载到用户帐户页面的div中，并且它可以在刷新页面的情况下工作。

我基于jquery的这篇文章。

在这里获得一些帮助，让消息链接在div内刷新页面并打开消息，以及如何添加过滤器以允许配置文件链接实际刷新并转到实际配置文件页面。这很好。

我转到使用模式（twitter bootstrap）加载外部表单的消息发送端。这也是有效的，但我现在花了很多时间试图弄清楚如何做与链接相同的事情，使用表单提交，即让它在不刷新整个页面的情况下提交。再次，我使用的几乎是与收件箱部分相同的jQuery。

以下是收件箱代码：

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

Javascript：

  $。ajaxSetup（{cache：false}）; 
 $（'a.loader'）。live（'click'，function（）{$（$ document）.ready（function（）{
 //设置点击事件b $ b var toLoad ='< ;? echo base_url（）;？> user / messaging /'; 
 $（'。messages'）。fadeOut（100，loadContent）; 
 $（' #load'）。remove（）; 
 $（'＃waiting'）。append（'< div id =loadstyle =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）; 
 
函数loadContent（）{
 $（'。messages'）。load（toLoad，''，function（response，status，xhr）{
 if（status =='error'）{$ b $ b $ var msg =对不起，但出现错误：; 
 $（。messages）。html（msg + xhr.status ++ xhr.statusText）; 
 } 
}）。fadeIn（4000，hideLoader（））; 
} 
函数hideLoader（）{
 $（'＃load'）。fadeOut（2000）; 
} 
返回false; 
}）; 
}）; 
 
 <？ //这使链接在同一个div中打开
 // a：not（.profile）允许在浏览器窗口中打开配置文件链接
 //我们在配置文件链接上放置class =profile。 > $（。messages）。on（click，a：not（.profile），function（e）{
 $（。messages）。load（$（this ）.attr（href））; 
 e.preventDefault（）; 
}）; 
  

解决方案

如果你想保持一个正常的形式，提交事件，然后你可以做这样的事情：

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

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

有一些错误恢复或有关使用ajax提交的条件。如果您返回true而不是false，则页面将继续进行表单提交并重定向到该页面。所以如果你有一个禁用Ajax提交的模式，你可以在这里使用。我在那里放了一个无稽之谈，只是作为一个概念证明。你可以用这张支票玩，看看它的工作。

I'm working on a messaging system. I have finished the inbox and message viewing parts. They are loaded in a div on the user account page and it all works with out refreshing the page.

I based the jquery for this on this article.

Got some help on here for getting the message links to open the message within the div with out refreshing the page, and how to add a filter to allow profile links to actually refresh and go to the actual profile page. That's all good.

I moved on to the message sending side which uses a modal (twitter bootstrap) to load the external form. That works too, but I have now spent ages trying to work out how to do the same thing I did with links, with the form submit i.e. getting it to submit with out refreshing the whole page. Again, I am using pretty much the same jQuery as on the inbox part.

Here is the inbox code:

<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();
});

解决方案

If you want to keep a normal form and just capture the submission event then you can do something like this:

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

Basically on the submit of that form we're going to run a function instead of submitting right away. We send an ajax call (submitting your form data) and then return false. Returning false will stop the page from submitting the form (at this point it would submit it again since we just submitted it with ajax). So you can do all your logic, your ajax call, any additional checks / processing then return false to stop submission.

I added a bit more in there in case you want to have some error recovery or conditions surrounding the use of the ajax submit. If you return true instead of false, the page will continue with the form submission and redirect to that page. So if you have a mode to disable ajax submission you can use that here. I put a nonsense check in there just as a proof of concept. You can play with that check to see it work.

这篇关于jQuery通过表单提交div来加载div中的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！