en utilisant jQueryUI liste triable avec des formulaires

J'utilise jQueryUI pour créer une liste triable, et la partie de l'interface utilisateur fonctionne très bien dans le fait que je peux trier les éléments comme souhaité sur la page Web. Cependant, je n'arrive pas à comprendre comment l'ordre de la liste triée est inclus dans le POST. Je suis un total de noob avec javascript alors s'il vous plaît pardonnez-moi si c'est vraiment simple.en utilisant jQueryUI liste triable avec des formulaires

Voici les parties pertinentes de mon html:

<script type="text/javascript"> 
    google.load("jquery", "1"); 
    google.load("jqueryui", "1"); 
    function OnLoad(){ 
    $("#sortable").sortable({ axis: "y", containment: "#ballot", scroll: false }); 
    $("#sortable").disableSelection(); 
    } 
    google.setOnLoadCallback(OnLoad); 
</script> 

[...] 

<form method="POST" action="/vote"> 
<input type="hidden" name="key" value="{{ election.key }}"> 
<input type="hidden" name="uuid" value="{{ uuid }}"> 
<div id="ballot" class="center"> 
<ol id="sortable" class="rankings"> 
    <li class="ranking">Jamie</li> 
    <li class="ranking">Joanie</li> 
    <li class="ranking">Morley</li> 
    <li class="ranking">Frank</li> 
    <li class="ranking">Larry</li> 
</ol> 
</div> 
</form>

Comment l'ordre de Jamie, Joanie, Morley, Frank et Larry encodées dans le POST?

Source

2011-02-27 Jeff O' Neill

Vous pouvez utiliser la méthode .serialize sur votre objet sortable: http://docs.jquery.com/UI/Sortable#method-serialize

$("#sortable").sortable('serialize') vous donnera un ajax éventail submittable d'articles. Affectez-le simplement à une zone de saisie si vous n'utilisez pas ajax. Ou tout simplement passer dans votre tableau de données si vous utilisez ajax

EDIT Exemple ici: http://jsfiddle.net/jomanlk/KeAer/2/

Comme la note jquery docs, pour que cela fonctionne vos éléments doivent avoir ids sous forme de set_number (par exemple rank_1, rang_2). J'ai donc modifié votre code HTML

Il suffit de retirer le return false sous la forme et la valeur sérialisée sera réglé sur la zone de saisie sur formulaire de soumission

Source

2011-02-27 04:34:04 JohnP

John, je ne suis pas en utilisant AJAX. Pour l'assigner à une boîte de saisie, est-ce que je ferais quelque chose comme ça?: –

J'ai modifié ma réponse avec détails sur l'utilisation et un exemple. La bonne façon de l'utiliser est '$ ('.sel'). Sortable ('sérialiser')' – JohnP

merci pour l'explication détaillée. –

Une autre option est d'avoir juste un champ de formulaire d'entrée avec l'ID valeur pour l'élément comme valeur et le même nom. Puis soumettez le formulaire après le tri des arrêts. Les valeurs seront toutes disponibles dans les données publiées dans l'ordre où elles se trouvaient après le tri.

je fais quelque chose comme ceci:

$(".sortable").each(function() { 
    $(this).sortable({ 
     update: function (event, ui) { 
      $(this).closest("form").trigger("onsubmit"); 
     } 
    }); 
});

Et la forme ressemble à ceci:

Source

2011-08-20 03:07:56

en utilisant jQueryUI liste triable avec des formulaires

Répondre

Questions connexes