How can I use ajax in Zend Framework 2? - php

Question

I am trying a small ajax application whereby I only want to return a hello world string from my controller action.
it is returning the Hello world but along with this, it is also returning my template file..
I tried to disable it the templating using the following code in the action of my controlelr
$this->_helper->layout()->disableLayout();
$this->_helper->viewRenderer->setNoRender( true );
but this returns me this error
SCREAM: Error suppression ignored for
( ! ) Notice: Undefined property: Survey\Controller\SurveyController::$_helper in C:\wamp\www\zend\module\Survey\src\Survey\Controller\SurveyController.php on line 55
SCREAM: Error suppression ignored for
( ! ) Fatal error: Call to a member function layout() on a non-object in C:\wamp\www\zend\module\Survey\src\Survey\Controller\SurveyController.php on line 55
Call Stack
How do I fix this ?
EDIT
I modifed the controller such that it looks like this
public function registerAction()
{
$result = new JsonModel(array(
'some_parameter' => 'some value',
'success'=>true,
));
return( $result );
}
Added strategies in the module..module.config in module appl directory
'strategies' => array(
'ViewJsonStrategy',
),
Still, in the ajax response I get the template being returned

Answer 1

Here's a solid example:
http://akrabat.com/zend-framework-2/returning-json-from-a-zf2-controller-action/
You should be using JsonMoodels to send back a Json Response.

Answer 2

i use this in my controller:
$view = new ViewModel(array('form'=>$my_form));
//disable layout if request by ajax
$view->setTerminal($request->isXmlHttpRequest());
$view->setTemplate('path/to/phtml');
return $view;

Answer 3

The user wanted to know how to get just the html back, not json as Andrews reply offers.
I also wanted the html returned so i could use it with jquery qtip plugin and this is how i did it.
I also had to make the page degrade gracefully in case javascript failed, e.g. the page output should render properly in the layout template.
/**
* Tourist Summary action
*
* #return ViewModel
*/
public function touristSummaryAction()
{
// Get the Id
$id = $this->params()->fromRoute('id', '');
// Get the data from somewhere
$data = array() ;
// Get the html from the phtml
$view = new ViewModel(
array(
'id' => $id ,
'data' => $data ,
)
);
//disable layout if request by ajax
$view->setTerminal($this->getRequest()->isXmlHttpRequest());
return $view;
}

Answer 4

The most simple way to send ajax requests and handle responses is the zf2 module WasabiLib https://github.com/WasabiLib/wasabilib_zf2_skeleton_application
You only need to add "ajax_element" to the class-attribute to the element which you want to cause the ajax request. It does not matter if it is a form submit or a link or a button. Visit the examples page http://www.wasabilib.org/application/pages/examples
If your application does a lot of ajax I recommend this module.

Answer 5

Take a look at this module. www.wasabilib.org
Seems that you it manages ajax very well.
If you do not have a application you can use the Wasabilib Skeleton https://github.com/WasabiLib/wasabilib_zf2_skeleton_application. It comes with all necessary assets in the right place.
If you already have an application you should clone the module: https://github.com/WasabiLib/wasabilib
Minimal requirements: jQuery, ZF2
Add the module to application.config.php.
Include the wasabilib.min.js after jquery in the head of your layout.phtml
How it works
in your .phtml-file you have a form like this:
<form id="simpleForm" class="ajax_element" action="simpleFormExample" method="POST">
<input type="text" name="written_text">
<input type="submit" value="try it">
</form>
Anywhere else in your phtml you can place an element where the response is shown.
In your Controller the following method:
public function simpleFormExampleAction(){
$postArray = $this->getRequest()->getPost();
$input = $postArray['written_text'];
$response = new Response(new InnerHtml("#element_simple_form","Server Response: ".$input));
return $this->getResponse()->setContent($response);
}
The form has a class "ajax_element" this will say the the library that the request will be done with an xmlhttp-request. It wont work if you do not give an id to the requesting element. So the form has the ID "simpleForm". The action is the "path/to/controller" just like a normal request.
In the controller action a new WasabiLib\Ajax\Response object is instanciated.
The InnerHtml class is for replace, prepend and append html or normal text to a selector.
In this case the selector is an ID "element_simple_form". The first parameter of the InnerHtml class is the selector. Make sure that you write #yourElementId or .yourClassSelector. For IDs an "#" and for class selectors "."
The second parameter is the Text you want to fill in this element.
The response object can handle a lot more responses which you can add with
$response->add($anotherResponseType);
A list of possible response types is here: http://www.wasabilib.org/application/pages/components
The module is build to handle ajax request an responses in a very simple way. Once you have understood the behavior you can handle almost every practical ajax need.

Answer 6

This works for me:
public function ajaxAction(){
$data = array(
'var1' => 'var1Value',
'var2' => 'var2Value',
);
$response = $this->getResponse();
$response->setStatusCode(200);
$response->setContent(json_encode($data));
$headers = $response->getHeaders();
$headers->addHeaderLine('Content-Type', 'application/json');
return $response;
}
Output:
{"var1":"var1Value","var2":"var2Value"}