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?
    – 4uk4
    Commented Jun 14, 2017 at 7:25
  • @4k4 In this case, I get all the page(including header and footer) and the form is still not Ajaxified Commented Jun 14, 2017 at 8:02

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.