Win a copy of The Java Performance Companion this week in the Performance forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Submit dynamically created form using jQuery Form plugin

 
Art Vandelay
Ranch Hand
Posts: 49
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

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
Posts: 49
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Can't you just do:



I am still not sure what your problem is.

Eric
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64990
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
At this point, I'm hopelessly lost as well.

Perhaps it's time to step back and explain the goal at a higher level?
 
Art Vandelay
Ranch Hand
Posts: 49
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 64990
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 49
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 64990
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 49
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 64990
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 49
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 64990
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
.load() is not an alternative to ajaxForm(), but an easier-to use alternative to $.ajax() for this case.
 
Art Vandelay
Ranch Hand
Posts: 49
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic