Magento 2: Open Popup Modal on Button Click in Admin Grid

Question

UPDATED

I'm using Magento 2.4, I want to open a popup modal to display some info, currently, when I hit the button I am redirected to phtml file but I want to open a popup on the same page. I have a column in sale_order_grid, and in that column, I have a button like:

enter image description here

app/code/Tekglide/GoFlyy/etc/adminhtml/routes.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
 <router id="admin">
 <route id="goflyy" frontName="goflyy">
 <module name="Tekglide_GoFlyy"/>
 </route>
 </router>
</config>

app/code/Tekglide/GoFlyy/view/adminhtml/ui_component/sales_order_grid.xml

<?xml version="1.0" encoding="UTF-8"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
 <columns name="sales_order_columns">
 <actionsColumn name="goflyy_order_id" class="Tekglide\GoFlyy\Ui\Component\Listing\Column\GoFlyyGetOrder">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="bodyTmpl" xsi:type="string">ui/grid/cells/html</item>
 <item name="filter" xsi:type="string">text</item> 
 <item name="label" xsi:type="string" translate="true">GoFlyy Order ID</item>
 <item name="sortable" xsi:type="boolean">true</item>
 </item>
 </argument>
 </actionsColumn>
 </columns>
</listing>

app/code/Tekglide/GoFlyy/Ui/Component/Listing/Column/GoFlyyGetOrder.php

<?php
namespace Tekglide\GoFlyy\Ui\Component\Listing\Column;
use Magento\Framework\UrlInterface;
use Magento\Framework\View\Element\UiComponent\ContextInterface;
use Magento\Framework\View\Element\UiComponentFactory;
use Magento\Ui\Component\Listing\Columns\Column;
class GoFlyyGetOrder extends Column
{
 public $urlBuilder;
 public $layout;
 protected $orderRepository;
 public function __construct(
 ContextInterface $context,
 UiComponentFactory $uiComponentFactory,
 UrlInterface $urlBuilder,
 \Magento\Framework\View\LayoutInterface $layout,
 \Magento\Sales\Api\OrderRepositoryInterface $orderRepository,
 array $components = [],
 array $data = []
 ) {
 $this->urlBuilder = $urlBuilder;
 $this->layout = $layout;
 $this->orderRepository = $orderRepository;
 parent::__construct($context, $uiComponentFactory, $components, $data);
 }
 public function prepareDataSource(array $dataSource)
 {
 $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
 $urlInterface = $objectManager->get('Magento\Framework\UrlInterface');
 
 if (isset($dataSource['data']['items'])) {
 $fieldName = $this->getData('name');
 foreach ($dataSource['data']['items'] as & $item) {
 $order = $this->orderRepository->get($item["entity_id"]);
 $goFlyyOrderId = $order->getData("goflyy_order_id"); 
 if($goFlyyOrderId){
 $item[$fieldName] = '<a href="'.$urlInterface->getUrl('flyy/index/index').'"><button class="button" id="FlyyOrderId_'.$goFlyyOrderId.'">'.$goFlyyOrderId.'</button>';
 // $item[$fieldName] = '<a href="'.$urlInterface->getUrl('flyy/index/index',['_current' => true,'_use_rewrite' => true, '_query' => $queryParams]).'"><button class="button" id="FlyyOrderId_'.$goFlyyOrderId.'">'.$goFlyyOrderId.'</button>';
 }
 }
 }
 return $dataSource;
 }
}

app/code/Tekglide/GoFlyy/Controller/Adminhtml/Index/Index.php

<?php
/**
 * Copyright © All rights reserved.
 * See COPYING.txt for license details.
 */
declare(strict_types=1);
namespace Tekglide\GoFlyy\Controller\Adminhtml\Index;
use Magento\Framework\App\Action\HttpGetActionInterface;
use Magento\Framework\Controller\ResultInterface;
use Magento\Framework\View\Result\PageFactory;
class Index implements HttpGetActionInterface
{
 /**
 * @var PageFactory
 */
 protected $resultPageFactory;
 /**
 * Constructor
 *
 * @param PageFactory $resultPageFactory
 */
 public function __construct(PageFactory $resultPageFactory)
 {
 $this->resultPageFactory = $resultPageFactory;
 }
 /**
 * Execute view action
 *
 * @return ResultInterface
 */
 public function execute()
 {
 return $this->resultPageFactory->create();
 }
}
?>

