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

Oluştur 22/02/2009 saat 19:41
kullanıcı
Diğer dillerde...                            


4 cevaplar

oy
1

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.

Cevap 22/02/2009 saat 19:44
kaynak kullanıcı

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ı

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ı

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ı

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