मैं AJAX फॉर्म जमा कैसे लागू कर सकता हूं?

Question

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

मुझे D8 में AJAX का उपयोग करके फ़ॉर्म फ़ील्ड को कैसे मान्य किया जाए, इसके कुछ उदाहरण मिले , लेकिन मुझे कोई भी उदाहरण नहीं मिला कि कैसे AJAX फ़ॉर्म सबमिट करना और फिर AJAX के माध्यम से कुछ सामग्री लोड करना ।

मैं अपना कार्य कैसे कार्यान्वित कर सकता हूं? आवश्यक कार्यक्षमता जोड़ने के लिए मुझे संपर्क फ़ॉर्म कैसे बदलना चाहिए?

Comments

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

— फ्लोरियन म्यूलर

Answer 1

रूपों में अजाक्स के साथ काम करते समय आपको निम्नलिखित बातों को ध्यान में रखना होगा:

• यह जान लें कि क्या आप पूरे फॉर्म या उसके हिस्से को फिर से बना रहे हैं और उस डिव एलिमेंट के अनुसार फॉर्म को रैप करें, जिसमें ID एट्रिब्यूट हो, जिसे आप # रैजैक्स डेफिनिशन में ट्रिगर रैपर के रूप में इस्तेमाल करेंगे। इसके लिए #prefix और #suffix विशेषताओं का उपयोग करें ( $form['#prefix'] = '<div id="myform-ajax-wrapper">'; $form['#suffix'] = '</div>';)। यह भी ध्यान रखें कि यदि आपके पास आपके फॉर्म के लिए कस्टम टेम्पलेट है तो इस मामले में उपसर्ग और प्रत्यय को प्रस्तुत न करें ( {{ form|without('#prefix', '#suffix') }}अन्यथा) वे दो बार प्रदान करेंगे - आपके टेम्पलेट द्वारा और फॉर्म थीम रैपर द्वारा भी। आप इसे खाली सरणी में #theme_wrappers सेट करके नहीं रोक सकते क्योंकि फॉर्म टेम्पलेट में वास्तविक फॉर्म html एलिमेंट है।

• अपने अजाक्स सबमिट हैंडलर में, उस पूरे फॉर्म या हिस्से को लौटाएं जिसे आपने लपेटा है और पुनर्निर्माण ( return $formया return $form['myelement']) करना चाहते हैं । आप केवल संरचना संरचना को वापस करने के बजाय ajax कमांड का उपयोग कर सकते हैं, लेकिन यह अधिक उन्नत सामान है।

• फॉर्म जमा करने तक हर मूल्य को राज्य के स्टोरेज में जमा करें। इसे सबमिट हैंडलर ( $form_state->set('somevalue', $form_state->getValue('somevalue'))) में करें और हमेशा कॉल करें $form_state->setRebuild()यदि आप अंतिम फॉर्म जमा नहीं कर रहे हैं। मैं कस्टम सबमिट हैंडलर रखना पसंद करता हूं लेकिन प्राथमिक सबमिट हैंडलर में अधिक तर्क होने के साथ-साथ पूरी तरह से ठीक है।

• हमेशा #nameउस बटन पर विशेषता का उपयोग करें जो सबमिशन कर रहा हो और यदि आपके पास केवल एक फॉर्म सबमिट हैंडलर का उपयोग $for_state->getTriggeringElement()['#name']हो तो यह पता लगाने के लिए कि किस तत्व ने फॉर्म जमा किया है।

• यदि आप #ajax परिभाषा में 'trig_as' का उपयोग कर रहे हैं, तो उदाहरण के लिए, आप चुनिंदा तत्व के साथ फ़ॉर्म सबमिट करना चाहते हैं, हमेशा उसी #ajax परिभाषा का उपयोग करें जैसे आप बटन पर करते हैं। मेरे अनुभव में यह आवश्यक है - हालांकि दस्तावेज में नहीं बताया गया है।

• उपयोग #limit_validation_errorsकरने से कभी-कभी बहुत मुश्किल हो सकता है और यह पता लगाने के लिए कि फॉर्म क्यों काम नहीं कर रहा है, इसमें कुछ समय लग सकता है, इसलिए इसे सावधानी से उपयोग करें (यह केवल तत्व (ओं) पर फॉर्म की त्रुटियों को अलग करने के लिए अच्छा है कि आप वास्तव में पुनर्निर्माण कर रहे हैं ताकि आपका कोड हो फार्म के अन्य भागों को प्रभावित नहीं करता है)।

• फ़ॉर्म सबमिट करने के लिए हमेशा बटनों का उपयोग करें और यदि आप कुछ फैंसी होना चाहते हैं, जैसे कि ट्रिगरिंग तत्व का चयन करें, तो #ajax कॉन्फ़िगरेशन के 'ट्रिगर_पास' विकल्प का उपयोग करें और अच्छे UI के लिए 'js-hide' वर्ग के साथ वास्तविक बटन को छिपाएं।

