Zend Framework 2 & jquery modal dialog

How does one go about displaying a controller action inside of jquery modal dialog?

回答1:

Firstly you'll need your Javascript to load a url via ajax, this will depend on which kind of modal you are using etc, there's a ton of libraries out there. I will assume you are using the basic JQuery UI dialog Modal.

Example Link

<!-- this points to your action below.. -->
<a class="some-link" title="title here" href="mycontroller/test">testing</a>

Example Javascript (quick example found on google, many examples out there..)

$(document).ready(function() {
    $('.some-link').each(function() {
        var $link = $(this);
        var $dialog = $('<div></div>')
            .load($link.attr('href'))
            .dialog({
                autoOpen: false,
                title: $link.attr('title'),
            });
    });
});

Now you need to make sure your action doesn't render the main layout when providing the content for the modal via the ajax request.

Here's a really simple method of doing that by replacing the base layout with an empty view for ajax requests. This isn't the best method but it's the simplest for this case ;)

Example Action

public function testAction()
{
    if($this->getRequest()->isXmlHttpRequest()) {
        $this->layout('application/layout/ajax-layout');
    }

    return new ViewModel(array()); // ..
}

application/layout/ajax-layout.phtml