app/code/Tekglide/GoFlyy/Block/Adminhtml/Index/Index.php

<?php
/**
 * Copyright © All rights reserved.
 * See COPYING.txt for license details.
 */
declare(strict_types=1);
namespace Tekglide\GoFlyy\Block\Adminhtml\Index;
class Index extends \Magento\Backend\Block\Template
{
 protected $request;
 public function __construct(
 \Magento\Backend\Block\Template\Context $context,
 \Magento\Framework\App\Request\Http $request,
 array $data = []
 ) {
 $this->request = $request;
 parent::__construct($context,$data);
 }
 public function getFlyyOrderId(){
 // $FlyyOrderId = $this->request->getParam('id', false);
 $FlyyOrderId = '331';
 return $FlyyOrderId;
 }
}
?>

app/code/Tekglide/GoFlyy/view/adminhtml/layout/goflyy_index_index.xml

<?xml version="1.0" ?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
 <body>
 <referenceContainer name="content">
 <block name="index.index" class="Tekglide\GoFlyy\Block\Adminhtml\Index\Index" template="Tekglide_GoFlyy::index/index.phtml"/>
 </referenceContainer>
 </body>
</page>

app/code/Tekglide/GoFlyy/view/adminhtml/templates/index/index.phtml

<div id="popup-modal-main<?php echo $block->getFlyyOrderId();?>" style="display:none;">
 Fly Order Id <?php echo $block->getFlyyOrderId();?>
</div>
<script type="text/javascript">
require([
 'jquery', 
 'Magento_Ui/js/modal/modal'
 ], function(,ドル modal) { 
 $(document).ready(function(){ 
 var options = {
 type: 'popup',
 responsive: true,
 innerScroll: true,
 title: 'Open Modal'
 }; 
 $("#FlyyOrderId_<?php echo $block->getFlyyOrderId();?>").on('click',function(){ 
 $("#popup-modal-main<?php echo $block->getFlyyOrderId();?>").modal(options).modal('openModal');
 });
 });
 }); 
</script>

ERROR: When I hit the button I redirected to Dashboard with a message, Invalid security or form key. Please refresh the page..

What I want to do is I want to trigger an Ajax request on this button click, whatever response I get. I'll display it in a popup modal.

Answer 1

Add component in column in grid layout file and add js and class file path

<column name="goflyy_order_id" class="Vendor\Module\Ui\Component\Listing\Column\Goflyy">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="component" xsi:type="string">Vendor_Module/js/grid/columns/goflyy</item>
<item name="indexField" xsi:type="string">entity_id</item>
<item name="sortable" xsi:type="boolean">false</item>
<item name="sortOrder" xsi:type="number">120</item>
<item name="label" xsi:type="string" translate="true">Goflyy Order Id</item>
</item>
</argument>
</column>

Add data in grid row using UI

<?php 
namespace Vendor\Module\Ui\Component\Listing\Column;
use Magento\Framework\View\Element\UiComponent\ContextInterface;
use Magento\Framework\View\Element\UiComponentFactory;
use Magento\Ui\Component\Listing\Columns\Column;
use Magento\Framework\UrlInterface;
use Magento\Framework\Data\Form\FormKey;
class Goflyy extends Column
{
 private $urlBuilder;
 private $formKey;
 public function __construct(
 ContextInterface $context,
 UiComponentFactory $uiComponentFactory,
 UrlInterface $urlBuilder,
 FormKey $formKey,
 array $components = [],
 array $data = []
 ) {
 $this->urlBuilder = $urlBuilder;
 $this->formKey = $formKey;
 parent::__construct($context, $uiComponentFactory, $components, $data);
 }
 public function prepareDataSource(array $dataSource)
 {
 if (isset($dataSource['data']['items'])) {
 foreach ($dataSource['data']['items'] as & $item) {
 $name = $this->getData('name');
 if (isset($item['entity_id'])) {
 $item[$name . '_html'] = "<button class='button'><span>".__("Send Email")."</span></button>";
 $item[$name . '_title'] = __('Send Email');
 $item[$name . '_entity_id'] = $item['entity_id'];
 $item[$name . '_code'] = $item['code'];
 $item[$name . '_link_one'] = $item['link_one'];
 $item[$name . '_link_two'] = $item['link_two'];
 $item[$name . '_formkry'] = $this->formKey->getFormKey();
 $item[$name . '_formaction'] = $this->urlBuilder->getUrl('route/action/controller');
 }
 }
 }
 return $dataSource;
 }
}

