दिलचस्प पोस्ट
System.IO.Directory.GetFiles के लिए कई फ़ाइल एक्सटेंशन एक्सटेंशन खोज ढेर पर एक नया सरणी बनाने के बिना जावा में एक सरणी के एक खंड को पकड़ो समूह द्वारा अनन्य मूल्यों की संख्या को आर डेटा.फ्रेम में कैसे जोड़ें प्रकार वर्गों के बीच भेद MonadPlus, वैकल्पिक, और मोनोइड? Iphone sdk 4.2.1 के साथ समस्या कब __ डीस्ट्रैक्ट को PHP में नहीं बुलाया जाएगा? कोको में XML को पार्स करना डिवाइस के रिबूट के बाद एंड्रॉइड ब्रॉडकास्ट रिसीवर, ऑटो रन सर्विस .NET प्रोग्राम के लिए स्टैक आकार कैसे बदला जाए? प्रतीक नहीं मिला: __PyCodecInfo_GetIncrementalDecoder ग्रीन थ्रेड्स बनाम नॉन ग्रीन थ्रेड्स जावास्क्रिप्ट ईएस 26 कम्प्यूटेशनल / समय की जटिलता संग्रह मैं एक पायथन ऑब्जेक्ट कैसे सही तरीके से साफ कर सकता हूं? "… … टोकन" का क्या अर्थ है? अर्थात् पैरामीटर पैक पर डबल एल्िप्सिस ऑपरेटर रेंज क्यों काम करती है, लेकिन सेल नहीं?

गतिशील रूप से Ajax के साथ एक Django फ़ॉर्डेसेट के लिए एक फार्म जोड़ रहा है

मैं स्वतः Ajax का उपयोग कर एक Django फ़ॉर्म्ससेट में नए रूप जोड़ना चाहता हूं, ताकि जब उपयोगकर्ता "जोड़" बटन पर क्लिक करता है तो जावास्क्रिप्ट चलाया जाता है जो पेज पर नया फ़ॉर्म जोड़ता है (जो कि फॉर्मसेट का हिस्सा है)।

वेब के समाधान से एकत्रित समाधान "गतिशील रूप से Ajax के साथ एक Django फ़ॉर्डेसेट के लिए एक फार्म जोड़ रहा है"

JQuery का उपयोग करके मैं ऐसा करता हूं:

मेरा टेम्पलेट:

<h3>My Services</h3> {{ serviceFormset.management_form }} {% for form in serviceFormset.forms %} <div class='table'> <table class='no_error'> {{ form.as_table }} </table> </div> {% endfor %} <input type="button" value="Add More" id="add_more"> <script> $('#add_more').click(function() { cloneMore('div.table:last', 'service'); }); </script> 

एक जावास्क्रिप्ट फ़ाइल में:

 function cloneMore(selector, type) { var newElement = $(selector).clone(true); var total = $('#id_' + type + '-TOTAL_FORMS').val(); newElement.find(':input').each(function() { var name = $(this).attr('name').replace('-' + (total-1) + '-','-' + total + '-'); var id = 'id_' + name; $(this).attr({'name': name, 'id': id}).val('').removeAttr('checked'); }); newElement.find('label').each(function() { var newFor = $(this).attr('for').replace('-' + (total-1) + '-','-' + total + '-'); $(this).attr('for', newFor); }); total++; $('#id_' + type + '-TOTAL_FORMS').val(total); $(selector).after(newElement); } 

यह क्या करता है:

