jQuery load reloading content in div via form subm

问题:

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

回答1:

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.

回答2:

I guess it will help you:

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

And don't put any submit button. You can call the submit function with:

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