jQuery通过div中的表单提交在div中重新加载内容 [英] jQuery load reloading content in div via form submit in div

问题描述

我正在使用消息传递系统.我已经完成了收件箱和邮件查看部分.它们被加载到用户帐户页面上的div中，并且无需刷新页面即可全部正常工作.

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.

我基于在此处获得一些帮助，以获取消息链接以在不刷新页面的情况下在div中打开消息，以及如何添加过滤器以允许配置文件链接实际刷新并转到实际的配置文件页面.很好.

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.

我继续到消息发送端，它使用模式(Twitter引导程序)加载外部表单.这也可行，但我现在花了很长时间尝试用链接提交表单来完成与链接相同的操作，即在不刷新整个页面的情况下提交它.同样，我使用与收件箱部分几乎相同的jQuery.

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.

这是收件箱代码:

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

JavaScript:

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/

基本上，在提交该表单时，我们将运行一个函数，而不是立即提交.我们先发送ajax调用(提交您的表单数据)，然后发送return false.返回false将阻止页面提交表单(此时，由于我们刚刚使用ajax提交了表单，因此它将再次提交表单).因此，您可以执行所有逻辑，ajax调用，任何其他检查/处理，然后返回false以停止提交.

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.

我在其中添加了一些内容，以防您需要进行一些错误恢复或使用ajax提交的情况.如果返回true而不是false，则页面将继续提交表单并重定向到该页面.因此，如果您有禁用Ajax提交的模式，则可以在此处使用该模式.我在那里胡说八道，以作为概念证明.您可以使用该支票以查看其工作.

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屋！