CODEWITHSUNDEEP
javascriptjqueryajaxpost
David
David

Reputation: 36344

jQuery how to POST/AJAX on a page loaded with the load() function without refreshing the page

I decided to load the content of urls into a content div with jQuery and ajax, was pretty simple to do using .load();

Works really nicely and is nippy as hell. Now i'm looking at this content and realising it has a multitude of forms which when submitted don't submit within the content div I made.

The only way I can think of streamlining this process is making a dirty great big JS file to handle each form submission dynamically.

Consider there are many forms in this app i'm trying to think of a nice way of submitting forms without page reload within the content div, but keeping some sort of structure to the files behind it at least.

Any suggestions would be hugely welcomed.

As an idea of what i'm doing at a basic level take a look at the code snippet below.

$(document).ready(function(){

    $('a').bind('click', function(e) {        
    $("#content").html('<img src="images/ajax-loader-small.gif">');   
      var url = $(this).attr('href');
      $('#content').load(url); // load the html response into a DOM element
      e.preventDefault(); // stop the browser from following the link       
    }); 

});

Upvotes: 0

Views: 227

Answers (1)

chris
chris

Reputation: 36937

$.ajax(), $.post(), $.get(), $.postJSON(), $getJSON()

Are your friendly functions in this scenario I think. What your basically gonna do is create a click function for your form's existing submit buttons..

$('#mysubmitbutton').live('click', function(e)
{
    e.preventDefault();
    $.post('url/to/post/data', $('#form').serialize(), function(data)
    {
         alert('post made');
    }, 'json');
});

now of course it gets much more elaborate if you want it to, such as what if my fields are blank, what if the php errors, what if all is good and I want to send it to a new page now or clear the fields, etc.. all of which is possible with these functions, but to cover everything would take a long time, this concept is just to give you a push out the gate, and we are always happy to help you further here when you run into any issues with the function of choice from the above list/example.

Upvotes: 1

Related Questions