web-dev-qa-db-fra.com

jQuery UI: sortable ('toArray') renvoie un tableau vide

Cela m'a laissé perplexe. Le code suivant renvoie ",":

<script type="text/javascript">
$(function() {
    $('#listB').sortable({
        connectWith: '#listA',
        update: function(event, ui) {
            var result = $(this).sortable('toArray');
            alert(result);
            }
    });
    $('#listA').sortable({
        connectWith: '#listB'
    });
});
</script>

<div id="boxA">
    <ul id="listA" class="myList">
        <li value="1">Item A</li>
        <li value="2">Item B</li>
        <li value="3">Item C</li>
        <li value="4">Item D</li>
        <li value="5">Item E</li>
        <li value="6">Item F</li>
        <li value="7">Item G</li>
    </ul>
</div>

<div id="boxB">
    <ul id="listB" class="myList">
        <li value="1">Item A</li>
        <li value="2">Item B</li>
        <li value="3">Item C</li>
        <li value="4">Item D</li>
        <li value="5">Item E</li>
        <li value="6">Item F</li>
        <li value="7">Item G</li>
    </ul>
</div>

Pourquoi?! Cela me rend fou! Aucune suggestion?

jquery-uijquery-ui-sortableiqueryable.toarray
21
bjork24

.sortable('toArray') sérialise les éléments Ids dans un tableau, et vos éléments n'ont pas d'identifiant, c'est pourquoi vous avez des chaînes vides.

38
manji

Vous pouvez définir quel attribut chercher comme ceci:

var result = $(this).sortable('toArray', {attribute: 'value'});
60
Niklaus

J'avais ce problème aussi, sauf que j'avais des identifiants sur mes éléments, jQuery's sortable ('toArray') était très difficile à renvoyer, mais vous pouvez les récupérer en javascript en utilisant ceci:

function getSortOrder() {
    var children = document.getElementById('sortedElement').childNodes;
    var sort = "";
    for (x in children) {
        sort = sort + children[x].id + ",";
    }
    return sort;
}

Cela renvoie bien sûr l'ID dans une chaîne délimitée par des virgules, mais vous pouvez également renvoyer le tableau. Je suis sûr qu'il existe un meilleur moyen de résoudre ce problème, c'est simplement la solution que j'ai trouvée.

3
Andrew Afternoon-Delight Hayde

Je vois quelques réponses purement javascript. Ils fonctionnent mais attention, ils ne peuvent pas renvoyer les éléments dans l’ordre visible à l’écran. En utilisant le code ci-dessous, voir jtsalva ci-dessus, les éléments seront renvoyés dans le bon ordre de tri. Cela m'a stoppé pendant un moment parce que je voulais enregistrer la nouvelle commande dans une base de données, afin de pouvoir recharger la grille où quelqu'un s'interrompait.

var result = $(this).sortable('toArray', {attribute: 'value'});
2
Keith Aymar

$ ('. sortable'). sortable ('toArray'); n'analysera que le premier élément de la classe sortable . Vous pouvez analyser tous les éléments en utilisant each : 

$('.sortable').each(function(){
    result.Push($(this).sortable('toArray'));
})
0
trojan

Pour utiliser un autre attribut, vous pouvez faire ceci:

$('#element').sortable('toArray' {attribute: 'value'})

Cela fera en sorte qu'il utilise maintenant l'attribut 'valeur' ​​de votre code.

Documentation sur la méthode Sortable toArray

0
jtsalva

Si serialize renvoie une chaîne vide, assurez-vous que les attributs id incluent un trait de soulignement. Ils doivent être sous la forme: "numéro_set" Par exemple, une liste de 3 éléments avec les attributs id "foo_1", "foo_5", "foo_2" sera sérialisée en "foo [] = 1 & foo [] = 5 & foo [] = 2". Vous pouvez utiliser un trait de soulignement, un signe égal ou un trait d'union pour séparer le jeu et le numéro. Par exemple, "foo = 1", "foo-1" et "foo_1" sont tous sérialisés en "foo [] = 1".

jq référence triable

0
Skeletor