How to render a view in modal window using ajax in ZF2?

open partial view in popup mvc on button click
how to load partial view in bootstrap modal popup
how-to-load-partial-view-in-modal-popup-mvc
modal popup using ajax in mvc
add edit record using partial view jquery and bootstrap popup(modal) in asp.net mvc
open view in modal popup mvc
crud operation mvc using partial view , jquery modal popup
open partial view in jquery modal popup

I try to render an action with a dedicated view in a modal window with an ajax call in Zend Framework 2.

This is my controller action :

public function myAction()
{
    $htmlViewPart = new ViewModel();
    $htmlViewPart->setTemplate('path/to/my/view')
                 ->setTerminal(true)
                 ->setVariables(['arrayVar' => ['a', 'b', 'c']]);

    return $htmlViewPart;
}

The view :

<?php
    foreach($arrayVar as $k => $v)
    {
        echo $k . ':' . $v . '<br>';
    }

The js :

$(".my-modal-link").click(function() {
    $('#myModal .modal-body').load($(this).data('/url/to/my/action'));
});

This not do the trick. I also tried with a JSON model too:

public function myAction()
{
    $htmlViewPart = new ViewModel();
    $htmlViewPart->setTemplate('path/to/my/view')
                 ->setTerminal(true)
                 ->setVariables(['arrayVar' => ['a', 'b', 'c']]);

    $htmlOutput = $this->getServiceLocator()->get('viewrenderer')->render($htmlViewPart);

    $jsonModel = new JsonModel();
    $jsonModel->setVariables(['html' => $htmlOutput]);

    return $jsonModel;
}

But the final render in the modal is something like :

{"html":"0:a\u003Cbr\u003E1:b\u003Cbr\u003E2:c\u003Cbr\u003E"}

Have an idea to how achieve that?

All you need is disabling the layout using setTerminal() and returning proper model from your controller to render HTML output in your modal.

In your case, you have to return a ViewModel instance. So, your first approach is correct. This should work:

$htmlViewPart = new ViewModel();
$htmlViewPart->setTemplate('path/to/my/view')
             ->setTerminal(true)
             ->setVariables(['arrayVar' => ['a', 'b', 'c']]);

return $htmlViewPart;

The second case is; you're trying to use a HTML output as json data. Try to change your ajax loading mechanism similar to this:

$(".my-modal-link").click(function() {
    $.get("/url/to/my/action", function(data) {
        $('#myModal .modal-body').html(data);
    });
});

This will be append the rendered output (which doesnt have a layout) into modal's body. You may also want to read this for JsonModel scenario.

Hope it helps.

jQuery() View Helper - Manual - Documentation, Zend Framework provides jQuery related View Helpers through its Extras Library. $content, $params, $attribs): Create a Dialog Box that is rendered with the� Here Mudassar Ahmed Khan has explained with an example, how to render Partial View inside jQuery Dialog Modal Popup on Top of Parent View in ASP.Net MVC. The Partial View will be populated and fetched using jQuery AJAX and finally it will be rendered as HTML inside jQuery Modal Dialog Modal Popup window. TAGs: ASP.Net, jQuery, jQuery Plugins, Entity Framework, MVC, Partial View

I found a solution.

Just create an empty layout returning content.

// Application/view/layout/ajax.phtml
<?php

echo $this->content;

And set this template in the action view

<?php

$this->layout()->setTemplate('layout/ajax');

It works now with Jquery $.load() / ViewModel strategy

Zend Framework 2 : Using Zend\Form and Ajax, In this post, i will show you how to use Zend\Form with ajax. is in modal dialog or not. // in view. 'is_xmlhttprequest' => $is_xmlhttprequest. ));. In this article I am going to show how we can render a partial view in a modal popup with AJAX call. Here in Partial View I will show the record from my database table using web grid. Open Visual Studio, New, then click Project, Below is my Data Table. Data in my Data Table.

Have the same problem this works...

$.get("<?php echo $this->url('your url'); ?>", function(data) 
{
    console.log(data);
    $('#myModal .modal-body').html(data);
});

Render Partial View As Modal Popup Using AJAX Call with JSON, In this article I am going to show how we can render a partial view in a modal popup with AJAX call. In this article I am going to show how we can render a partial view in a modal popup with AJAX call. Here in Partial View I will show record from my data base table using web grid. Open Visual Studio-> New -> Project. Image 1. Image 2. Below is my Data Table. Image 3. Data in my Data Table. Image 4.

Creating an exit survey using jQuery and Zend Framework, Read Creating an exit survey using jQuery and Zend Framework on The jQuery Dialog widget needs UI Core, UI Draggable, and UI Resizeable. still render the abandon.phtml view script because it's not an AJAX request. Next let's create a view and call it “NewAccount.cshtml” and place it in Views -> Setup, this is the view that we will be using on the pop-up window. @model CI5.Web.Mvc.Controllers.ViewModels.Setup.AccountSetupViewModel @using Telerik.Web.Mvc.UI; @{ Layout = null ; } This is an MVC view in a pop up <br /> Account Code : @Model.AccountCode

Components - WasabiLib, To set up a modal window, regardless of the chosen type, in and a view renderer to render the used template. So using this method works except if I need the user to be able to open the modal a 2nd time on the page after posting. The 2nd time the user clicks the button that launches the modal it goes dark but doesn’t open a window because the modal’s content has been replaced by the “closeModal” content.

Correct way to render a form in a modal or bootbox in Yii, Put what you want into hidden div, in this case I put my form into other view for convenience. How to load content via AJAX in a Twitter Bootstrap modal window? I'm working within Zend Framework 2 and following this tutorial to display and� I am developing MVC4 application with Searching, Paging and Sorting facilities using Ajax & Partial View. I had views for CRUD operations opening separately when ActionLink clicks. Everything working fine. Now I want to open them as modal pop up. Whenever user clicks on ActionLink, modal pop up will appear with respective view.

Comments
  • Ty for your response foozy. I want to use the first case, with an instance of ViewModel. This is the most logic approach. The call is working but all the layout is loaded in the modal window ...
  • Interesting. What happens when you call /url/to/my/action from your browser?
  • The layout is displayed. And if I comment setTerminal(true), the view and its content are displayed too