jQuery load reloading content in div via form submit in div

Question

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 t

Answer 1

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

Answer 2

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.