[wForms Repeat] Remove first node

5 views
Skip to first unread message

Andre

unread,
Sep 23, 2009, 11:40:28 AM9/23/09
to wForms Group
Hello everybody!

Is it possible?
I would like to remove de main group, then i could insert another one
in blank, if it has only one group.

Thanks and congratulations for the library, it is very helpful.

Ascii King

unread,
Sep 24, 2009, 4:14:32 PM9/24/09
to wforms...@googlegroups.com
Could you show some sample code? Show me what it is you are trying to
remove and what it should look like when it is done.

André

unread,
Sep 25, 2009, 7:27:09 AM9/25/09
to wforms...@googlegroups.com
On Thu, Sep 24, 2009 at 17:14, Ascii King <te...@swattermatter.com> wrote:

Could you show some sample code? Show me what it is you are trying to
remove and what it should look like when it is done.


For example, i have a div with 2 text inputs that i want to repeat. 

Name |_______|  Age |_______|  + Add

The user fills the first group and adds a second one

Name |_John__|  Age |__25___|  + Add

Name |_______|  Age |_______|  - Remove

I want to remove the first field group.  You know?
Something like that:

Name |_John__|  Age |__25___|   - Remove + Add

Name |_______|  Age |_______|  - Remove


Thanks,
André Dina

Ascii King

unread,
Sep 25, 2009, 10:02:49 PM9/25/09
to wforms...@googlegroups.com
Here's an example like what you are trying to do. The key points are the
repeat class and the remove class with the matching name.

<div class="repeat inlineSection" id="tfa_5557048292275">
<div class="oneField" id="tfa_AppointmentDate-D">
<label for="tfa_AppointmentDate" class="inlineLabel">Appointment
Date <span class="reqMark">*</span></label>
<input type="text" class="validate-date required" size="15" value=""
name="tfa_AppointmentDate" id="tfa_AppointmentDate"/> <span
id="tfa_AppointmentDate-E" class="errMsg"> </span>
</div>
<div class="oneField" id="tfa_AppointmentTime-D">
<label for="tfa_AppointmentTime" class="inlineLabel">Appointment
Time <span class="reqMark">*</span></label>
<input type="text" class="required" size="10" value=""
name="tfa_AppointmentTime" id="tfa_AppointmentTime"/> <span
id="tfa_AppointmentTime-E" class="errMsg"> </span>
</div>

<span class="duplicateSpan">
<a href="#" class="duplicateLink" id="tfa_5557048292275-wfDL">Add
Another Appointment</a>
</span>
</div>

Do you see how the outer DIV tag has the repeat class? This will add the
[+Add] button for you automatically.
The end SPAN tag with the class duplicateSpan is where the remove tag
comes from. You need to put a link inside that tag with the
class="duplicateLink" and the id has to be exactly the same as the id in
the opening DIV tag with the extra little "-wfDL" on it. These will
handle your add remove stuff.

I'm not one of the creators of this tool, but I think it is awesome. The
way I learned it was to go to http://www.formassembly.com and make the
form that I wanted. Then I looked at the code that it generated and
copied it.

Here's my take on your form. I think it should work, but I use wforms
with another product called FormFu so, my formatting might be off.
--{P.S. I just realized that you might be asking how to put a remove
link in the first row. You just add the class="removeable" to the tag.
I've stuck it in below. }--

<div class="repeat removeable" id="tfa_person_block">
<div id="tfa_Name-D">
<label for="tfa_Name">Name</label>
<input type="text" value="" name="tfa_Name" id="tfa_Name"/>
<span id="tfa_Name-E" class="errMsg"> </span>
</div>
<div id="tfa_Age-D">
<label for="tfa_Age">Age</label>
<input type="text" value="" name="tfa_Age" id="tfa_Age"/>
<span id="tfa_Age-E" class="errMsg"> </span>
</div>

<span class="duplicateSpan">
<a href="#" class="duplicateLink" id="tfa_person_block-wfDL">Add
Another Person</a>
</span>
</div>

Did that help?

Ascii King

unread,
Sep 25, 2009, 11:05:00 PM9/25/09
to wforms...@googlegroups.com
Ascii King wrote:
> Do you see how the outer DIV tag has the repeat class? This will add the
> [+Add] button for you automatically.
> The end SPAN tag with the class duplicateSpan is where the remove tag
> comes from. You need to put a link inside that tag with the
> class="duplicateLink" and the id has to be exactly the same as the id in
> the opening DIV tag with the extra little "-wfDL" on it. These will
> handle your add remove stuff.
>
>
Sorry. I wasn't thinking when I wrote this. The Add tag comes from the
duplicateLink span. The remove tag is created automatically by the
wforms script. You can force it by putting "removeable" in the class of
the repeatable parent.

If you don't put in the duplicateLink span, one will be created for you,
but it will be outside of the div block.

André

unread,
Sep 26, 2009, 11:25:58 AM9/26/09
to wforms...@googlegroups.com
Hi, thanks for your help.

I didn't say it, but I've already tried to put a tag removeable in the first div. But it doesnt work. It remove the first div, but It doesnt add anymore.
I put manually the add button to it dont be removed but it doesnt work also.
Then, as I said, it needs to put another clone before remove the first group when there are only one group.
I'm using 2.0 version.




Thanks,
André Dina 

Ascii King

unread,
Sep 26, 2009, 4:48:10 PM9/26/09
to wforms...@googlegroups.com
André wrote:
> Hi, thanks for your help.
>
> I didn't say it, but I've already tried to put a tag removeable in the
> first div. But it doesnt work. It remove the first div, but It doesnt
> add anymore.
> I put manually the add button to it dont be removed but it doesnt work
> also.
> Then, as I said, it needs to put another clone before remove the first
> group when there are only one group.
> I'm using 2.0 version.
>

I have tested a few things and I don't think you can put a remove
element in that first tag. Unless the WForms guys come on and tell you
the proper way to do it, because I can't. You can't remove that first
element because all of the child elements are clones of it.

The function that seems to control it is getOrCreateRemoveLink which
expects the DOM element you are trying to insert. It seems to check the
wfr_master_sec which is the repeat element of which this element is a clone.

Sorry I couldn't help.

André

unread,
Sep 26, 2009, 6:33:41 PM9/26/09
to wforms...@googlegroups.com
On Sat, Sep 26, 2009 at 17:48, Ascii King <te...@swattermatter.com> wrote:

have tested a few things and I don't think you can put a remove
element in that first tag. Unless the WForms guys come on and tell you
the proper way to do it, because I can't. You can't remove that first
element because all of the child elements are clones of it.

The function that seems to control it is getOrCreateRemoveLink which
expects the DOM element you are trying to insert. It seems to check the
wfr_master_sec which is the repeat element of which this element is a clone.

Sorry I couldn't help.

Anyway, thank you =)

I think the only way is I code this to have this behavior. I will try make the first hidden then I wont need remove the first one. It will be there but the user wont be able to see or use it.

Thanks,
André Dina
Reply all
Reply to author
Forward
0 new messages