Question

I am having trouble using nested ajax calls with selectors. I have a section of html code called “mysection that is replaced by an ajax call to $(“mysection”).load(“/nextpage”).
The “nextpage” is a barebone html form with id = “signin” that uses ajax jquery form to manipulate the data. So my jquery code basically looks like:

 $(document).ready(function() {
     $("#signin").submit(function() {
          $(this).ajaxSubmit(options);
          return false;
     });
 });

If I run this, I would get an error: Uncaught TypeError: Object # has no method ajaxSubmit
However, if I go to the “nextpage” normally (self.location=) without using ajax’s $().load() call, everything works fine. I tried fixing this problem by replacing “this” with “#signin” and “mysection” and they all don’t work. Please help, I really want the form to dynamically load onto the page, without refreshing the whole page.

Thank You

Answer 1

I’m not sure that’s possible to interact with the Submit mecanism ( understand that it’s possible to trigger it but I think for security reasons there’s no way to change the way it’s uploading data ).

You could do 2 things:

1. Listen to onSubmit, and overload the data loading ( meaning that the form will never “load” by itself, you just catch event and transfer to ajax loading )
2. Catch onSubmit, hide your form and display an iFrame containing what you wanna load.