Solved

Cloning a set of elements and form fields - Jquery

Posted on 2011-03-02
1
413 Views
Last Modified: 2012-05-11
I have a table with various elements that I need to have cloned on click. I am trying to do this using jQuery. I have attached an image.

The first top part where Ingredients are on the "add more" link that  WHOLE section including the button part in the gray box would be cloned.

Then the last piece would be the GRAY part below, each time you clicked add more to the right, another box would appear below.

I have tried various methods and its becoming a mess and am sure there is a better way, performance wise to do this. I have my code here:

 
<table border="0" width="600" class="pga_toggle_ingredients">
                <tbody><tr height="15">
                    <th width="60" scope="col">Ingredient Name</th>
                    <th scope="col">Qty</th>
                    <th scope="col">UOM</th>
                    <th width="70" scope="col">% Ingredient</th>
                    <th scope="col"></th>
                </tr>
                <tr height="15">
                    <td width="80"><img class="pgaDeleteIcon" alt="Delete" src="/Images/icon_delete.gif">
                        <input type="text" value="ing1" id="" name="" maxlength="50" class="{alphanum:true} pgaInputName valid"></td>
                    <td width="30"><input type="text" value="100" id="" name="" class="{digits:true} pgaInput valid"></td>
                    <td width="40"><input type="text" value="KG" id="" name="" class="pgaInput valid"></td>
                    <td width="56"><input type="text" value="0" id="" name="" maxlength="3" class="{digits:true} pgaInput valid"></td>
                    <td width="96"><a class="pga_add_ingredient" href="#">Add More</a></td>
                </tr>
                <tr class="pga_toggle_component" id="pga_ingredient_comp_no_0">
                    <td colspan="6"><h4>Related Components</h4>
                        <table border="0" width="429" class="pga_table_component">
                            <tbody><tr>
                                <th scope="col">Genus Name</th>
                                <th scope="col">Species Name</th>
                                <th scope="col">Type Code</th>
                                <th scope="col">Country</th>
                                <th></th>
                            </tr>
                            <tr>
                                <td><img class="pgaDeleteIcon" alt="Delete" src="/Images/icon_delete.gif">
                                    <input type="text" value="gen1" id="" name="" class="pgaInputName valid"></td>
                                <td><input type="text" value="spec1" id="" name="" class="{alphanum:true} pgaInputName valid" maxlength="25"></td>
                                <td><input type="text" value="HRV" id="" name="" class="{alphanum:true} pgaInput" maxlength="25"></td>
                                <td><input type="text" value="CA" id="" name="" class="pgaInput"></td>
                                <td><a class="pga_add_ingredient" href="#">Add More</a></td>
                            </tr>
                        </tbody></table></td>
                </tr>
            </tbody></table>

Open in new window


Thanks!

 Cloning
0
Comment
1 Comment
 
LVL 15

Accepted Solution

by:
SRigney earned 500 total points
ID: 35031568
When cloning this much at once, I find it easiest to have a hidden template on the page.  Then when the link is clicked a new copy of the template is inserted into the location in relation to the clicked link.  Otherwise you have to deal with removing data from the page.    You could build the template completely in script if you want, but I've used hidden fields.  In order to keep the hidden fields from messing up the array of inputs that are submitted I hide them outside the form, so they are not included in the serialized data.

In order to get the location of where the clicked link is will use the .parent() method on the obect.

$("a.pga_add_ingredient").click( function() {
  // get the row, which is 2 parents above the link clicked.
  ingredient = $(this).parent().parent();  
  // get the details which is the next row (sibling) of the ingredients.
  detail = ingredient.siblings(0);

  data = // clone template
  detail.after(data) // insert the clone after the detail line.
     
});

I'd do the same thing for the details that you have, only I'd give it a different class name because it needs to clone a different object, and it is at a different parent depth that it needs to insert.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Shoutout to Emily Plummer (http://www.experts-exchange.com/members/eplummer26.html) for giving me this article! She did most of it, I just finished it up and posted it for her :)    Introduction In a previous article (http://www.experts-exchang…
Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL (http://www.experts-exchange.com/articles/201/Handling-Date-and-Time-in-PHP-and-MySQL.html) several years ago, it seemed like now was a good time to updat…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

863 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

28 Experts available now in Live!

Get 1:1 Help Now