Meaningless Drivel is fun!*
The moose likes HTML, CSS and JavaScript and the fly likes Submit dynamically created form using jQuery Form plugin Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Java 8 in Action this week in the Java 8 forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Submit dynamically created form using jQuery Form plugin" Watch "Submit dynamically created form using jQuery Form plugin" New topic
Author

Submit dynamically created form using jQuery Form plugin

Art Vandelay
Ranch Hand

Joined: Dec 27, 2009
Posts: 49
Hi all,

I have the following code



The situation is as follows: The result of posting 'myForm1' is a new form called 'myForm2', therefore i cannot use the '$(document).ready()' to attach an event handler to the submission of 'myForm2'. Instead, i use the following approach; when interacting with the newly created 'myForm2' the function 'submitAndUpdate()' will be called, which will try to attach an event handler to the submission of 'myForm2' before actually doing the submit using javascript code. The problem i run into is that the event handler is not being attached but the submit is executed, therefore instead of updating 'divToUpdate', i am being forwarded to a new page where the result of the submit is being displayed.
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Copied over conversation from hijacked thread: http://www.coderanch.com/t/480299/HTML-JavaScript/jQuery-form-submit-using-Form#2166604

Eric Pascarello wrote:All you need to do is after you add the second form with html(), call the ajaxForm on it like you would in onready. Seems pretty straightforward.

Eric




Art Vandelay wrote:
Eric Pascarello wrote:All you need to do is after you add the second form with html(), call the ajaxForm on it like you would in onready. Seems pretty straightforward.

Eric


Do you mean like this?


This will probably sound very stupid, but why do i need to call '.ajaxForm()' on a form after i have set an event handler to take care of ajax form submission using the same call? What's the point of the call after having set the event handler?



Eric Pascarello wrote:You were saying you were adding the form2 after the ready fired so you could not attach it correct? I was saying to do it when you added the form to the page.


Eric
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6

So you are saying that when form1 is submitted, it returns form2 in the response and you add that to the page?

Sounds like you should just be doing:




which is what i suggested in my original response.

Eric

Art Vandelay
Ranch Hand

Joined: Dec 27, 2009
Posts: 49
Eric Pascarello wrote:
So you are saying that when form1 is submitted, it returns form2 in the response and you add that to the page?

Sounds like you should just be doing:




which is what i suggested in my original response.

Eric



Now i see what you mean. But unfortunately this will not work, what i left out of the code (sorry for that) is that function submitAndUpdate() has 2 parameters which are used to create hidden fields dynamically and therefore the values to used are known when myForm2 is returned. Therefore the only approach i see is to try to attach the eventhandler at the beginning of function submitAndUpdate().
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Can't you just do:



I am still not sure what your problem is.

Eric
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60082
    
  65

At this point, I'm hopelessly lost as well.

Perhaps it's time to step back and explain the goal at a higher level?


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Art Vandelay
Ranch Hand

Joined: Dec 27, 2009
Posts: 49
OK, sorry for not being clear about my problem.

I have the following situation, 'myForm1' is a simple form with just one element, a drop down list with tables. The user will select a table and submit the form to retrieve the table contents. The contents of the selected table will be displayed inside a form element called 'myForm2' to implement features like pagination. Because 'myForm1' exists when the page loads, i can use '$(document).ready()' to attach an event handler to submit 'myForm1' using ajax instead of a regular submit. My problem is that i cannot manage to attach an event handler to make ajax submission of 'myForm2' possible instead of a regular submit.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60082
    
  65

How is the second form being created?

If you are creating it using script, once it is part of the DOM you should be able to instrument it with ajaxForm().

Alternatively, you could use live() to pro-actively add a submit handler before the form is even created, and then use ajaxSubmit() of the Forms plugin in the handler to submit via Ajax.

(Assumes jQuery 1.4)

Alternately, use the LiveQuery plugin to detect when the form comes into being, and instrument it then.
Art Vandelay
Ranch Hand

Joined: Dec 27, 2009
Posts: 49
Bear Bibeault wrote:How is the second form being created?

If you are creating it using script, once it is part of the DOM you should be able to instrument it with ajaxForm().

Alternatively, you could use live() to pro-actively add a submit handler before the form is even created, and then use ajaxSubmit() of the Forms plugin in the handler to submit via Ajax.

(Assumes jQuery 1.4)

Alternately, use the LiveQuery plugin to detect when the form comes into being, and instrument it then.

The form post will return html code contatining a table element contained in a from element. This html code will be inserted into a div element.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60082
    
  65

Art Vandelay wrote:The form post will return html code contatining a table element contained in a from element. This html code will be inserted into a div element.

How? Via .load()? If so, you should be able to instrument in the completion callback.
Art Vandelay
Ranch Hand

Joined: Dec 27, 2009
Posts: 49
Bear Bibeault wrote:
Art Vandelay wrote:The form post will return html code contatining a table element contained in a from element. This html code will be inserted into a div element.

How? Via .load()? If so, you should be able to instrument in the completion callback.

No, via '.html()', see the code below.



I tried the following:


But unfortunately this did not work either.


The first approach (see the code in my first post) should work, because i am attaching a handler in the javascript function 'submitAndUpdate()', which is called when the user select's the next page of the table (pagination), but before i submit the form using javascript code.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60082
    
  65

Art Vandelay wrote:But unfortunately this did not work either.

You'll need to do a little better than "didn't work". Put in some debug code at line 4 to see if #myForm2 really exists. Let's find out where this breaks down rather than just saying that it doesn't work.

The first approach (see the code in my first post) should work

No it won't because you are executing code synchronously before the Ajax request has a chance to respond.

P.S. Why aren't you using .load() where appropriate?
Art Vandelay
Ranch Hand

Joined: Dec 27, 2009
Posts: 49
Bear Bibeault wrote:
Art Vandelay wrote:But unfortunately this did not work either.

You'll need to do a little better than "didn't work". Put in some debug code at line 4 to see if #myForm2 really exists. Let's find out where this breaks down rather than just saying that it doesn't work.

The first approach (see the code in my first post) should work

No it won't because you are executing code synchronously before the Ajax request has a chance to respond.

P.S. Why aren't you using .load() where appropriate?

I set debugging statements and found out that 'myForm2' does exist (i used alert to display the html inside the form tag). But somehow the calling '.ajaxForm' on it does not have any effect.

I was not even aware of the existince of '.load()' to be honest, but after yo menioned it i looked at the api, but i think the '.ajaxForm()' approach is more elegant and better suitable for my situation since the form tag contains the information like url, (method also?) data, etc., otherwise i would have to extract this information to be able to call '.load()'.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60082
    
  65

.load() is not an alternative to ajaxForm(), but an easier-to use alternative to $.ajax() for this case.
Art Vandelay
Ranch Hand

Joined: Dec 27, 2009
Posts: 49
Calling '.ajaxSubmit()' to submit the form directly (instead of registering an event handler and then doing the submit using plain old javascript) did the trick, see code below.




Thank you all for taking the time to help.
 
It is sorta covered in the JavaRanch Style Guide.
 
subject: Submit dynamically created form using jQuery Form plugin
 
Similar Threads
jQuery form submit using Form plugin not working
jQueryForm() / jQuerySubmit issue
console.log function not working.
My form submit is called twice
Upload a File Using jQuery