Bir sunucuya sıralı liste gönderme

Question

Bir sunucuya sıralı liste gönderme

oy

35

Kendime Javascript öğretmek, ben kullanıcılara öğeleri (örneğin gıdaların) bir listesini veren bir web sayfası yapmaya çalışıyorum, favori favori azından bu yiyecekleri sıralamak ve bunlar bittiğinde verileri göndermek ister. jQuery sortables kullanma Bunu yapmak için iyi bir yol gibi görünüyor. Ancak, ben veri gönderme gerçekleşmesi gerektiğini nasıl emin değilim.

İşte düşünüyorum budur. bu gıda maddelerinin her biri böyle bir div olacaktır:

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

kullanıcı bir Gönder düğmesini tıkladığında, ben bu öğelerin sırası belirlenecektir istiyor ve bu sipariş için (ben sunucu tarafında Django kullanıyorum bu arada) sunucuya geri gönderilmek üzere. Şimdi durumda bir işlevle öğelerin sırasını belirleyebilir görünüyor:

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

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

Ancak, ben bir kaç şey şaşırıp:

Nerede benim kodda ben bu fonksiyon denir ki? Ben kullanıcı gönderme düğmesine bastığında o onclick eylem olacağını düşünüyorum, ama veri fonksiyon döner geçmiş olsun nerede emin değilim.
sunucuya (örneğin JSON) bu sıralamayı göndermek için en uygun hangi biçimi olurdu?

(Bu gerçekten temel bir soru olduğunu biliyorum, ama daha önce JavaScript bir web sayfası asla, bu yüzden programlama bu alanda benim için yeni hepsi bu.)

javascript

Oluştur 22/02/2009 saat 19:41
kullanıcı RexE

Diğer dillerde...

4 cevaplar

oy

-1

Muhtemelen öğeleri listesinden içine gizlenmiş alanları koymak kolay olurdu. Form gönderildiğinde, aynı sırada görevde sunucuya göndermek veya almak olacaktır.

Örnek:

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

Sonrası sonra gibi, içinde bir dizi sahip olacaktır:

array(
    0 => 1,
    1 => 3,
    2 => 2
)

Cevap 22/02/2009 saat 19:46
kaynak kullanıcı Darryl Hein

oy

0

Evet, norm kullanıcı eylemi çeşit, yani bir düğme tıklama iyi bir seçimdir. Sen sipariş rutin çağırır ve sunucuya gönderir bir rutin yazacak.

bu hafif olarak JSON, iyi bir seçenektir. Eğer biraz daha oynamak istiyorsanız, XML baş edebilirsiniz, ancak XML bu durumda gereksiz ağırlık ekler gibi ben öğrenmek yerine bu diğer yapmak için çok az neden göremiyorum.

Cevap 22/02/2009 saat 19:49
kaynak kullanıcı Gregory A Beamer

oy

0

Scriptaculous kütüphane sıralanabilir listeleri sağlar ve sunucuya geri gönderebilir sıralı indeksi sağlar.

Cevap 23/02/2009 saat 20:33
kaynak kullanıcı Diodeus - James MacFarlane

Paolo Bergantino · Accepted Answer · 2009-02-22 19:44

Bir liste yapmanın daha semantik alakalı yolu gerçek kullanmaktır <ul>elemanı.

Yani eğer böyle bir şey vardı:

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

Aşağıdaki jQuery kodu uygun olanı olacaktır:

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");
}

JQuery Docs göre sıralanabilir Bir sıralanabilir unsurları serialize kullandığınızda, bir olmak onların kimliklerini gerektirir setname_numberbiçimi. Olarak listenizi alarak Yani food_1, food_2Pizza kimliği 1'dir ve set gıda olduğunu vs. jQuery tanır. dataDeğişken saveFoodsirade ardından böyle bir şey ihtiva food[]=1&food[]=2&food[]=3size Django uygulamasında işleyebilmesi.