jquery understanding $('#name').load(...)

Question

Hi all,

I'm having some trouble understanding how to accomplish the following: Basically, I'm just delving into the world of Ajax, and I have built a simple application to practice on. My current problem is that I want to have a form dynamically added below "add entry", so that people don't have to go off to another page to update the page, that part works. Below "add entry", there is a list of all currently added entries, and after the user clicks submit on that dynamically loaded form, i want to update the list below by reloading the page (the list is generated from a database).

To explain the code below, /ajax/addform/ loads an html file, which only have ..., which is the add entry form. I'm just not sure how to bind the $('form').submit to the newly loaded form. Also, for .load(), the second var is POST parameter to the page waiting to be loaded, do i need to use that in order to use the call back (which is the third parameter)?

Here is what i have:

For the initial page:

<a id="add" href=...>Add Entry</a>
<div id="form"></div>
<ul>--list of entries here--</ul>

Where the div is just a placeholder to put the form in.

$(document).ready(function (){
    $('#add').click(function (){
     $('#form').load('/ajax/addForm/', {'dummy':'var'},
      function (){
       $('form').submit(function (){
        return false;
       });
     });
     return false;
    });
});

Thanks a lot for any help!

Answer 1

If you want to do an ajax request to ajax/addForm/, you will not be simply submitting the form. You will need to get the values of the inputs in the form.

var textData = $("input[name='text']").val();

Your load function would look like this:

$(/* containing element of list */).load('ajax/addForm/', {'text',textData});

I'm assuming ajax/addForm/ outputs the html for your list?

Edit: From your response, I gather that you want to send the data to ajax/addForm with ajax, then reload the page (instead of updating asynchronously). If you're going to do that, it'd probably be easier to do the whole thing without ajax, but here are instructions for an ajax post request.

Once again, you will need to get the values of the inputs and store them for the ajax request. If you're not receiving any data from ajax/addForm, there's no reason to use load(); you should use $.post() instead.

$.post('ajax/addForm/', {'text',textData}, function() {
   //reloads the page when ajax/addForm is finished
   window.location.reload();
});

If you want this to happen at the press of a button, you'll need to put your $.post() inside the click handler for that button.

Answer 2

After you load the text with .load - this in the callback is equal to the #name DOM element, so you want to bind to any form objects that are children of that element. If you don't return false from that submit function, the response will be whatever the form action/method tags respond with after POST/GET. If your webserver redirects a "successful" response back to the page you are on, thats one way to handle the issue.

If you want the form submit to be handled with AJAX as well - jQuery form plugin has a .ajaxForm() function that will make the POST/GET happen in ajax - giving you a callback function to tie into on success.

$('#form').load('/ajax/addForm/', {'dummy':'var'}, function() {    
  // look for our form that we loaded;
  var $form = $("form", this);

  // turn it into an ajax submit form and attach a custom handler.
  $form.ajaxform({
     success: function(responseText) {
       // reload the form if the post is successful
         window.location.reload();
     }
  });

});