Question

Let’s say i have an index.php that has html in it that looks like this:

<div id="navigation">
  <ul>
     <li id="registerLink"><a href="#">Register</a></li>
  </ul>
</div>
<div id="mainContent">
</div>

and i have jquery that does this:

$('#registerLink').click(function() {
   $('#mainContent').load("register.php");
});

With this, i smoothly load my form which is coded in the register.php file into the mainContent div. Now, when i fill in the form and post it using ajax which is coded in the register.php file, i want the results to display using jquery ajax in the mainContent div which is in the original index.php file.

Any suggestions?

Thanks in advance.

Answer 1

$('#mainContent form').submit(function(){
  var form = $(this);

  $.post(form.attr('action'), form.serialize(), function(result){
    $('#mainContent').html(result);
  });

  return false;
});

this code must be run as callback in your .load(…, [right here] )