Jquery ordenable ('serialize')

¿Es posible obtener la lista serializada de elementos de un UL en jquery llamando directamente al método de serialización en lugar de usar una devolución de llamada? El fragmento de código:Jquery ordenable ('serialize')

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

category_links_list_3 es el id de la

la estructura del DOM UL es:

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

Gracias ...

Fuente

2009-12-24 KalenGi

¡Finalmente obtuve la respuesta! Es necesario para que el UL puede ordenar primero antes de llamar al método de serialización en él:

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

Esta vez linkOrderData contiene category_link [] = 8 & category_link [] = 9

Fuente

2009-12-24 22:13:42 KalenGi

Si serializar devuelve una cadena vacía , asegúrese de que los atributos de id incluyan un guión bajo. Deben estar en la forma: "set_number" Por ejemplo, una lista de 3 elementos con atributos id foo_1, foo_5, foo_2 se serializarán en foo [] = 1 & foo [] = 5 & foo [] = 2. Puede usar un guión bajo, signo igual o guión para separar el conjunto y el número. Por ejemplo foo = 1 o foo-1 o foo_1 todos serializar a foo [] = 1.

por encima de uno es un ejemplo. que lo usé es por eso. Vi a 2 usted.

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

que sea migth ayuda.

Fuente

2009-12-24 21:21:31 sikender

Tengo los identificadores con el formato correcto. Podría usar el método de devolución de llamada, pero como puede ver en la estructura DOM, el UL no es visible y por lo tanto no puede activar eventos. – KalenGi

Sí, me ayudó también –

var formStr = $ ('# contenedor') serializar()

Agregado:. Eso va a trabajar para elementos de formulario. También podría lanzar su propia serialización así:

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

Fuente

2009-12-24 21:25:35 jspcal

I intenté esto y no funciona. Gracias! – KalenGi

si no hay identificadores de formulario, puede ejecutar su propia función como se indica anteriormente – jspcal

Esto definitivamente replica la funcionalidad serializar. Sin embargo, encontré el motivo por el cual el método no fue devuelto cualquier cosa que he detallado en la respuesta a continuación. – KalenGi

pude hacer funcionar esta función usando la división. Si tiene varios guiones bajos en su clase, es posible que necesite ajustar el índice

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 
}

Fuente

2013-02-17 07:28:22

buena adición, pero debe eliminar n = 0 y ++ n ya que ya no se usa. –

Esta publicación fue muy útil. En caso de que esté buscando ayuda adicional, así es cómo lo hice funcionar (usando haml-rails). Usar la función toArray es ligeramente diferente. Si el uso de `serialize' tendría que establecer el atributo, una vez más, como 'elemento de datos =" elemento-datos _ # {id}'.

Gracias, internet, para saber tantas soluciones de programación.

: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

Fuente

2015-02-06 11:44:12

Respuesta

Cuestiones relacionadas