• फॉर्म की परिभाषा में, फॉर्म स्टेट की स्टोरेज से डिफ़ॉल्ट मान प्राप्त करें यदि वे मौजूद हैं या नहीं तो उन्हें स्टोरेज में असाइन करें। अन्यथा फॉर्म ठीक से काम नहीं करेगा।

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

• जब आप फॉर्म जमा करते हैं, तो इस तथ्य पर निर्भर करता है कि आपके पास (नहीं) अजाक्स के लिए कस्टम फॉर्म सबमिशन हैंडलर है, कॉल करके फॉर्म पुनर्निर्माण को अक्षम करें $form_state->setRebuild(FALSE)।

• आप ajax प्रस्तुत तत्व ( $element['#ajax']['callback'] = '::ajaxFormRebuild';और $element['#submit'] = [['::ajaxFormSubmitHandler'];) में :: आशुलिपि कॉल का उपयोग कर सकते हैं ।

• अजाक्स कॉलबैक विशुद्ध रूप से पुनर्निर्माण फॉर्म या अजाक्स कमांड को वापस करने के लिए है। कभी भी परिवर्तित रूप न लौटें (यानी इस कॉलबैक में फ़ॉर्म सरणी को न बदलें)।

Comments

महान जाँच सूची, अगर आपको ड्रुपल 8 में अजाक्स की समस्या है! (मैं पहली बात समझ में नहीं आता, क्यों नहीं ajax रैप div प्रस्तुत करना?)

— 4k4

मुझे ठीक से याद नहीं है, लेकिन मुझे लगता है कि रेंडरर में #theme, #theme_wrappers और #prefix और #suffix विशेषताओं को संभालने के साथ कुछ करना पड़ सकता है। मुझे लगता है कि आप <फॉर्म> तत्व के अंदर आवरण के साथ समाप्त हो जाएंगे। यह निश्चित रूप से केवल तभी लागू होता है जब आप पूरे फॉर्म का पुनर्निर्माण कर रहे हों, न कि केवल कुछ तत्व।

धन्यवाद, लेकिन मुझे AJAX जमा करने के लिए कोई सरल उदाहरण कहां मिल सकता है?

— सर्गेई क्रावचेंको

drupal.stackexchange.com/a/188227/21641

@ इवानराज, जवाब के लिए thx। क्या आप जानते हैं कि ajax सबमिशन के बाद कैसे फॉर्म को क्लियर किया जाता है?

— दूधोव्स्की

Answer 2

इस चेकलिस्ट में जोड़ने के लिए, यदि आप एक मोडल विंडो में एक फॉर्म प्रदर्शित कर रहे हैं, तो संभावना है कि त्रुटि संदेश प्रदर्शित नहीं होंगे। जैसा कि इवान जारोस ने कहा, आपको यह सुनिश्चित करना होगा कि फॉर्म में एक आवरण हो:

$form['#prefix'] = '<div id="my-form-wrapper-id">';
$form['#suffix'] = '</div>';

आपको फॉर्म को सबमिट करने वाले तत्व में निम्नलिखित जोड़ना होगा। ज्यादातर मामलों में यह आपका सबमिट बटन होगा:

$form['submit'] = [
    '#type' => 'submit',
    '#value' => $this->t('Save Changes'),
    '#attributes' => [
        'class' => [
            'btn',
            'btn-md',
            'btn-primary',
            'use-ajax-submit'
        ]
    ],
    '#ajax' => [
        'wrapper' => 'my-form-wrapper-id',
    ]
];

Answer 3

मैं संपर्क AJAX मॉड्यूल का उपयोग करें । इसके बारे में कुछ और विवरण (इसके परियोजना पृष्ठ से):

संपर्क Ajax Drupal 8 में संपर्क फ़ॉर्म के लिए ajax सबमिशन लागू करता है।

यह काम किस प्रकार करता है

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

• फॉर्म लोड करें: पेज को फिर से लोड किए बिना फॉर्म भेजेगा।
• कस्टम संदेश से लोड करें: एक कस्टम टेक्स्ट लोड करें।
• नोड से लोड: फॉर्म सबमिट करने के बाद एक नोड लोड करें।

यह मॉड्यूल आपकी मदद कर सकता है यदि:

• आपको पुष्टिकरण संदेश को अनुकूलित करने की आवश्यकता है
• आपको पृष्ठ को पुनः लोड किए बिना संपर्क फ़ॉर्म सबमिट करना होगा।
• आप प्रपत्र सबमिट करने के बाद एक कस्टम टेक्स्ट या किसी अन्य नोड को लोड करना चाहते हैं।