আমি কীভাবে এজেএক্স ফর্ম জমা বাস্তবায়ন করতে পারি?


14

আমার কাজটি এজেএক্সের মাধ্যমে যোগাযোগ ফর্ম জমা দেওয়া এবং তারপরে "জমা দেওয়ার জন্য আপনাকে ধন্যবাদ!" বার্তা, ফর্ম ছিল যেখানে জায়গায় লোড। সুতরাং আমার বিদ্যমান যোগাযোগের ফর্মটি আজাক্সাই করা দরকার।

আমি ডি 8-এ এজেএক্স ব্যবহার করে ফর্ম ক্ষেত্রগুলিকে কীভাবে বৈধতা দেবে তার কয়েকটি উদাহরণ পেয়েছি , তবে এজ্যাক্স ফর্ম জমা দেওয়ার বাস্তবায়ন করতে এবং এজেন্টের মাধ্যমে কিছু সামগ্রী লোড করার কোনও উদাহরণ আমি পাই না I

আমি কীভাবে আমার কাজটি বাস্তবায়ন করতে পারি? প্রয়োজনীয় কার্যকারিতা যুক্ত করতে কীভাবে আমার যোগাযোগের ফর্মটি পরিবর্তন করা উচিত?


যারা এখানে জেনেরিক ফর্ম প্রশ্নটি নিয়ে আসে তাদের জন্য: ওয়েবফর্ম মডিউল আপনাকে যেমন চাইবে তেমন একটি ফর্ম তৈরি করতে এবং এজ্যাক্সের মাধ্যমে ফলাফলগুলি জমা দেওয়ার অনুমতি দেয়।
ফ্লোরিয়ান মুলার

উত্তর:


26

