Solved

Cloning a set of elements and form fields - Jquery

Posted on 2011-03-02
1
437 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

726 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