it-swarm.com.de

Formular über Ajax laden und per Ajax senden funktioniert nicht

Ich habe ein Formular über Ajax geladen und von Ajax gesendet funktioniert nicht. Aber wenn ich das Formular direkt per URL lade, funktioniert die Ajax-Übermittlung. Das von Ajax geladene Formular verwendet jQuery.

$('#button').on('click', function () {
        $.ajax({
            url: "user_group/edit_ajax/", 
            success: function (result) {
                $(".RblockMain").html(result);
            }
        });
});

mymodule.routing.yml

mymodule.user_group_edit_ajax:
  path: 'user_group/edit_ajax/'
  defaults:
    _controller: '\Drupal\mymodule\Controller\UserController::user_group_edit_ajax'
  requirements:
    _permission: 'access content'

UserController

public function user_group_edit_ajax() {
        $form = \Drupal::formBuilder()->getForm('Drupal\mymodule\Form\UsergroupForm');

        $body_data = array(
            '#theme' => 'usergroup_edit_ajax',
            '#usergroup_form' => $form,
        );

        $message = \Drupal::service('renderer')->render($body_data);
        $response = new AjaxResponse($message);
        return $response;
    }

UsergroupForm.php

class UsergroupForm extends FormBase {

   public function buildForm(array $form, FormStateInterface $form_state) {

    $form['user_group_name'] = array(
          '#type' => 'textfield',
          '#title' => '',
          '#required' => TRUE,
          '#attributes' => array('placeholder' => t('Group Name'),),
          '#theme_wrappers' => array(),
        );

    $form['go'] = [
      '#type' => 'button',
      '#value' => $this->t('Submit'),
      '#attributes' => array('class' => array('btn btn-primary'),),
      '#ajax' => [
        'callback' => array($this, 'submitForm'),
        'event' => 'click',
        'progress' => ['type' => 'throbber', 'message' => NULL],
      ],
    ];
    }

public function submitForm(array &$form, FormStateInterface $form_state) {
 $title = $form_state->getValue('user_group_name');
$data = array(
        'type' => 'admin_user_group',
        'title' => $title,
        'uid' => 1,
        'status' => TRUE,
      );
      $usergroup = \Drupal::entityManager()->getStorage('node')->create($data);
$usergroup->save();
$response = new AjaxResponse();
    $response->addCommand(new AlertCommand('Submitted successfully'));

    return $response;
}
    }
3
Haris

Ich hatte genau das gleiche Problem:

Wenn sich das Formular auf einer eigenen Seite befand, funktioniert Ajax Submit.

Wenn das Formular über Ajax geladen wurde, funktionierte Ajax Submit nicht. Submit leitete das Formular auf eine eigene Seite um.

Nachdem ich zweimal erfolglos von Grund auf neu gestartet hatte, habe ich versucht, dieses modale Ajax-Beispiel zu implementieren: https://www.mediacurrent.com/blog/loading-and-rendering-modal-forms-drupal-8/

Erfolg eins.

Entfernen Sie dann den openModalCommand, um das Formular einfach auf der Seite anzuzeigen.

Erfolg zwei.

Ich verglich sowohl meine erfolglosen als auch die erfolgreichen Versuche. Es gab einen Unterschied, im Erfolg einen, in der Steuerung wurde das Formular erstellt, aber nicht gerendert.

// Controller to load the form through ajax
public function ajaxSupportTicket() {
    $form = \Drupal::formBuilder()->getForm('Drupal\itportal_support\Form\SupportTicketForm');
    $ajax_response = new \Drupal\Core\Ajax\AjaxResponse();

    // Append the form in the page.
    // The form is sent as is, not rendered
    $ajax_response->addCommand(new \Drupal\Core\Ajax\AppendCommand('#selector', $form));


    return $ajax_response;
}

Jetzt, da dies funktioniert, scheint die gesamte Ajax-API von D8 sehr mächtig zu sein.

Versuchen Sie auch, Ihr benutzerdefiniertes Javascript zu entfernen, um das Formular zu laden. Dies kann mit einem Render-Array erfolgen. Platzieren Sie einen Link mit der Klasse use-ajax.

$output['open_form'] = [
  '#type' => 'link',
  '#title' => $this->t('Open Form'),
  '#url' => Url::fromRoute('mymodule.ajax_form_controller'),
  '#attributes' => [
    'class' => [
      'button',
      'use-ajax',
    ],
  ],
];

// Attach the library for pop-up dialogs/modals.
// drupal.dialog.ajax might be overkill, but I didn't took time to improve
// comments about it are welcome
$output['#attached']['library'][] = 'core/drupal.dialog.ajax';

Hoffentlich kann es helfen.

3
SwingingTom