ফর্মগুলিতে আজাক্সের সাথে কাজ করার সময় আপনাকে নিম্নলিখিত বিষয়গুলি মাথায় রাখতে হবে:

  • যদি আপনি পুরো ফর্ম বা এটা একটি অংশ মাত্র পুনর্নির্মাণ করা হয় এবং সঙ্গে সেই অনুযায়ী ফর্ম মোড়ানো DIV আছে উপাদান আছে যা আইডি অ্যাট্রিবিউট যে আপনি 'মোড়কের' হিসেবে triggering উপাদান #ajax সংজ্ঞা ব্যবহার করা হবে। এই ( $form['#prefix'] = '<div id="myform-ajax-wrapper">'; $form['#suffix'] = '</div>';) এর জন্য # প্রাকফিক্স এবং # সুফিক্স অ্যাট্রিবিউট ব্যবহার করুন । এছাড়াও মনে রাখা যে আপনি যদি আপনার ফর্ম জন্য কাস্টম টেমপ্লেট আছে না রেন্ডার উপসর্গ ও প্রত্যয় এই ক্ষেত্রে ( {{ form|without('#prefix', '#suffix') }}) অন্যথায় তারা দুইবার অনুষ্ঠিত হবে - আপনার টেমপ্লেট দ্বারা এবং ফর্ম থিম মোড়কের দ্বারা। ফর্ম টেম্পলেটটিতে প্রকৃত ফর্ম HTML উপাদান রয়েছে বলে আপনি # থিম_রাপ্পারকে খালি অ্যারেতে সেট করে আপনি এটি প্রতিরোধ করতে পারবেন না।

  • আপনার এজাক্সে হ্যান্ডলার জমা দিন, পুরো ফর্মটি বা এর মোড়কটি যে অংশটি আপনি জড়িয়ে দিয়েছেন এবং পুনর্নির্মাণ করতে চান তা ( return $formবা return $form['myelement']) ফিরিয়ে দিন । আপনি কেবল ফর্ম কাঠামো ফিরিয়ে দেওয়ার পরিবর্তে অতিরিক্তভাবে এজাক্স আদেশগুলি ব্যবহার করতে পারেন তবে এটি আরও উন্নত স্টাফ।

  • আপনি ফর্মটি জমা না দেওয়া পর্যন্ত ফর্ম রাজ্যের স্টোরেজে প্রতিটি মান সংরক্ষণ করুন। সাবমিট হ্যান্ডেলারে এটি করুন ( $form_state->set('somevalue', $form_state->getValue('somevalue'))) এবং $form_state->setRebuild()আপনি চূড়ান্ত ফর্ম জমা না দিলে সর্বদা কল করুন । আমি কাস্টম জমা হ্যান্ডলারগুলি পছন্দ করি তবে প্রাথমিক জমা হ্যান্ডলারটিতে আরও যুক্তিযুক্ত হওয়াও পুরোপুরি ঠিক।

  • সবসময় #nameজমা দেওয়া বোতামটিতে অ্যাট্রিবিউট ব্যবহার করুন এবং যদি আপনার কাছে একক ফর্ম জমা থাকে তবে $for_state->getTriggeringElement()['#name']কোন উপাদানটি ফর্মটি জমা দিয়েছে তা সনাক্ত করতে হ্যান্ডলার ব্যবহার করুন ।

  • আপনি যদি # জ্যাক্স সংজ্ঞাতে 'ট্রিগার_আস' ব্যবহার করে থাকেন, উদাহরণস্বরূপ আপনি যদি নির্বাচিত উপাদানগুলির সাথে ফর্মটি জমা দিতে চান তবে সর্বদা আপনার # বোতামের মতো একই # জ্যাক্স সংজ্ঞাটি ব্যবহার করুন। আমার অভিজ্ঞতায় এটি প্রয়োজনীয় - যদিও নথিতে বিবৃত নয়।

  • #limit_validation_errorsকখনও কখনও ব্যবহার করা খুব জটিল হয়ে উঠতে পারে এবং ফর্মটি কেন কাজ করছে না তা বুঝতে বেশ কিছুটা সময় নিতে পারে তাই যত্ন সহকারে এটি ব্যবহার করুন (এটি কেবলমাত্র উপাদানগুলির ক্ষেত্রে ফর্ম ত্রুটিগুলি বিচ্ছিন্ন করার পক্ষে ভাল যা আপনার কোডটি পুনর্নির্মাণ করছে যাতে আপনার কোড ফর্মের অন্যান্য অংশগুলিকে প্রভাবিত করে না)।

  • ফর্মটি জমা দেওয়ার জন্য সর্বদা বোতামগুলি ব্যবহার করুন এবং যদি আপনি কিছু অভিনব পছন্দ করতে চান, যেমন ট্রিগার উপাদান হিসাবে নির্বাচন করা হয় তবে # জ্যাক্স কনফিগারেশনের 'ট্রিগার_আস' বিকল্পটি ব্যবহার করুন এবং ভাল ইউআইয়ের জন্য 'জেএস-হাইড' ক্লাসের সাথে আসল বোতামটি আড়াল করুন।

  • ফর্ম সংজ্ঞায়, ফর্মের স্টেটের স্টোরেজ থেকে ডিফল্ট মানগুলি পাওয়া যায় যদি সেগুলি থাকে বা সেগুলি না থাকলে স্টোরেজটিতে তাদের অর্পণ করুন। অন্যথায় ফর্মটি সঠিকভাবে কাজ করবে না।

  • এটি বা অন্য যে কোনও জিনিস আপনার বাহ্যিকভাবে অ্যাক্সেস নেই তা ব্যবহার করবেন না, তা না হলে এটি অজ্যাক্সটি ভেঙে দেবে। সর্বদা স্ট্যাটিক এজাক্স হ্যান্ডলার ব্যবহার করুন।

  • অবশেষে ফর্মটি জমা দেওয়ার সময়, এজ্যাক্সের জন্য আপনার কাছে কাস্টম ফর্ম জমা হ্যান্ডলার রয়েছে (এই নয়), কল করে ফর্ম পুনর্নির্মাণকে অক্ষম করুন $form_state->setRebuild(FALSE)

  • আপনি এজ্যাক্স সাবমিট এলিমেন্টে ( $element['#ajax']['callback'] = '::ajaxFormRebuild';এবং $element['#submit'] = [['::ajaxFormSubmitHandler'];) শর্টহ্যান্ড কলগুলি ব্যবহার করতে পারেন ।

  • এজ্যাক্স কলব্যাক সম্পূর্ণরূপে পুনর্নির্মাণ ফর্ম বা এজাক্স আদেশগুলি ফিরিয়ে আনার জন্য। কখনও পরিবর্তিত ফর্মটি ফিরে আসবেন না (যেমন এই কলব্যাকের ফর্ম অ্যারে পরিবর্তন করবেন না)।


গ্রেট চেকের তালিকা, আপনার যদি ড্রপাল 8 এজ্যাক্স নিয়ে সমস্যা হয়! (আমি প্রথম বিষয়টি বুঝতে পারি না, কেন
এজাক্সের মোড়ক বিভাজন

আমার ঠিক মনে নেই তবে আমি মনে করি এটির সাথে # থিম, # থিম_উপ্পার্স এবং রেন্ডারারের # প্রিফিক্স এবং # সুফিক্স বৈশিষ্ট্যগুলি পরিচালনা করার সাথে কিছু ছিল। আমি মনে করি আপনি <for> উপাদানটির মোড়ক দিয়ে শেষ করবেন। এটি অবশ্যই প্রযোজ্য যদি আপনি পুরো উপাদানটি পুনর্নির্মাণ করেন তবে কিছু উপাদান নয়।

আপনাকে ধন্যবাদ, তবে আমি এজেএক্স জমা দেওয়ার জন্য কোনও সাধারণ উদাহরণ কোথায় পাব?
সের্গেই ক্রাভচেনকো


@ ইভানজারোস, উত্তরের জন্য thx। আপনি কি জানেন যে একটি অজ্যাক্স জমা দেওয়ার পরে ফর্মের মানগুলি কীভাবে সাফ করবেন?
দুধভস্কি

1

এই চেকলিস্টে যুক্ত করতে, আপনি যদি কোনও মডেল উইন্ডোতে কোনও ফর্ম প্রদর্শন করেন তবে ত্রুটি বার্তাগুলি প্রদর্শিত না হওয়ার সম্ভাবনা রয়েছে। ইভান জারোস যেমন বলেছিলেন, আপনাকে নিশ্চিত করতে হবে যে ফর্মটির একটি মোড়ক রয়েছে:

$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',
    ]
];