Create app/code/Vendor/Module/view/base/web/js/grid/columns/goflyy.js

define([‘Magento_Ui / js / grid / columns / column’, ‘jquery’, ‘mage / template’, ‘mage / validation’, ‘text!IntegerByte_Popup / templates / grid / cells / sendemail / sendemail.html’, ‘Magento_Ui / js / modal / modal’], function(Column, ,ドル mageTemplate, validation, sendmailPreviewTemplate) {
 ‘
 use strict’;
 return Column.extend({
 defaults: {
 bodyTmpl: ‘ui / grid / cells / html’,
 fieldClass: {
 ‘
 data - grid - html - cell’: true
 }
 },
 gethtml: function(row) {
 return row[this.index + ‘_html’];
 },
 getFormaction: function(row) {
 return row[this.index + ‘_formaction’];
 },
 getFormkey: function(row) {
 return row[this.index + ‘_formkry’];
 },
 getEntityid: function(row) {
 return row[this.index + ‘_entity_id’];
 },
 getLabel: function(row) {
 return row[this.index + ‘_html’]
 },
 getTitle: function(row) {
 return row[this.index + ‘_title’]
 },
 getCode: function(row) {
 return row[this.index + ‘_code’]
 },
 getLinkOne: function(row) {
 return row[this.index + ‘_link_one’]
 },
 getLinkTwo: function(row) {
 return row[this.index + ‘_link_one’]
 },
 preview: function(row) {
 var modalHtml = mageTemplate(
 sendmailPreviewTemplate, {
 html: this.gethtml(row),
 title: this.getTitle(row),
 label: this.getLabel(row),
 formaction: this.getFormaction(row),
 formakey: this.getFormkey(row),
 code: this.getCode(row),
 linkTwo: this.getLinkTwo(row),
 linkOne: this.getLinkOne(row),
 entityid: this.getEntityid(row),
 name: $.mage.__(‘Name’),
 email: $.mage.__(‘Email’),
 message: $.mage.__(‘Comment’),
 selectlink: $.mage.__(‘Please select’),
 demo1option: $.mage.__(‘demo1’),
 demo2option: $.mage.__(‘demo2’)
 }
 );
 var previewPopup = $(‘ < div / > ’).html(modalHtml);
 previewPopup.modal({
 title: $.mage.__(this.getTitle(row)),
 innerScroll: true,
 modalClass: ‘_email - box’,
 buttons: [{
 type: ’submit’,
 text: $.mage.__(‘Send Now’),
 class: ‘action close - popup wide’,
 click: function() {
 $("form").validation().submit();
 }
 }]
 }).trigger(‘openModal’);
 },
 getFieldHandler: function(row) {
 return this.preview.bind(this, row);
 }
 });
});

Create app/code/Vendor/Magento/view/base/web/templates/grid/cells/goflyy.html

<form id="send-mail-form-<%- entityid %>" method="post" enctype="multipart/form-data" action="<%- formaction %>"
data-hasrequired="* Required Fields" data-mage-init='{"validation":{}}’>
<div class="modal-body">
<div class="bootbox-body">
 <div class="admin__field field required">
 <label for="name-<%- entityid %>" class="admin__field-label label"><span><%- name %></span></label>
 <div class="admin__field-control control">
 <input type="email" name="email" id="email_address-<%- entityid %>" value="" title="Email"
 class="admin__control-text required" data-validate="{required:true, ‘validate-email’:true}"
 required>
 </div>
 </div>
