Solved

Cloning a set of elements and form fields - Jquery

Posted on 2011-03-02
1
428 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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

730 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