0

I'm trying to load an Ajax form using the Magnific Popup Ajax type and as expected the returned Form is not Ajaxified as I need to attach behaviors to it.

However, following other related issues didn't help me. A very similar issue was described on Drupal.attachBehaviours() on Block that got rendered via ajax call but still, I can't make it work.

Here is what I have.

The controller returning the Form (through a theme):

class MemberPhotoEditController extends ControllerBase {

  public function content($photo_id) {
    if (!empty($photo_id)) {
      $node = Node::load($photo_id);      

      $build = [
        '#theme' => 'member_edit_photo',
        '#photo_id' => $photo_id,
        '#node' => $node,
      ];

      /** @var \Drupal\Core\Render\Renderer $renderer */
      $renderer = \Drupal::service('renderer');
      $rendered = $renderer->renderRoot($build);

      $response = new Response();
      $response->setContent($rendered);
      return $response;
    }
  }    
}

In the theme preprocess the Form is loaded:

function template_preprocess_member_edit_photo(&$variables) {
  /** @var \Drupal\node\NodeInterface $node */
  $node = $variables['node'];
  $variables['member_photo_edit_form'] = \Drupal::formBuilder()->getForm('Drupal\mymodule_member_photos\Form\MemberPhotoEditForm', $node);
}

And here is how I'm triggering the load:

(function ($, Drupal) {

  'use strict';

  Drupal.behaviors.MemberPhotosGallery = {
    attach: function (context, settings) {

      $(window).on('hashchange', function () {

        var url = window.location.hash.substring(1);
        if (url == '/' || url == '') {
          $.magnificPopup.close();
        } else if (url.substring(0, 6) == "/photo") {
          $.magnificPopup.open({
            items: {
              src: url
            },
            type: 'ajax',
            mainClass: 'mfp-zoom-out',
            showCloseBtn: true,
            closeOnBgClick: false,
            callbacks: {
              close: function () {
                window.location.hash = '/';
              },
              ajaxContentAdded: function () {
                var form = $('form#member-photo-edit')[0];

                Drupal.attachBehaviors(form, settings);

                //# Triggering this doesn't ajaxify the Form.
                // Drupal.behaviors.AJAX.attach(this, settings);

                var ajaxObject = Drupal.ajax({
                  url: "",
                  base: false,
                  element: false,
                  progress: false
                });

                // Simulate an AJAX response having arrived, and let the Ajax
                // system handle it.
                ajaxObject.success(form, "success");
              }
            }
          });
        }

      });
    }
  };

})(jQuery, Drupal);

After Drupal.attachBehaviors(form, settings); is running, comparing my form with a working Ajax form I see that all the classes are present in the form except the enctype="multipart/form-data" attribute. enter image description here

Does anyone have any idea what can I do here to Ajaxify my Form?

2
  • Did you try this without rendering, returning $build directly from the controller?
    – 4k4
    Jun 14 '17 at 7:25
  • @4k4 In this case, I get all the page(including header and footer) and the form is still not Ajaxified Jun 14 '17 at 8:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.