Laminas + modal + ajax best practices!

Questions Components & MVC
1

Hi,

could someone please provide a tutorial or sample code for modal handling in laminas and data transfer via ajax?

Best regards
KK

2

Hi,
if I need to make ajax calls in module, I do this in separated controller. I create XmlHttpController and actions for handling requests. See Bootstrap doc for modal handling for example.

XmlHttpController.php

<?php
namespace Order\Controller;

use Laminas\Mvc\Controller\AbstractActionController;
use Laminas\View\Model\JsonModel;
use Laminas\Log\Logger;
use Order\Model\OrderTable;
use Unit\Model\UnitRoomTable;

class XmlHttpController extends AbstractActionController
{

public $modelOrder;

public $modelUnitRoom;

public function __construct(OrderTable $modelOrder, UnitRoomTable $modelUnitRoom)
{
    $this->modelOrder = $modelOrder;
    $this->modelUnitRoom = $modelUnitRoom;
}

public function unitRoomAction()
{
    $request = $this->getRequest();
    if ($request->isXmlHttpRequest()) {
        try {
            $unitId = (int) $this->params()->fromRoute('id');
             $result = $this->modelUnitRoom->selectUnitPairsForJson($unitId);

            $json = new JsonModel();
            $json->setVariable('room', $result);
            return $json;
        } catch (\Throwable $e) {
            $response = $this->getResponse();
            $response->setContent($e->getMessage());
            $response->setStatusCode(\Laminas\Http\Response::STATUS_CODE_500);

            $this->getEventManager()->trigger('log', $this,
                array(
                    'priority' => Logger::ERR,
                    'message' => __METHOD__ . '->' . $e->getMessage()
                ));

            return $response;
        }
    }
    return $this->getResponse();
}

public function columnAction()
{
    $request = $this->getRequest();
    if ($request->isXmlHttpRequest()) {
        try {
            $post = $request->getPost();

            $entity = new \Order\Entity\Order();
            $entity->id = (int) $post->pk;
            $entity->{$post->name} = $post->value;
            $result = $this->modelOrder->save($entity);

            $json = new JsonModel();
            $json->setVariable('result', $result);
            return $json;
        } catch (\Throwable $e) {
            $response = $this->getResponse();
            $response->setContent($e->getMessage());
            $response->setStatusCode(\Laminas\Http\Response::STATUS_CODE_500);

            $this->getEventManager()->trigger('log', $this,
                array(
                    'priority' => Logger::ERR,
                    'message' => __METHOD__ . '->' . $e->getMessage()
                ));

            return $response;
        }
    }
    return $this->getResponse();
}

}

And in some .phtml file

$this->inlineScript()->captureStart(); ?>

$(document).ready(function() {
  $('.select2-unit').select2({
    placeholder: 'Select unit',
  });

  $('.select2-unit').on('select2:select', function (e) {
    var data = e.params.data;
    // console.log(data.id);
    $('.select2-room').empty();
    $.ajax({
        url: '<?php echo $this->url('orderxmlhttp', array('action' => 'unit-room')) ?>/' + data.id,
        dataType: 'json',
        delay: 250
    }).done(function(response) {
        $('#dots').css('display','none');
        $('.select2-room').select2({
            placeholder: "Select rooms",
            multiple: true,
            allowClear: true,
            data: response.room
        });
    }).fail(function (xhr, status, error) {
        $.growl.error({ title: "Chyba", message: xhr.responseText });
    });
  });
});

<?php $this->inlineScript()->captureEnd(); ?>