valeurs get li Javascript et les encoder

Question

Au moment où j'ai deux (peut-être plus) les listes à puces qui sont triables avec jquery et ui.

Les choses qui fonctionnent sont que les listes sont connectés, les éléments sont draggable, les éléments peuvent être enlevés et une forme qui ajoute à la liste.

Ce que je dois cependant est une fonction qui obtient tout le contenu des articles li et JSON les encode prêts à être envoyés à une fonction db, ou quelque chose.

Im nouveau à JQuery, cependant, et la documentation cant trouver des articles li.

Hope Ive l'a bien expliqué.

Daniel

MISE À JOUR - Exemple de code

<script type="text/javascript"> 

    function addSortable(value) { 
     $("#sortable1").prepend("<li class='ui-state-default' id='"+value+"'><span class='ui-icon ui-icon-arrowthick-2-n-s'></span>"+value+"</li>"); 
    } 

    function deleteItem(value) { 
     $("#item-"+value).fadeOut('slow'); 

     $('#sortable1 li').each(function() { 
      var text = $(this).text(); 
     }); 

     document.getElementById('jsoningreds').innerHTML = text; 

    } 

    $(function() { 
     $("#sortable1, #sortable2").sortable({ 
      connectWith: '.connectedSortable' 
     }).disableSelection(); 
    }); 
    </script> 

    <ul id="sortable1" class="connectedSortable"> 

    <li id="item-0" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>8 large chicken thighs, skinned <a href="javascript:deleteItem(0)" class="deleteItem"></a></li> 

    <li id="item-1" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>seasoned flour (celery salt, cayenne pepper, paprika and white pepper) <a href="javascript:deleteItem(1)" class="deleteItem"></a></li> 
    <li id="item-2" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>2 small eggs, beaten <a href="javascript:deleteItem(2)" class="deleteItem"></a></li> 
    <li id="item-3" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>100g butter <a href="javascript:deleteItem(3)" class="deleteItem"></a></li> 
    </ul> 

    <hr /> 

    <h3>Recipe number 2</h3> 
    <ul id="sortable2" class="connectedSortable"> 

<li id="item-5" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>3 tsp vegetable oil <a href="javascript:deleteItem(5)" class="deleteItem"></a></li> 
    <li id="item-6" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>1 bay leaf <a href="javascript:deleteItem(6)" class="deleteItem"></a></li> 
    <li id="item-7" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>250g onions, finely sliced <a href="javascript:deleteItem(7)" class="deleteItem"></a></li> 
    </ul> 

    <p id="jsoningreds">hello</p>  

Answer 1

Vous voudrez peut-être regarder .sortable('serialize') - Il peut résoudre votre problème pour vous:

sérialisés de id article du sortable dans un chaîne soumise/ajax soumise. appel à cette méthode produit un hachage qui peut être ajouté à une URL pour soumettre facilement un nouvel ordre de l'article Retour à le serveur.

Il fonctionne par défaut en regardant l'id de chaque élément dans le format 'setname_number', et il crache un hachage comme "setname[]=number&setname[]=number".

Vous pouvez également donner une option de hachage comme deuxième argument pour définir comment la fonction fonctionne. Les options possibles sont: key (remplace part1[] avec tout ce que vous voulez), attribute (test un autre attribut que id) et expression (utilisez votre propre regexp). Si serialize renvoie une chaîne vide, assurez-vous que les attributs id incluent un trait de soulignement . Ils doivent être sous la forme: "set_number" Par exemple, une liste de 3 éléments avec attributs id foo_1, foo_5, foo_2 sérialisera à foo[]=1&foo[]=5&foo[]=2. Vous pouvez utiliser un trait de soulignement, signe égal ou trait d'union à séparer l'ensemble et le nombre. Pour l'exemple foo=1 ou foo-1 ou foo_1 tous sérialiser à foo[]=1.

Si serialize fait plus que vous avez besoin, .sortable('toArray') devrait vous retourner un tableau contenant les id s de chaque élément dans le sortable.