1

আমি পরিচিতি এজ্যাক্স মডিউলটি ব্যবহার করি । এটি সম্পর্কে আরও কিছু বিশদ (এর প্রকল্প পৃষ্ঠা থেকে):

যোগাযোগ আজাক্স দ্রুপাল 8 এ যোগাযোগের ফর্মের জন্য এজাক্স জমা দেওয়ার প্রয়োগ করে।

কিভাবে এটা কাজ করে

মডিউল সক্ষম করার পরে, প্রতিটি পরিচিতি ফর্ম একটি চেকবক্স প্রদর্শন করবে "অ্যাজ্যাক্স ব্যবহার করুন"। যখন এই চেকবক্সটি সক্ষম করা হবে তখন যোগাযোগ ফর্মটি এই বিকল্পগুলির সাথে আপনাকে অন্য একটি বিকল্প "নিশ্চিতকরণের ধরণ" প্রদর্শন করবে:

  • ফর্মটি লোড করুন: পৃষ্ঠাটি পুনরায় লোড ছাড়াই ফর্মটি প্রেরণ করবে।
  • কাস্টম বার্তা থেকে লোড করুন: একটি কাস্টম পাঠ্য লোড করুন।
  • নোড থেকে লোড করুন: ফর্ম জমা দেওয়ার পরে একটি নোড লোড করুন।

এই মডিউলটি আপনাকে সহায়তা করতে পারে যদি:

  • আপনাকে নিশ্চিতকরণ বার্তাটি কাস্টমাইজ করতে হবে
  • পৃষ্ঠাটি পুনরায় লোড না করে আপনাকে একটি যোগাযোগ ফর্ম জমা দিতে হবে।
  • আপনি ফর্ম জমা দেওয়ার পরে একটি কাস্টম পাঠ্য বা অন্য নোড লোড করতে চান।
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.