Submitting a Form from a Modal

[Steven Leiva]

Hi Everyone, 

I am trying to address Pull Request #387. 

I'm making progress on this (after having gone down a completely wrong direction with jquery-ui, etc). 

This is what I've done so far:

• Added logic to the location's form partial so that it has knowledge if it is a remote request or not.
• Added logic to the events/new view so that it calls and renders the location/form partial.
• Added logic to the Events#new action so that it sets an empty @location instance variable available to the location/form partial.
• Added logic to the Location#new so that it responds differently to .js requests vs. .html request. (I haven't been able to test this part out).

Unfortunately, although I get a nice modal, and the modal's submit button does submit, for whatever reason the submission is being processed by Events#create, instead of Locations#create. 

You can find my branch here.

A few things to note:

1. The @location variable is available to the 'location/form' partial. I've checked this in byebug shell.
2. The form created by the call to 'locations/form' does in fact have an action attribute of "/locations" and a method of "post".

Again, the post request is being processed by Events#create, when all indications suggest the information is there for it to go to Locations#create.

Any help would be great! Thank you. 

[Steven Leiva]

OK, I did a bit more Google-ing and there are two great video tutorials for jquery-ujs and AJAX. The first one is free, from GoRails. The second one is from Ryan Bate's series, which is not free. It's time for bed, but I will give it another go tomorrow using the GoRails videos. (I would love to subscribe to Bates, but at this moment that's not going to happen).

Note that, while these will show me how to get the AJAX working, it does not show me how to get a modal working. I think that based on this tutorial and the work I've done so far, I can get it done. But first, I'm going to get it working via AJAX w/o the modal, and then worry about the modal.

[Travis Grathwell]

Looks like you ran into a major HTML gotcha: you can't nest forms in forms. Since you put the modal code inside the event's form tag, and the modal itself contains another form, the browser freaks out and ignores the second form. If you move the modal code to the bottom of events/_form, it will work the way you intended.

If you check out the modal code in the inspector, you can tell that something is amiss because the browser's interpretation of the markup goes straight from .col-md-6 to the inputs inside the form, without the <form> element that ought to be between.



I've found that if you try to nest a <form> in a <form> the browser will behave very unpredictably, usually to the tune of just preferring the outer form (but sometimes even weirder than that).
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/How_to_structure_an_HTML_form#Global_structure

--
You received this message because you are subscribed to the Google Groups "Bridge Troll" group.
To unsubscribe from this group and stop receiving emails from it, send an email to bridge-troll...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Steven Leiva]

Thank you Travis! This was exactly the problem. I've moved the location form to the bottom of the events/_form partial, and now it's working - it is working; it is posting to the right Controller & action.

Off to the next part - closing the modal and updating the list of locations w/o a refresh. I know I can send back javascript as a response so I'm hoping that I can figure this part out with less mis-steps.

[Steven Leiva]

Travis, can't thank you enough for the advice. I had a couple of hours to keep working on this and I've gotten it all linked up and working. The only issue I'm running into is that I want the modal to be larger. Otherwise, if you submit an invalid location, the errors are all scrunched up. CSS is a weakness of mine but I'll figure it out. 

After that, I'll write tests but I doubt that will be done today. I'm glad I took this change on - I haven't worked much with Javascript + Rails, so it's a good experience that I'm going to write about. (Otherwise I'll forget it and run into all that other pain next time as well).