0

I am trying to trigger a modal from a twig. The path of the modal is a controller that returns an AJAX response as below:

Routing code

usgbc_myaccount.get_badges_evidence_controller:
path: '/account/get-badges-evidence/{badge_type}'
defaults:
_controller: 
'\Drupal\usgbc_myaccount\Controller\GetBadgesEvidenceController::getEvidence'
_title: ''
 requirements:
_permission: 'access content'
_format: 'html'

Controller code

namespace Drupal\usgbc_myaccount\Controller;



class GetBadgesEvidenceController extends ControllerBase 
{   
/**
* @return AjaxResponse
*/
public function getEvidence($badge_type) 
{   

    $options = [
      'width' => '50%',
    ];

    $response = new AjaxResponse();
    $response->addCommand(new OpenModalDialogCommand(t('Modal title'), 
 $badge_type , $options));

    return $response;
}
}

Call to router from twig template

<a class="use-ajax popup-dialog-class" data-type="modal" href="{{ 
path('usgbc_myaccount.get_badges_evidence_controller', {'badge_type': 
result.badge_type}) }}" data-dialog-type="modal">{{ 'Read more'|t }}</a>

When I click on the link I get the response in JSON in text area on another page. What is missing? It the approach correct? Any help will be appreciated.

Thanks

3

You're trying to trigger your modal in multiple ways. Right now your twig is saying to open the href in a modal, but your controller is not return html, it's returning a json/ajax response to open its content in a modal.

To fix this you should do one of the following:

  1. Update your twig to just point to the link, don't do anything there to trigger a modal. Your current ajax response from the controller is handling opening the content in a modal.
  2. Update your controller to return html and leave your twig as-is. In this scenario your twig is handling making the content open in a modal.

I'm not sure about the _format parameter in your route definition, but I think you can just omit it.

  • Tried but opens up a text area with JSON . – Prerit Mohan Mar 14 at 3:47

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.