Jquery sortable('sérialiser')

Est-il possible d'obtenir le sérialisé liste des éléments à partir d'un UL dans jquery par l'appel de la méthode serialize directement au lieu d'utiliser un rappel? L'extrait de code:

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

category_links_list_3 est l'id de l'UL

Le DOM de la structure est:

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

Merci...

OriginalL'auteur KalenGi | 2009-12-24

21

J'ai enfin eu la réponse! Vous avez besoin de faire l'UL sortable d'abord avant d'appeler la méthode serialize:
```
var sortableLinks = $("#category_links_list_3");
$(sortableLinks).sortable();
var linkOrderData = $(sortableLinks).sortable('serialize');
```
Cette fois linkOrderData contient category_link[]=8&category_link[]=9

OriginalL'auteur KalenGi
18

Si sérialiser retourne une chaîne vide, assurez-vous que les attributs id inclure un trait de soulignement. Ils doivent être de la forme: "set_number" Par exemple, un 3 de l'élément de liste avec les attributs id foo_1, foo_5, foo_2 va sérialiser à foo[]=1&foo[]=5&foo[]=2. Vous pouvez utiliser un caractère de soulignement, signe égal ou trait d'union pour séparer l'ensemble et le nombre. Par exemple foo=1 ou foo-1 ou foo_1 tous les sérialiser à foo[]=1.

Ci-dessus est un exemple. que je l'ai utilisé. C'est pourquoi j'ai vu 2 vous.

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

il migth être vous aider.

J'ai du formater correctement les id en place. Je pourrais utiliser la méthode de rappel, mais comme vous pouvez le voir dans les DOM, la structure, l'amt n'est pas visible et ne peut donc déclencher des événements.
Ouais, ça m'a aidé aussi

OriginalL'auteur sikender
3

var formStr = $('#container').serialize()

Ajouté: Qui va travailler pour les éléments de formulaire. Vous pouvez également rouler vos propres sérialiser comme suit:
```
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')))
```
J'ai essayé et ça ne fonctionne pas. Merci!
si aucune forme identifiants, vous pouvez rouler votre propre fonction comme ci-dessus
Ce certainement réplique la sérialisation de la fonctionnalité. J'ai pourtant situé la raison pour laquelle la méthode n'était pas de retour tout comme je l'ai détaillé dans la réponse ci-dessous.
Merci , Cela fonctionne pour moi !

OriginalL'auteur jspcal

J'ai été en mesure d'obtenir cette fonction de travail à l'aide de la scission. Si vous avez plusieurs traits de soulignement dans votre classe, vous devrez peut-être ajuster l'indice

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
}

bien plus, mais vous devez supprimer n=0 et ++n, car il n'est plus utilisé.

OriginalL'auteur Kevin P

Ce post a été très utile. Dans le cas où vous êtes à la recherche pour obtenir de l'aide, voici comment je l'ai eu à travailler (à l'aide de haml-rails). À l'aide de la toArray fonction est un peu différente. Si à l'aide de la "sérialiser" vous devez définir l'attribut, de nouveau, en tant que " données de l'élément="data-item_#{id}'.

Merci, Internet, pour savoir si de nombreuses solutions de programmation.

: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

OriginalL'auteur Jesse Crockett

Vous devez vous connecter pour publier un commentaire.