cloneMore selector को पहली तर्क के रूप में स्वीकार करता है, और दूसरे type के रूप में cloneMore का type selector को क्या करना चाहिए, वह इसे पास करना चाहिए, उसे डुप्लिकेट करना चाहिए। इस मामले में, मैं इसे div.table:last पास करता div.table:last ताकि jQuery तालिका की एक श्रेणी के साथ अंतिम तालिका के लिए दिखता है :last यह का :last हिस्सा महत्वपूर्ण है क्योंकि selector का उपयोग यह निर्धारित करने के लिए भी किया जाता है कि नया फ़ॉर्म किस प्रकार के बाद डाला जाएगा। जितना अधिक आप चाहते हैं, उतना अधिक आप इसे शेष फॉर्म के अंत में चाहते हैं type तर्क है ताकि हम TOTAL_FORMS फ़ील्ड को अद्यतन कर सकें, खासकर TOTAL_FORMS , और साथ ही साथ वास्तविक फार्म फ़ील्ड। यदि आपके पास एक फॉर्मेट भरा हुआ है, तो कहें, Client मॉडल, मैनेजमेंट फ़ील्ड में id_clients-TOTAL_FORMS और id_clients-INITIAL_FORMS का आईडी होगा, जबकि फॉर्म फ़ील्ड id_clients-N-fieldname प्रारूप में id_clients-N-fieldname फॉर्म नंबर होने के साथ, 0 साथ शुरू इस type तर्क के साथ cloneMore फ़ंक्शन वर्तमान में मौजूद कितने रूपों पर दिखता है, और id_clients-(N)-name जैसे id_clients-(N)-name से कुछ फ़ील्ड के सभी फ़ील्ड नामों / आईडी की जगह नए फॉर्म के अंदर प्रत्येक इनपुट और लेबल के माध्यम से जाता है id_clients-(N)-name id_clients-(N+1)-name और इतने पर। यह समाप्त होने के बाद, यह TOTAL_FORMS फील्ड को नए फ़ॉर्म को प्रतिबिंबित करने के लिए अपडेट करता है और इसे सेट के अंत में जोड़ता है।

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

एक टेम्पलेट के रूप में empty_form का उपयोग करके पाओलो के उत्तर का सरलीकृत संस्करण।

 <h3>My Services</h3> {{ serviceFormset.management_form }} <div id="form_set"> {% for form in serviceFormset.forms %} <table class='no_error'> {{ form.as_table }} </table> {% endfor %} </div> <input type="button" value="Add More" id="add_more"> <div id="empty_form" style="display:none"> <table class='no_error'> {{ serviceFormset.empty_form.as_table }} </table> </div> <script> $('#add_more').click(function() { var form_idx = $('#id_form-TOTAL_FORMS').val(); $('#form_set').append($('#empty_form').html().replace(/__prefix__/g, form_idx)); $('#id_form-TOTAL_FORMS').val(parseInt(form_idx) + 1); }); </script> 

मैंने एक एप से एक स्निपेट पोस्ट किया है जो मैंने थोड़ी देर पहले काम किया था। पाओलो के समान है, लेकिन आप फ़ॉर्म भी हटा सकते हैं।

पाओलो का सुझाव एक चेतावनी के साथ खूबसूरती से काम करता है – ब्राउज़र का बैक / फॉरवर्ड बटन

पाओलो की स्क्रिप्ट के साथ बनाए गए गतिशील तत्वों को प्रस्तुत नहीं किया जाएगा, यदि उपयोगकर्ता वापस / अग्रेषित बटन का उपयोग करके फ़ॉर्मेट पर लौटता है। कुछ के लिए एक सौदा ब्रेकर हो सकता है एक मुद्दा

उदाहरण:

1) उपयोगकर्ता "ऐड-ऐज" बटन का उपयोग करके फ़ॉर्मेट में दो नए रूप जोड़ता है

2) उपयोगकर्ता फ़ॉर्म भरता है और फ़ॉर्मेट को प्रस्तुत करता है

3) उपयोगकर्ता ब्राउज़र में वापस बटन को क्लिक करता है

4) फ़ॉर्मसेट अब मूल रूप से कम हो गया है, सभी गतिशील रूप से जोड़े गए फॉर्म नहीं हैं

यह पाओलो की स्क्रिप्ट पर कोई दोष नहीं है; लेकिन डोम हेरफेर और ब्राउज़र की कैश के साथ जीवन का एक तथ्य।

मुझे लगता है कि कोई सत्र में फ़ॉर्म के मूल्यों को स्टोर कर सकता है और कुछ अजाक्स जादू कर सकता है जब फ़ॉर्मेट लोड को तत्वों को फिर से बनाने और सत्र के मूल्यों को पुनः लोड करने के लिए; लेकिन आप एक ही उपयोगकर्ता के बारे में कैसे गुदा चाहते हैं और फार्म के कई उदाहरणों के आधार पर यह बहुत जटिल हो सकता है।

इस से निपटने के लिए किसी के पास एक अच्छा सुझाव है?

धन्यवाद!

डायनामिक डीजेंगो फ़ॉर्म के लिए निम्न समाधान देखें:

http://code.google.com/p/django-dynamic-formset/

https://github.com/javisantana/django-dinamyc-form/tree/master/frm

