Сортирането на опциите ‹select› при зареждане на страницата генерира такива, сортиращи по различен начин от добавените от страна на клиента опции?

Създадох списък със събития в select, той генерира опцията за маркиране от страната на сървъра в php и ги отразява от страната на клиента. Опциите, създадени от страната на сървъра, имат само редовни атрибути и текста между отварящите и затварящите тагове за опции, нищо особено

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

Използвайки jQuery клиентска страна, добавям опция от формуляр към избраното, като използвам същия низ от php за опции с различни променливи на място за стойности на атрибути и т.н. След това сортира опциите по дата, съхранена в data-sort="mysortcriteria", което има същия формат на датата. Това е функцията за сортиране:

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

където sort_by_date е моята персонализирана функция за сортиране на javascript:

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

След като се изпълни, той е сортирал избраното, но старите опции са сортирани със стари опции и отгоре новите опции са сортирани с нови опции, но не са сортирани заедно... Сигурен съм, че съм правил това и преди, но по някаква причина това не е не работи??? Използвам jQuery UI Selectable, но не правя никакви обаждания чрез приспособлението, само използвайки собствен JavaScript.

Резултатът изглежда така, освен допълнителния „стил“, който по някакъв начин се добавя към старите опции, те са идентични, но можете да видите, че не се смесват при сортиране.

<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>

Оригиналният списък изглежда така:

<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>

Ето какво изпълнявам, за да добавя елемента и да сортирам родителския:

    // 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 );

javascript html sorting html-select
person mtpultz    schedule 22.03.2012    source източник
comment
Във вашия html изход коя ‹li› е току-що създадената нова опция?   -  person Bathz    schedule 22.03.2012
comment
За съжаление този с индекс [0] е новият.   -  person mtpultz    schedule 23.03.2012
comment
Тогава това не е ясно: 22 март 2012 г. наистина е ‹ 7 май 2012 г. Така че не можем да видим, че не се смесват помежду си. какво ми липсва ?   -  person Bathz    schedule 24.03.2012
comment
Добавих оригиналния ред на сортиране към оригиналната публикация.   -  person mtpultz    schedule 31.03.2012

Отговори (1)


arrow_upward
0
arrow_downward

Не можах да накарам това да работи, така че преформатирах кода си, за да премахна всички деца и при отговор на AJAX да възстановя списъка със събития и да ги сортирам, преди да бъдат въведени в DOM.

Така или иначе се получи по-добре, тъй като нито едно от събитията нямаше уникални идентификатори, така че мога да използвам индекса на събитията в масива от сървъра като уникален идентификатор и добавих това като атрибут data-index="". Което е полезно за премахване на конкретни елементи, без да се правят сравнения на обекти.

person mtpultz    schedule 02.04.2012