</div>
</form>

Answer 2

1) Update GoFlyyGetOrder.php Add id in Button and a tag
Vendor/Module/Ui/Component/Listing/Column/GoFlyyGetOrder.php

public function prepareDataSource(array $dataSource)
 {
 if (isset($dataSource['data']['items'])) {
 $fieldName = $this->getData('name');
 foreach ($dataSource['data']['items'] as & $item) {
 $order = $this->orderRepository->get($item["entity_id"]);
 $goFlyyOrderId = $order->getData("goflyy_order_id");
 if($goFlyyOrderId){
 $item[$fieldName] = "<a href='baseurl/Vendor_Module/index/index?id='.$goFlyyOrderId><button class='button' id='FlyyOrderId_$goFlyyOrderId$'><span>$goFlyyOrderId</span></button>";
 }
 }
 }
 return $dataSource;
 }

After Call Phtml in Sales Order Grid

1) Create a File and add the code given below
File : Vendor/Module/Controller/Adminhtml/Index/Index.php

<?php
/**
 * Copyright © All rights reserved.
 * See COPYING.txt for license details.
 */
declare(strict_types=1);
namespace Vendor\Module\Controller\Adminhtml\Index;
use Magento\Framework\App\Action\HttpGetActionInterface;
use Magento\Framework\Controller\ResultInterface;
use Magento\Framework\View\Result\PageFactory;
class Index implements HttpGetActionInterface
{
 /**
 * @var PageFactory
 */
 protected $resultPageFactory;
 /**
 * Constructor
 *
 * @param PageFactory $resultPageFactory
 */
 public function __construct(PageFactory $resultPageFactory)
 {
 $this->resultPageFactory = $resultPageFactory;
 }
 /**
 * Execute view action
 *
 * @return ResultInterface
 */
 public function execute()
 {
 return $this->resultPageFactory->create();
 }
}
?>

2) Create a block class and add a code
File : Vendor/Module/Block/Adminhtml/Index/Index.php

<?php
/**
 * Copyright © All rights reserved.
 * See COPYING.txt for license details.
 */
declare(strict_types=1);
namespace Vendor\Module\Block\Adminhtml\Index;
class Index extends \Magento\Backend\Block\Template
{
 /**
 * Constructor
 *
 * @param \Magento\Backend\Block\Template\Context $context
 * @param array $data
 */
 public function __construct(
 \Magento\Backend\Block\Template\Context $context,
 \Magento\Framework\App\Request\Http $request
 array $data = []
 ) {
 parent::__construct(
 $this->request = $request;
 $context,$data
 );
 }
 public function getFlyyOrderId(){
 $FlyyOrderId = $this->request->getParam('id', false);
 return $FlyyOrderId;
 }
}
?>

3) Create a vendor_module_index_index.xml
File : Vendor/Module/view/adminhtml/layout/vendor_module_index_index.xml

<?xml version="1.0" ?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
 <body>
 <referenceContainer name="content">
 <block name="index.index" class="Vendor\Module\Block\Adminhtml\Index\Index" template="Vendor_Module::index/index.phtml"/>
 </referenceContainer>
 </body>
</page>

4) Create a template file flyorder.phtml in path
File : Vendor\Module\Block\Adminhtml\Index\Index" template="Vendor_Module::index/index.phtml"

<div id="popup-modal-main<?php echo $block->getFlyyOrderId();?>" style="display:none;">
 Fly Order Id <?php echo $block->getFlyyOrderId();?>
</div>
<script type="text/javascript">
require([
 'jquery', 
 'Magento_Ui/js/modal/modal'
 ], function(,ドル modal) { 
 $(document).ready(function(){ 
 var options = {
 type: 'popup',
 responsive: true,
 innerScroll: true,
 title: 'Open Modal'
 }; 
 $("#FlyyOrderId_<?php echo $block->getFlyyOrderId();?>").on('click',function(){ 
 $("#popup-modal-main<?php echo $block->getFlyyOrderId();?>").modal(options).modal('openModal');
 });
 });
 }); 
</script>

• Partab Saifuddin Zakir: Naeem question updated.