AJAX form gönderimini nasıl uygulayabilirim?

Görevim AJAX aracılığıyla iletişim formu göndermek ve sonra "Gönderdiğiniz için teşekkür ederiz!" mesaj, formun bulunduğu yere yüklenir. Bu yüzden mevcut iletişim formunu muaf tutmalıyım.

D8 AJAX kullanarak form alanlarını doğrulamak için bazı örnekler buldum , ama ajax form gönderme uygulamak ve sonra AJAX üzerinden bazı içerik yüklemek için nasıl bir örnek bulamıyorum .

Görevimi nasıl uygulayabilirim? Gerekli işlevleri eklemek için iletişim formunu nasıl değiştirmeliyim?

Ajax ile formlarda çalışırken aşağıdakileri aklınızda bulundurmalısınız:

• formun tamamını mı yoksa yalnızca bir kısmını mı yeniden oluşturduğunuzu bilin ve formu , tetikleyici öğenin #ajax tanımında kullanacağınız "sarmalayıcı" olarak ID özniteliğine sahip div öğesine uygun şekilde sarın . Bunun için #prefix ve #suffix niteliklerini kullanın ( ). Ayrıca, formunuzun bu durumda ( ) önekini ve son ekini OLMAMASI için özel bir şablonunuz varsa, aksi takdirde iki kez oluşturulacağını unutmayın - şablonunuz ve ayrıca form tema sarıcısı tarafından. Form şablonu gerçek form html öğesini içerdiğinden #theme_wrappers öğesini boş diziye ayarlayarak bunu önleyemezsiniz.$form['#prefix'] = '<div id="myform-ajax-wrapper">'; $form['#suffix'] = '</div>';{{ form|without('#prefix', '#suffix') }}

• ajax gönderme işleyicinizde, sardığınız ve yeniden oluşturmak istediğiniz formun tamamını veya bir kısmını iade edin ( return $formveya return $form['myelement']). Ek olarak sadece form yapısını döndürmek yerine ajax komutlarını kullanabilirsiniz, ancak bu daha gelişmiş şeylerdir.

• siz formu gönderene kadar her değeri form durumunun deposunda saklayın. Bunu gönderme işleyicisinde ( $form_state->set('somevalue', $form_state->getValue('somevalue'))) yapın ve $form_state->setRebuild()son form gönderimini yapmıyorsanız daima arayın . Özel gönderme işleyicilerine sahip olmayı tercih ediyorum, ancak birincil gönderme işleyicisinde daha fazla mantığa sahip olmak da tamamen tamam.

• her zaman #namegönderimi yapan düğmede niteliği kullanın ve yalnızca tek bir form gönderme işleyicisi varsa formu $for_state->getTriggeringElement()['#name']hangi öğenin gönderdiğini algılamak için kullanın .

• #ajax tanımında 'trigger_as' kullanıyorsanız, formu örneğin select öğesiyle göndermek istemeniz durumunda, her zaman düğmedeki gibi #ajax tanımını kullanın. Benim tecrübelerime göre bu gerekli - belgelerde belirtilmese de.

• kullanmak #limit_validation_errorsbazen çok zor olabilir ve formun neden çalışmadığını anlamak biraz zaman alabilir, bu yüzden dikkatli bir şekilde kullanın (bu, yalnızca gerçekte oluşturduğunuz elemanlarda form hatalarını izole etmek için iyidir, böylece kodunuz formun diğer bölümlerini etkilemez).

• formu göndermek için her zaman düğmeleri kullanın ve tetikleyici öğe olarak seçmek gibi süslü bir şey istiyorsanız, #ajax yapılandırmasının 'trigger_as' seçeneğini kullanın ve iyi bir kullanıcı arayüzü için 'js-hide' sınıfıyla gerçek düğmeyi gizleyin.

• form tanımında, varsa, form durumunun deposundan varsayılan değerleri alın veya yoksa depolama alanına atayın. Aksi takdirde form düzgün çalışmaz.

• $ this komutunu veya dışarıdan erişiminiz olmayan başka bir şeyi kullanmayın, aksi takdirde ajax'ı bozar. her zaman statik ajax işleyicileri kullanın.

• nihayet formu gönderirken, ajax için özel bir form gönderme işleyicisine sahip olmanıza bağlı olarak, formun yeniden oluşturulmasını arayarak devre dışı bırakın $form_state->setRebuild(FALSE).

• ajax gönderme öğesinde ( $element['#ajax']['callback'] = '::ajaxFormRebuild';ve $element['#submit'] = [['::ajaxFormSubmitHandler'];) :: steno çağrılarını kullanabilirsiniz .

• ajax geri çağrısı tamamen yeniden oluşturulmuş formu veya ajax komutlarını döndürmektir. Asla değiştirilmiş formu döndürmeyin (yani, bu geri çağrıdaki form dizisini değiştirmeyin).

Bu kontrol listesine eklemek için, kalıcı bir pencerede bir form görüntülüyorsanız, hata mesajlarının görüntülenmeme olasılığı vardır. Ivan Jaros'un dediği gibi, formun bir sarıcıya sahip olduğundan emin olmalısınız:

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

Ayrıca, formu gönderen öğeye aşağıdakileri de eklemeniz gerekir. Çoğu durumda gönderme düğmeniz olur:

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

Kullandığım İletişim ajax modülü. Bununla ilgili biraz daha ayrıntı (proje sayfasından):

İletişim Ajax, Drupal 8'deki İletişim formu için ajax gönderimi uygular.

Nasıl çalışır

Modülü etkinleştirdikten sonra, her iletişim formunda "ajax kullan" onay kutusu gösterilir. Bu onay kutusu etkinleştirildiğinde, iletişim formunda aşağıdaki seçeneklerle birlikte başka bir "Onay türü" seçeneği gösterilir:

• Formu yükleyin: sayfayı yeniden yüklemeden formu gönderir.
• Özel mesajdan yükle: özel bir metin yüklemenizi sağlar.
• Düğümden yükle: form gönderildikten sonra bir düğüm yükleyin.

Bu modül aşağıdaki durumlarda size yardımcı olabilir:

• onay mesajını özelleştirmeniz gerekiyor
• sayfayı yeniden yüklemeden bir iletişim formu göndermeniz gerekir.
• form gönderildikten sonra özel bir metin veya başka bir düğüm yüklemek istiyorsunuz.