CODEWITHSUNDEEP
jqueryadditionhtml-lists
Maverick
Maverick

Reputation: 2760

add dynamic form with unique id using jquery

I have list like this,

<input type="button" value="add" id="add"/>


<ul id="sortable"> 
<li class="ui-state-default" id="list_1"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li> 
<li class="ui-state-default" id="list_2"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li> 
<li class="ui-state-default" id="list_3"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li> 
<li class="ui-state-default" id="list_4"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li> 
<li class="ui-state-default" id="list_5"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li> 
<li class="ui-state-default" id="list_6"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li> 
<li class="ui-state-default" id="list_7"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>

Now I have an add button just above the list called add. When I am clicking add button it is appending the <li> something</li> to the list. But I want a unique id for it. Like the last <li>id is list_7, so I want the new id to be list_8. I am using this javascript code at the moment.

$('#add').click(function(){

            $('#sortable').append('<li>something</li>');
        })

Kindly help me with this. thanks

Upvotes: 0

Views: 2657

Answers (3)

Philip Schweiger
Philip Schweiger

Reputation: 2734

You can use jQuery to get the number of LIs, and use that as the basis of your next index. For instance:

var list = $('#sortable'); //Cache since you reference it multiple times

 function addLi() {
  var index = list.find('li').length + 1;

  list.append('<li id="list_'+index+'"></li>');

}

$('#add').click(addLi);

UPDATED - Taking into account a "delete" behavior

Ok, if you wanted to delete, I might do something along the following lines. Note that the LI index is now less tied to the number of actual LIs on the page at any given point, so you can delete safely.

//Variables that will be set on document ready
var liIndex = 0;
var list = '';

function addLi() {
    list.append('<li id="list_'+(liIndex + 1)+'"><button class="remove">Remove</button><br /> Item</li>');
    liIndex += 1;
}

$(function(){
    //Cache for later reference
    list = $('#sortable');
    liIndex = list.find('li').length;

    //Add an LI whenver you click the add button
    $('#add').click(addLi);

    //Remove LI when click on button
    $('button.remove').live('click',function(){
        //Fade out before removing for smoother transition
        $(this).closest('li').fadeOut(250,function(){
            $(this).remove();
        });
    });
});

Upvotes: 2

Mark Coleman
Mark Coleman

Reputation: 40863

If you just want to add it based upon the number of li in the ul you can just query the length to build your id.

$('#add').click(function() {
    var $li = $('<li>something</li>');
    var theId = 'list_' + ($("#sortable li").length + 1);
    $li.attr("id", theId);
    $('#sortable').append($li);
});

Code example on jsfiddle.

Updated If you want to delete somewhere in the ul you can easily keep track of the starting index and just increment from there. For simplicity sake I just made the click li remove the item.

var index = $("#sortable li").length;
$('#add').click(function() {
    index = index + 1;
    var $li = $('<li>something</li>');
    var theId = 'list_' + (index);
    $li.attr("id", theId);
    $('#sortable').append($li);
});
$("#sortable").delegate("li", "click", function(){
    $(this).remove();
});

Note: since items are added dynamically you need to use either live() or delegate()

Updated fiddle with delete.

Upvotes: 2

Richard Neil Ilagan
Richard Neil Ilagan

Reputation: 14747

If you don't have a delete function, then this is as simple as just counting the number of items inside your container.

$('#add').click(function(){
    var container = $('#sortable');
    var item = $('<li>something</li>')
        .attr('id','list_' + container.find('li').length + 1);
    container.append(item);
});

Upvotes: 0

Related Questions