Question

I’ve created a list of events in a select it generates the option markup server-side in php and echo them to client-side. The options created on the server side have just regular attributes and the text between opening and closing option tags, nothing fancy

<option value="myvalue" data-sort="mysortcriteria" class="myclasses">mytext</option>

Using jQuery client side I add an option from a form to the select, using the same string from php for options with different variables in place for attribute values etc. It then sorts the options by date stored in data-sort=”mysortcriteria” which has the same date format. This is the sort function:

var event_list_json = [{date="somedate"},{date="somedate"},{date="somedate"}]
event_list_json.sort( sort_by_date );

where sort_by_date is my custom javascript sort function:

function sort_by_date(a, b) 
{
    return new Date(a.date).getTime() - new Date(b.date).getTime();
}

After it executes it has sorted the select but the old options are sorted with old options and on top new options are sorted with new options but not sorted together… I’m positive I’ve done this before but for whatever reason this isn’t working??? I’m using jQuery UI Selectable but I’m not making any calls through the widget just using native JavaScript.

The output looks like this which other then the extra “style” that somehow gets added to the old options they are identical, but you can see they don’t mix together on sort.

<ol id="selectable" class="ui-selectable">
    <li class="ui-widget-content ui-selectee" data-sort="Mar 22, 2012">Mar 22, 2012 - Dinner in Duncan</li>
    <li class="ui-widget-content ui-selectee" data-sort="May 7, 2012" style="">May 7, 2012 - Breakfast in Victoria</li>
    <li class="ui-widget-content ui-selectee" data-sort="May 10, 2012" style="">May 10, 2012 - Breakfast in Victoria</li>
    <li class="ui-widget-content ui-selectee" data-sort="May 12, 2012" style="">May 12, 2012 - Breakfast in Victoria</li>
    <li class="ui-widget-content ui-selectee" data-sort="May 29, 2012" style="">May 29, 2012 - Breakfast in Victoria</li>
    <li class="ui-widget-content ui-selectee" data-sort="May 30, 2012" style="">May 30, 2012 - Breakfast in Victoria</li>
    <li class="ui-widget-content ui-selectee" data-sort="May 31, 2012" style="">May 31, 2012 - Breakfast in Victoria</li>
</ol>

The original list looks like this:

<ol id="selectable" class="ui-selectable">
    <li class="ui-widget-content ui-selectee" data-sort="May 12, 2012" style="">May 12, 2012 - Breakfast in Victoria</li>
    <li class="ui-widget-content ui-selectee" data-sort="May 10, 2012" style="">May 10, 2012 - Breakfast in Victoria</li>
    <li class="ui-widget-content ui-selectee" data-sort="May 7, 2012" style="">May 7, 2012 - Breakfast in Victoria</li>
    <li class="ui-widget-content ui-selectee" data-sort="May 30, 2012" style="">May 30, 2012 - Breakfast in Victoria</li>
    <li class="ui-widget-content ui-selectee" data-sort="May 29, 2012" style="">May 29, 2012 - Breakfast in Victoria</li>
    <li class="ui-widget-content ui-selectee" data-sort="May 31, 2012" style="">May 31, 2012 - Breakfast in Victoria</li>
</ol>

Here’s what I execute to add the element and sort the parent:

    // Update markup
var event_list_select = jQuery( "#selectable" );
event_list_select.append('<li class="ui-widget-content ui-selectee" data-sort="' + event_date + '">' + event_date + " - " + event_type + " in " + event_location + '</li>');

// Sort json and selector chronologically
sort_html_by_data_attr( event_list_select );

Answer 1

Couldn’t get this to work so I reformatted my code to on remove all children and on AJAX response rebuild the list of events and sort them before they are entered into DOM.

Worked out better anyway since none of the events had unique ids so I’m able to use the index of the events in the array from the server as the unique id and added this as a data-index=”” attribute. Which is useful for remove specific elements without doing object comparisons.