ansaurus

Question

Adding a blank line in a specific position in an unordered list with jQuery

Answer 1

A:

In your code, your span and li ids don't match up. Is that intentional?

Either way, you don't need all the span IDs and individual onClicks.

The following will insert a blank line before any LI (including blank LIs) whenever they are clicked, without the need for any onClicks.

$('#ml_organize li').live('click', function() {
    $(this).before('<li class="ui-state-default"><span class="icon ui-icon ui-icon-plusthick" title="Add header line"></span><span class="org_qty">0</span><span class="org_partno"> </span><span class="org_desc"> </span></li>');

});

I'd also look at simplifying the markup -- all the repeated classes seem a bit wasteful when you could just use the parent class for CSS styling.

Jhong 2010-08-02 05:44:01

Yes, the mismatched span and li ids are intentional. The user will be adding header lines that are not considered a line item, just a place holder.Very elegant solution to the wasted onClick codes. I'm fairly new to jQuery and haven't yet mastered all the convenient places it can be used.The add line is working excellently and I have figured out how to renaming subsequent li ids after the add... now I'm working on deleting the newly added line and renaming li ids again.Thanks!

DevlshOne 2010-08-02 23:11:29

Answer 2

A:

I'm afraid your solution did not work, as it also makes each of the added lines clickable to create a line above it. The header lines added with the onClick are of a different format as you can see by the snippet below:

function addMLRow(rowNo) {
    var newRow = "<li id=\'li" + rowNo + "\' class=\'ui-state-default\'><span class=\'item\'>HL</span><input class=\'header_line\' maxlength=\'75\' type=\'text\' name=\'hl_text[" + rowNo + "]\' id=\'hl_text" + rowNo + "\' /></li>";
    $('#ml_organize li:eq(' + (rowNo - 1) + ')').before(newRow);
    $('#hl_text' + rowNo + '').focus(function() {
        $(this).css('background','#DDD');
    });
    $('#hl_text' + rowNo + '').blur(function() {
        $(this).css('background','#FFF');
    });
    $('#hl_text' + rowNo + '').focus();
    // renumber rows after insert
    $('#ml_organize li:gt(' + (rowNo - 1) + ')').each(function() {
        var newID = 'li' + ($(this).index() + 1);
        $(this).attr('id',newID);
    });
}

Probably still not the most elegant solution but it works!

DevlshOne 2010-08-02 23:25:38

I see... if you don't want the newly added li's to be clickable, you can just change .live() to .bind()... the rest is all the same.

Jhong 2010-08-03 10:43:14

ansaurus

tags:

views:

answers:

Adding a blank line in a specific position in an unordered list with jQuery

related questions