La présentation d'une liste ordonnée à un serveur

voix
35

Pour enseigner moi-même Javascript, je suis en train de faire une page web qui donne aux utilisateurs une liste d'éléments (par exemple les aliments), leur demande de trier ces aliments de favori au moins favori, et soumettre les données quand ils sont fait. L'utilisation Sortables jQuery semble être une bonne façon de le faire. Cependant, je ne suis pas sûr de savoir comment devrait se produire la soumission de données.

Voici ce que je pense. Chacun de ces produits alimentaires serait dans un div comme ceci:

<div id=sortable>
    <div id=1 class=foods>Pizza</div>
    <div id=2 class=foods>Sushi</div>
    <div id=3 class=foods>Taco</div>
</div>

Lorsque l'utilisateur clique sur un bouton « Soumettre », je veux l'ordre de ces éléments à déterminer, et pour cette commande à envoyer au serveur (en passant, j'utilise Django sur le côté serveur). Il semble que je peux déterminer l'ordre des éléments avec une fonction comme ceci:

function getOrder()
{
    var foods = $(.foods);
    var ids = [];

    for(var x=0; x<foods.length; x++)
    {
        ids.push(foods[x].id);
    }
    return ids;
}

Cependant, je suis coincé sur deux choses:

  • Où dans mon code que j'appeler cette fonction? Je pense que ce serait une action onclick lorsque l'utilisateur appuie sur le bouton soumettre, mais je ne sais pas où les données que la fonction retourne obtiendraient passé.
  • Quel format serait le plus approprié pour envoyer cette commande au serveur (par exemple JSON)?

(Je sais que cela est vraiment une question de base, mais je ne l'ai jamais fait une page Web avec JavaScript avant, donc ce domaine de la programmation est tout nouveau pour moi.)

Créé 22/02/2009 à 19:41
utilisateur
Dans d'autres langues...                            


4 réponses

voix
1

Une façon plus sémantiquement pertinente de faire une liste est en utilisant un réel <ul>élément.

Donc, si vous aviez quelque chose comme ceci:

<ul id='foods'>
<li id='food_1'>Pizza</li>
<li id='food_2'>Sushi</li>
<li id='food_3'>Taco</li>
</ul>
<a href="javascript:saveFoods();">Save Order</a>

Le code jQuery suivant serait correspond le:

function saveFoods(id) {
    var data = $("#foods").sortable('serialize');
    var action = "/django/view/";
    $.post(action, data, function(json, status) {
        if(status == 'success' && json.status == 'success') {
            alert('Saved order of the foods!');
        } else {
            alert('Unable to complete the request.');
        }
    }, "json");
}

Selon les docs sur jQuery sortable , lorsque vous utilisez sérialiser les éléments d'un triables il faut leur carte d' identité d'être dans un setname_numberformat. Donc , en ayant votre liste comme food_1, food_2, etc. jQuery reconnaît que l'ID de Pizza est 1 et son jeu est la nourriture. La datavariable saveFoodscontiendra donc quelque chose comme food[]=1&food[]=2&food[]=3que vous pouvez traiter dans votre application Django.

Créé 22/02/2009 à 19:44
source utilisateur

voix
-1

Il serait probablement plus facile de mettre des champs cachés dans la liste des articles. Lorsque le formulaire est soumis, le même ordre sera envoyée au serveur dans le poste ou obtenir.

Exemple:

<div id="sortable">
    <div id="1" class="foods"><input type="hidden" name="sortable[]" value="1" />Pizza</div>
    <div id="2" class="foods"><input type="hidden" name="sortable[]" value="2" />Sushi</div>
    <div id="3" class="foods"><input type="hidden" name="sortable[]" value="3" />Taco</div>
</div>

Le message sera alors un tableau en elle, comme:

array(
    0 => 1,
    1 => 3,
    2 => 2
)
Créé 22/02/2009 à 19:46
source utilisateur

voix
0

Oui, la norme est une certaine forme d'action de l'utilisateur, donc un bouton clic est un bon choix. Vous allez écrire une routine qui appelle la routine de commande et l'envoie au serveur.

JSON est une bonne option, car il est léger. Si vous voulez jouer un peu plus, vous pouvez vous diriger vers XML, mais je vois très peu de raisons de faire autre que d'apprendre, comme XML ajoute du poids inutile dans ce cas.

Créé 22/02/2009 à 19:49
source utilisateur

voix
0

La bibliothèque Scriptaculous fournit des listes triables et fournit l'index trié que vous pouvez poster sur le serveur.

Créé 23/02/2009 à 20:33
source utilisateur

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more