0

I have a page that has the following uls on it:

   <div id="team1" class="team_name">Desperate Housewives                        
       <ul class="sortable ui-sortable" id="sortable_1" dataid-team="1" dataid-drag="drag_team_1" data-seasonid="7">
            <li id="team1_bowler53" class="team_bowler drag_team_1 ui-sortable-handle">Celia B Flint </li>
            <li id="team1_bowler54" class="team_bowler drag_team_1 ui-sortable-handle">Gale E McDonald </li>
            <li id="team1_bowler55" class="team_bowler drag_team_1 ui-sortable-handle">Gerri  Orff </li>
       </ul>
    </div>

This loads fine on start. Note that the ids are dynamically generated.

So, now I want to add an <li> to the div:

(note that selected is the team number, so it works out to team1 as above). The insert_code, below, displays as proper html in console.log.

insert_code in console.log appears as:

<li id="team1_bowler51" class="team_bowler sub drag_team1 ui-sortable-handle">Cara M Wilkins</li>

var insert_code = '<li id="'+new_li+'" class="'+classname+' '+drag_team+' ui-sortable-handle">'+bowler_name+'</li>';
jQuery("#team"+selected+" ul").append(insert_code);

I have also tried:

jQuery("#sortable_"+selected).append(insert_code);

Each time that I do this, I get the following HTML in Google DevTools:

<ul class="sortable ui-sortable" id="sortable_1" dataid-team="1" dataid-drag="drag_team_1" data-seasonid="7"></ul>
<li id="team1_bowler51" class="team_bowler sub drag_team1 ui-sortable-handle">Cara M Wilkins</li>
<li id="team1_bowler53" class="team_bowler drag_team_1 ui-sortable-handle">Celia B Flint </li>
<li id="team1_bowler54" class="team_bowler drag_team_1 ui-sortable-handle">Gale E McDonald </li>
<li id="team1_bowler55" class="team_bowler drag_team_1 ui-sortable-handle">Gerri  Orff </li>

Note that it has moved ALL of the li outside the ul.

From the page, it is obvious that it is not appending properly as the new li displays at the top of the ul instead of the bottom. Note that Cara Wilkins was the added li.

Any help would be appreciated...

The full code has a list of all bowlers on the left side with drop down boxes with team names. This fires in a change function:

jQuery(".team_select").on("change", function() {
    var id = jQuery(this).attr('id');
    var bowlerID = id.replace("bowler_team","");
    var original = jQuery(this).attr("data-original-value");
    var selected = jQuery(this).find('option:selected').attr("value");
    var old_li = "team"+original+"_bowler"+bowlerID;
    var new_li = "team"+selected+"_bowler"+bowlerID;
    var recID_field = "bowler"+bowlerID+"_RecID";
    var seasonID = jQuery("#seasonID").val();
    var starter = jQuery("#starter"+bowlerID).is(":checked");
    var captain = jQuery("#captain"+bowlerID).is(":checked");
    var book_avg = jQuery("#book_avg"+bowlerID).val();
    var book_avg_gms = jQuery("#book_avg_gms"+bowlerID).val();
    jQuery("#"+old_li).remove();
    var classname = "team_bowler";
    if(captain) {
        classname = classname+" captain";
    }
    if(!starter) {
        classname = classname+" sub";
    }
    var drag_team = "drag_team"+selected;
    var bowler_name = jQuery("#bowler"+bowlerID).attr("data-name");
    bowler_name = bowler_name.trim();
console.log("UL has "+jQuery("#team1 ul li").length+" elements.\r\n");
    var insert_code = '<li id="'+new_li+'" class="'+classname+' '+drag_team+' ui-sortable-handle">'+bowler_name+'</li>';
    jQuery("#team"+selected+" ul").append(insert_code);
console.log("Insert Code:"+insert_code+"\r\n");
console.log("li position:"+jQuery("#"+new_li).index()+"\r\n");      
});

There is a list of the teams on the right. Each team has a div with team name and a

  • that shows each member. That list is then sortable (but dragging and dropping). You can only sort in the same (which all works).

    • I've just tried creating a JSFiddle with your code and it's working as expected. Are you sure it's not jQuery UI that's causing the problem? What happens if you don't load jQuery UI on the page? – Lodder May 8 at 13:00
    • I have to have jquery UI on the page because it is a sortable list – Charles Wilkins IV May 8 at 13:19
    • There are far better alternatives to jQuery UI for a sortable list. Either way, can you just try so we can try and narrow down the problem – Lodder May 8 at 13:35
    • Weird part is that it works in a jfiddle: jsfiddle.net/chasiv/9ad1xebc/9 – Charles Wilkins IV May 8 at 13:41
    • When I created the jsfiddle, I added all javascript libraries on the page (including jQuery UI and my custom javascript files) – Charles Wilkins IV May 8 at 13:50

    Your Answer

    By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

    Browse other questions tagged or ask your own question.