2009-12-24 5 views
8

Можно ли получить сериализованный список элементов из UL в jquery, вызвав метод сериализации напрямую, вместо использования обратного вызова? Фрагмент кода:Jquery sortable ('serialize')

var sortableLinks = $("#category_links_list_3"); 
var linkOrderData = $(sortableLinks).sortable('serialize'); 

category_links_list_3 является идентификатор UL

DOM-структуры:

<div class="hidden" id="inline_list_3"> 
    <ul class="category_links_list ui-sortable" id="category_links_list_3"> 
     <li class="link_title ui-state-default" id="category_link_8">Coconut Oil</li> 
     <li class="link_title ui-state-default" id="category_link_9">Hempseed</li> 
    </ul> 
</div> 

Благодаря ...

ответ

21

Наконец-то я получил ответ! Вы должны сделать UL сортируется первым, перед вызовом метода сериализации на нем:

var sortableLinks = $("#category_links_list_3"); 
$(sortableLinks).sortable(); 
var linkOrderData = $(sortableLinks).sortable('serialize'); 

На этот раз linkOrderData содержит category_link [] = 8 & category_link [] = 9

16

Если сериализации возвращает пустую строку , убедитесь, что атрибуты id содержат символ подчеркивания. Они должны быть в форме: «set_number» Например, список из 3-х элементов с атрибутами id foo_1, foo_5, foo_2 будет сериализован в foo [] = 1 & foo [] = 5 & foo [] = 2. Вы можете использовать знак подчеркивания, знак равенства или дефис, чтобы отделить набор и номер. Например, foo = 1 или foo-1 или foo_1 все сериализуются в foo [] = 1.

выше приведен пример. что я использовал его. вот почему. я видел 2 тебя.

http://jqueryui.com/demos/sortable/#method-serialize

это migth быть поможет вам.

+0

У меня есть правильно отформатированные идентификаторы на месте. Я мог бы использовать метод обратного вызова, но, как вы можете видеть из структуры DOM, UL не отображается и, следовательно, не может запускать события. – KalenGi

+0

Да, это тоже помогло мне –

3

вар formStr = $ ('# контейнер') сериализации()

Добавлено:. Это будет работать для элементов формы. Вы также можете перевернуть свой собственный сериализат следующим образом:

function serializeList(container) 
{ 
    var str = '' 
    var n = 0 
    var els = container.find('li') 
    for (var i = 0; i < els.length; ++i) { 
    var el = els[i] 
    var p = el.id.lastIndexOf('_') 
    if (p != -1) { 
     if (str != '') str = str + '&' 
     str = str + el.id.substring(0, p) + '[]=' + (n + 1) 
     ++n 
    } 
    } 
    return str 
} 

alert(serializeList($('#container'))) 
+0

I попробовал это, и это не сработает. Спасибо! – KalenGi

+0

, если нет идентификаторов формы, вы можете перевернуть свою собственную функцию, как указано выше – jspcal

+0

Это определенно реплицирует функциональность сериализации. Однако я нашел причину, по которой метод wasn ' t возвращающ что-нибыдь как я детально в ответе ниже. – KalenGi

1

Я был в состоянии используйте эту функцию, используя split. Если у вас есть несколько подчеркиваний в вашем классе, вам может потребоваться скорректировать индекс

function serializeList(container) 
{ 
    var str = '' 
    var n = 0 
    var els = container.find('tr') 
    for (var i = 0; i < els.length; ++i) { 
    var el = els[i] 

    var p = el.id.lastIndexOf('_') 
    **var getIdNumber = el.id.split("_");** 

    if (p != -1) { 
     if (str != '') str = str + '&' 
     str = str + el.id.substring(0, p) + '[]=' + **getIdNumber[1]** 
     ++n 
    } 
    } 
    return str 
} 
+0

хорошее дополнение, но вы должны удалить n = 0 и ++ n, поскольку он больше не используется. –

0

Это сообщение было очень полезно. Если вы ищете дополнительную помощь, вот как я получил ее на работу (используя haml-rails). Использование функции toArray несколько отличается. При использовании `Serialize» вы должны установить атрибут, опять же, как "элемент-данных =" элемент-данных _ # {ID}.

Спасибо, Интернет, для зная так много программных решений.

:css 
    #sortable { list-style-type: none; margin: 40 20; padding: 0; width: 500; } 
    #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; } 
    #sortable li span { position: absolute; margin-left: -1.3em; } 

:javascript 
    $(function() { 

    $("#sortable").sortable({ 
     update: function(event, ui) { 
     var data = $("#sortable").sortable('toArray', {attribute: "data-item"}); 
     // return ids in order after update 
     //alert(JSON.stringify(data)); 
     $.ajax({ 
      type: "PATCH", 
      async: true, 
      url: "/calendar/update_order.json", 
      data: JSON.stringify(data), 
      dataType: 'json', 
      contentType: 'application/json', 
      error: function(data) { return false; }, 
      success: function(data) { return false; } 
     }); 
     } 
    }); 
    $("#sortable").disableSelection(); 

    }); 

#sort_tickets 
    %ul#sortable 
    - @tickets.each do |ticket| 
     %li.ui-state-default(data-item="#{ticket.id}")< 
     %span.ui-icon.ui-icon-arrowthick-2-n-s< 
     = ticket.customer 
Смежные вопросы