एक सर्वर के लिए एक आदेश दिया सूची भेजने से

वोट
35

अपने आप जावास्क्रिप्ट को पढ़ाने के लिए, मैं एक वेब पेज है कि उपयोगकर्ताओं को आइटम (खाद्य पदार्थ जैसे) की एक सूची देता है बनाने के लिए कोशिश कर रहा हूँ, उन्हें पसंदीदा से कम पसंदीदा करने के लिए इन खाद्य पदार्थों को सॉर्ट, और जब वे काम हो गया डेटा प्रस्तुत करने के लिए कहता है। jQuery sortables का उपयोग करते हुए यह करने के लिए एक अच्छा तरीका की तरह लगता है। हालांकि, मुझे यकीन है कि कैसे डेटा प्रस्तुत होना चाहिए नहीं कर रहा हूँ।

यहाँ मैं क्या सोच रहा हूँ है। इन खाद्य पदार्थों में से प्रत्येक इस तरह एक div में होगा:

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

उपयोगकर्ता एक सबमिट करें बटन क्लिक करता है, मैं चाहता हूँ इन वस्तुओं में से क्रम निर्धारित किया है, और यह आदेश देने के लिए वापस (, मैं सर्वर साइड पर Django उपयोग कर रहा हूँ जिस तरह से) सर्वर के लिए भेजा जा सकता है। ऐसा लगता है मैं इस तरह एक समारोह के साथ आइटम का क्रम निर्धारित कर सकते हैं:

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

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

हालांकि, मैं चीजों के एक जोड़े पर अटक कर रहा हूँ:

  • मेरे कोड में मैं इस समारोह कहेंगे? मैं सोच रहा हूँ जब उपयोगकर्ता सबमिट बटन दबाता है यह एक onclick कार्रवाई होगी, लेकिन मुझे यकीन है कि जहां डाटा समारोह रिटर्न पारित कर दिया जायेगा नहीं हूँ।
  • क्या प्रारूप सर्वर (JSON जैसे) को यह आदेश भेजने के लिए सबसे उपयुक्त हो सकता है?

(मैं जानता हूँ कि यह एक बहुत ही बुनियादी सवाल है, लेकिन मैं इससे पहले कि जावास्क्रिप्ट के साथ एक वेब पेज बनाया कभी नहीं किया है, तो प्रोग्रामिंग के इस क्षेत्र के सभी नए मेरे लिए है।)

22/02/2009 को 19:41
उपयोगकर्ता
अन्य भाषाओं में...                            


4 जवाब

वोट
1

एक और अधिक शब्दार्थ प्रासंगिक एक सूची करने का तरीका एक वास्तविक का उपयोग करना है <ul>तत्व।

तो अगर आप कुछ इस तरह था:

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

निम्नलिखित jQuery कोड उचित होगा:

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 डॉक्स के अनुसार sortable , जब आप एक sortable के तत्वों को क्रमानुसार का उपयोग यह उनकी आईडी की आवश्यकता है एक में होना setname_numberप्रारूप। तो जैसा कि अपनी सूची होने से food_1, food_2आदि jQuery स्वीकार करता है कि पिज्जा की आईडी 1 है और इसके सेट भोजन है। dataमें चर saveFoodsइच्छा तो जैसे कुछ शामिल food[]=1&food[]=2&food[]=3है कि आप अपने Django अनुप्रयोग में संसाधित कर सकें।

22/02/2009 को 19:44
का स्रोत उपयोगकर्ता

वोट
-1

यह शायद आइटमों की सूची के अंदर छिपा क्षेत्रों डाल करने के लिए आसान होगा। जब फ़ॉर्म सबमिट उसी क्रम पोस्ट में सर्वर के लिए भेज सकते हैं या प्राप्त की जाएगी।

उदाहरण:

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

पद तो है जैसे कि यह में एक सरणी होगा,:

array(
    0 => 1,
    1 => 3,
    2 => 2
)
22/02/2009 को 19:46
का स्रोत उपयोगकर्ता

वोट
0

हाँ, आदर्श उपयोगकर्ता कार्रवाई के कुछ फार्म है, इसलिए किसी बटन को क्लिक एक अच्छा विकल्प है। आप एक नियमित कि आदेश दिनचर्या कॉल करता है और सर्वर को भेज देता है लिखेगा।

के रूप में यह हल्के है JSON, एक अच्छा विकल्प है। आप थोड़ा और खेलना चाहते हैं, तो आप एक्सएमएल चला आएगा, लेकिन मैं यह जानने के लिए की तुलना में इस अन्य करने के लिए बहुत कम कारण देखते हैं, के रूप में एक्सएमएल इस उदाहरण में अनावश्यक वजन कहते हैं।

22/02/2009 को 19:49
का स्रोत उपयोगकर्ता

वोट
0

Scriptaculous पुस्तकालय sortable सूचियों प्रदान करता है और क्रमबद्ध सूचकांक कि आप सर्वर को वापस पोस्ट कर सकते हैं प्रदान करता है।

23/02/2009 को 20:33
का स्रोत उपयोगकर्ता

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