वे दोनों jQuery का उपयोग करते हैं और डीजेंगो-विशिष्ट हैं। सबसे पहले थोड़ा और पॉलिश लगता है और एक डाउनलोड प्रदान करता है जो w / demos जो उत्कृष्ट हैं।

अनुकरण और अनुकरण:

  • "जोड़" बटन पर क्लिक करने से पहले स्थिति के अनुरूप एक फ़ॉर्मेट बनाएं
  • पृष्ठ लोड करें, स्रोत देखें और सभी <input> फ़ील्ड का ध्यान रखें
  • "ऐड" बटन क्लिक करने के बाद स्थिति के अनुरूप फ़ॉर्मेट को संशोधित करें (अतिरिक्त फ़ील्ड की संख्या में बदलाव)
  • पृष्ठ को लोड करें, स्रोत देखें और ध्यान दें कि कैसे <input> फ़ील्ड बदल गए हैं
  • कुछ जावास्क्रिप्ट बनाएं जो डीओएम को राज्य से पहले राज्य से स्थानांतरित करने के लिए उचित तरीके से संशोधित करता है।
  • "जोड़" बटन पर जावास्क्रिप्ट अटैच करें

जबकि मैं जानता हूं कि फ़ॉर्मेट्स विशेष छिपे हुए <input> फ़ील्ड का उपयोग करते हैं और स्क्रिप्ट को लगभग क्या करना चाहिए, मैं अपने सिर के ऊपर से विवरण को याद नहीं करता। मैंने ऊपर वर्णित क्या है कि मैं आपकी स्थिति में क्या करूँगा।

इसके लिए एक jquery प्लगइन है , मैं इसे जेनजी 1.3 में इनलाइन_फ़ॉर्म सेट के साथ प्रयोग किया था, और यह पूरी तरह से काम करता है, जिसमें प्रीपुल्यूलेशन, क्लाइंट साइड फ़ॉर्म जोड़ने, हटाने, और कई इनलाइन_फोर्मेट्स शामिल हैं।

एक विकल्प हर संभव फार्म के साथ एक फॉर्मेट बनाने के लिए होगा, लेकिन शुरू में असुरक्षित रूपों को छिपाने के लिए सेट किया गया – यानी, display: none; । जब कोई फॉर्म प्रदर्शित करना आवश्यक होता है, तो इसे सीएसएस डिस्प्ले को block या जो कुछ भी उपयुक्त है उसे सेट करें।

आपके "एजेक्स" क्या कर रहा है, इसके बारे में अधिक जानकारी के बिना, अधिक विस्तृत प्रतिक्रिया देने में मुश्किल है।

एक अन्य क्लोन अधिक संस्करण, जो क्षेत्र के चयनात्मक स्वच्छीकरण के लिए अनुमति देता है। इसका उपयोग करें जब आपको कई क्षेत्रों को मिटाने से रोकना होगा

 $('table tr.add-row a').click(function() { toSanitize = new Array('id', 'product', 'price', 'type', 'valid_from', 'valid_until'); cloneMore('div.formtable table tr.form-row:last', 'form', toSanitize); }); function cloneMore(selector, type, sanitize) { var newElement = $(selector).clone(true); var total = $('#id_' + type + '-TOTAL_FORMS').val(); newElement.find(':input').each(function() { var namePure = $(this).attr('name').replace(type + '-' + (total-1) + '-', ''); var name = $(this).attr('name').replace('-' + (total-1) + '-','-' + total + '-'); var id = 'id_' + name; $(this).attr({'name': name, 'id': id}).removeAttr('checked'); if ($.inArray(namePure, sanitize) != -1) { $(this).val(''); } }); newElement.find('label').each(function() { var newFor = $(this).attr('for').replace('-' + (total-1) + '-','-' + total + '-'); $(this).attr('for', newFor); }); total++; $('#id_' + type + '-TOTAL_FORMS').val(total); $(selector).after(newElement); } 

क्लोन मोरे फ़ंक्शन के साथ एक छोटी सी समस्या है चूंकि यह डीजेंगो ऑटो-जेनरेट किए गए छिपे हुए क्षेत्रों के मूल्य को भी साफ कर रहा है, इसलिए यदि आप एक से अधिक खाली फ़ॉर्म के साथ फ़ॉर्मेट्स को सहेजने का प्रयास करते हैं, तो यह डीजेंगो को शिकायत करने का कारण बनता है।

