Right, following on from part 1...
We should at this point be getting the _emailaddress partial loaded in our form. What I want to do, is be able to add additional email addresses, and get Wheels to update the nested properties appropriately when I submit the form. Oh, I'm assuming you're using jQuery too.
Firstly, a disclaimer. Javascript isn't my strong suit, at all, in any way, whatsoever. The following will undoubtedly be able to be condensed down into something much more efficient. Also, this isn't my javascript - this is unashamedly nicked from Ben Nadel (see http://www.bennadel.com/blog/1375-Ask-Ben-Dynamically-Adding-File-Upload-Fields-To-A-Form-Using-jQuery.htm). Yet again, I find myself standing on the shoulders of giants.
In order to understand what I'm doing, it's probably best to look at the generated code which wheels makes for our email address partial.
As a reminder, here's what the cfWheels code is:
So this creates:
What we want to do is replicate this output on the fly using Javascript, and increment the counter (i.e, all the 1's in the above example).
In order to do this, I need to do a few things. Firstly, I need to make sure I can reference the existing set of email(s), which are loaded when the page loads, then I need to be able to clone this set of fields, incrementing the count as I go, and finally, I need to be able to have appropriate add and remove buttons/handlers to deal with manipulating the DOM itself.
Once that's done, I then can submit the form and do the update: since writing part one, I've come accross a small catch with this approach which requires a extra line or two of code (oh noes!) which I'll get to later.)
Creating theDOM Template
So, in addition to my email address partial, I'm going to create another, called _emailaddressTemplate - Warning, bad code ahead...
So what's going on here? At the top, I've got a template, using Ben's ::field:: references. Underneath I've got the JS to replicate the template and insert it in the appropriate place, and increment the counter.
This partial needs to be include *OUTSIDE* the form: this is important: otherwise these oddly named form fields will get into your params and cause problems.
Also note, I've got an anchor tag with class of .removeemail - this allows me to remove the parent div element onclick, thus removing it from the the form.
Back in my edit.cfm, I'm going to add these includes, and add another anchor tag to add the additional form fields. So it now looks something like this:
So important to note, my DOM template partial is outside the form.
The catch I mentioned earlier comes when updating this: as is stands, I've not got a way of telling wheels which email addresses to delete etc. so when I loaded the contact model in my update function (see part 1), it would update and not replace the nested entries. I've done the following to simply replace them: More disclaimers - I can bet there's something I've missed, or a better way of doing this: cfWheels gurus please do enlighten me!!
My new update() function in Contacts.cfc controller:
This works for me, but as you can see, there's a fair bit of tidying up to be done, especially on the JS end.