Web Developers → jQuery cloning and unique ids

So I'm trying to setup some code with a table that contains an input box but I'm wanting to be able to clone the row and finally post all the information.

I have the following as an example of the table setup:

<table id="menu-options">
<tr>
<th>Sort Order</th>
<th>Description</th>
<th>&nbsp;</th>
</tr>
<tr id="1">
<td class="dragHandle"></td>
<td><input type="text" name="cat_description" id="cat_d_" /></td>
<td><a href="#" onclick="addTableRow('#menu-options'); return false;" title="Add another menu item">add another</a></td>
</tr>
</table>
 

And then there's the jQuery code I've figured out:

function addTableRow(table){
var lId = parseInt($(table + ' tr:nth-child').length);
$(table).append($(table + ' tr:last').clone().attr("id",lId));
 
$(table).tableDnDUpdate();
 
$("#menu-options tr").hover(function() {
  $(this.cells[0]).addClass('showDragHandle');
}, function() {
  $(this.cells[0]).removeClass('showDragHandle');
});
return true;
}
 
$('#menu-options').tableDnD({
        onDrop: function(table, row) {
 //           alert($('#menu-options').tableDnDSerialize());
        },
        dragHandle: "dragHandle"
    });
 
 
$("#menu-options tr").hover(function() {
          $(this.cells[0]).addClass('showDragHandle');
    }, function() {
          $(this.cells[0]).removeClass('showDragHandle');
    });
 

So this actually increases the table row id but I'm not sure how to address the actual id of the input element. I'm sure it's truly something easy.

Thanks in advance.

//Marshall

The selector for input elements is ':input'

You don't want to use a number for an ID. You should use something like tr_1 or tr1 or t1.

I've passed on doing the "onclick" for binding the click event (in my personal projects)

Here's how I would do it:

<table id="menu-options">  
<tr>  
<th>Sort Order</th>  
<th>Description</th>  
<th> </th>  
</tr>  
<tr id="1">  
<td class="dragHandle"></td>  
<td><input type="text" name="cat_description" id="cat_d_" /></td>  
<td><a href="#" class="add-another" title="Add another menu item">add another</a></td>  
</tr>  
</table>  
 

Your script like this:

$(document).ready(function() {
$('.add-another').bind('click', function(event, ui){
// tr parent
tr_parent = $(this).parent().parent();
// id of the parent TR element
tr_parent_id = $(this).parent().parent().attr('id');
first_input = tr_parent.find(':input');
first_input.val('test');
})
})
 

This is just an example, but it gets the parent id (tr element) and the first input and assigns the value of 'test' to the input. I left out triggering the 'addTableRow'.

If you added more inputs in the row you could grab the first one by either (I think the syntax is right...):

:input:first
:input:eq(0);

if you wanted the 2nd input you could do

:input:eq(1)

I like to bind the click event and walk my way 'up' and then back down the HTML. THat way I can debug using .html() and I catch any bad HTML. Even if you change your table structure you only have to mess with that one bind function.

And I'd probably put the binding within the addTableRow function, since you'll have to bind each "Add" link after you create it. I would probably build the HTML rows inline in my addTableRow function as well, instead of cloning. Because then you can display a message in the table saying "JS isn't turned on" and them overwrite it onload if you wanted.

I hadn't messed with clone much before but maybe I'll take a look at it again.

Edit: I hadn't addressed the unique ID issue really. I usually use a plugin called uuid. Really simple. jQuery.uuid(), or if you want a prefix (I always use a letter jQuery.uuid('n'); That's if you don't care if they're sequential. Which, from the looks of your code you already know how to figure out sequential ID's, though not as likely to be globally unique (across your app).

Thanks for the example but you're right it doesn't clone it or address the unique ID aspect of it. I'll have a look at jQuery.uuid to see if it will work as well. As for being unique across the app, they don't need to be...just as a new row is added for categories and arranged. I need to pull the order of them from the post so when I input into the database I can input the order of them rather then using numbers in a text field to order them, I figure this is a LOT more user intuitive.

Thanks again, I'll have a look at it though am open to other suggestions.

Are you trying to get the sorted order of the rows, or set a unique ID for each input in a row? Or both? Because it looks like you've mainly got a semi-unique ID. Just use the length, unless you get into deleting rows then that might screw it up (3 rows, you delete row 2, then add a new row you would have 2 row 3's).

To modify the ID of the input element have you tried using the :last selector on the row, and the :input:first selector? Something like $(table).find('tr:last').find(':input:first').attr('id', unique_id) ?

For sorting, I've just used the built-in sortable in jQuery UI. The serialize() or serializeArray() function gets you the order list of items.

Apparently a little lack of sleep is all I needed to figure this out. I'm so dumb. I don't need a unique ID on each element (at this time at least) as all I need to do is cycle through the POST variable names. So, simply making the name cat_description[] fixed it all and I can sort through them as needed...and even expanded it to include another field. Sorry for the lack of clarity.