यहां एक तय है:

 function cloneMore(selector, type) { var newElement = $(selector).clone(true); var total = $('#id_' + type + '-TOTAL_FORMS').val(); newElement.find(':input').each(function() { var name = $(this).attr('name').replace('-' + (total-1) + '-','-' + total + '-'); var id = 'id_' + name; if ($(this).attr('type') != 'hidden') { $(this).val(''); } $(this).attr({'name': name, 'id': id}).removeAttr('checked'); }); newElement.find('label').each(function() { var newFor = $(this).attr('for').replace('-' + (total-1) + '-','-' + total + '-'); $(this).attr('for', newFor); }); total++; $('#id_' + type + '-TOTAL_FORMS').val(total); $(selector).after(newElement); } 

मुझे लगता है कि यह एक बेहतर समाधान है

आप Django में एक गतिशील formset कैसे बनेंगे?

क्या चीजें क्लोन नहीं करती हैं:

  • कोई प्रारंभिक रूप मौजूद न होने पर फ़ॉर्म जोड़ें
  • रूप में जावास्क्रिप्ट को बेहतर ढंग से संभालता है, उदाहरण के लिए डीजेंगो-सीकेडीटर
  • प्रारंभिक डेटा रखें

@ पाओलो बर्गेंटिनो

सभी हैंडलर्स को क्लोन करने के लिए बस लाइन को संशोधित करें

 var newElement = $(selector).clone(); 

के लिये

 var newElement = $(selector).clone(true); 

इस समस्या को रोकने के लिए

हाँ, यदि आप प्रविष्टियों की एक सीमित संख्या में हैं तो मैं भी उन्हें HTML में प्रतिपादित करने की सलाह देता हूं। (यदि आप नहीं करते हैं तो आपको उपयोगकर्ता के लिए एक और विधि चाहिए)।

आप उन्हें इस तरह छिपा सकते हैं:

 {% for form in spokenLanguageFormset %} <fieldset class="languages-{{forloop.counter0 }} {% if spokenLanguageFormset.initial_forms|length < forloop.counter and forloop.counter != 1 %}hidden-form{% endif %}"> 

तो जे एस वास्तव में सरल है:

 addItem: function(e){ e.preventDefault(); var maxForms = parseInt($(this).closest("fieldset").find("[name*='MAX_NUM_FORMS']").val(), 10); var initialForms = parseInt($(this).closest("fieldset").find("[name*='INITIAL_FORMS']").val(), 10); // check if we can add if (initialForms < maxForms) { $(this).closest("fieldset").find("fieldset:hidden").first().show(); if ($(this).closest("fieldset").find("fieldset:visible").length == maxForms ){ // here I'm just hiding my 'add' link $(this).closest(".control-group").hide(); }; }; } 

क्योंकि ऊपर दिए गए सभी उत्तरों jQuery का उपयोग करते हैं और कुछ चीजें थोड़ा जटिल बनाते हैं मैंने निम्नलिखित स्क्रिप्ट लिखा था:

 function $(selector, element) { if (!element) { element = document } return element.querySelector(selector) } function $$(selector, element) { if (!element) { element = document } return element.querySelectorAll(selector) } function hasReachedMaxNum(type, form) { var total = parseInt(form.elements[type + "-TOTAL_FORMS"].value); var max = parseInt(form.elements[type + "-MAX_NUM_FORMS"].value); return total >= max } function cloneMore(element, type, form) { var totalElement = form.elements[type + "-TOTAL_FORMS"]; total = parseInt(totalElement.value); newElement = element.cloneNode(true); for (var input of $$("input", newElement)) { input.name = input.name.replace("-" + (total - 1) + "-", "-" + total + "-"); input.value = null } total++; element.parentNode.insertBefore(newElement, element.nextSibling); totalElement.value = total; return newElement } var addChoiceButton = $("#add-choice"); addChoiceButton.onclick = function() { var choices = $("#choices"); var createForm = $("#create"); cloneMore(choices.lastElementChild, "choice_set", createForm); if (hasReachedMaxNum("choice_set", createForm)) { this.disabled = true } }; 

सबसे पहले आपको गलत पर auto_id सेट करना चाहिए और आईडी और नाम के दोहराव को अक्षम करना चाहिए। चूंकि इन इनपुट नामों को अद्वितीय रूप में होना चाहिए, सभी पहचान उनके साथ की जाती है और आईडी के साथ नहीं। आपको form , type और फ़ॉर्मेट के कंटेनर को भी बदलना होगा। (उपरोक्त उदाहरणों में)