Managing AJAX call with Zend Framework - php

Question

I am trying to integrate an AJAX search function but I am having trouble getting the Zend Framework portion right. I have the following Controller and Action.
class IndexController extends Zend_Controller_Action
{
public function indexSearchAction()
{
$this->_helper->layout()->disableLayout();
$this->_helper->viewRenderer->setNoRender(true);
if ($this->getRequest()->isXmlHttpRequest()) {
if ($this->getRequest()->isPost()) {
$search = new Model_Index();
$this->_helper->json($search->indexSearch());
$this->view->indexSearch = $result;
}
} else {
//regular controller logic goes here
echo "regular controller";
}
}
Copy of my Ajax call is as follows:
$.ajax({
type: "POST",
url: "/index/index-search/format/json",
data: dataString,
dataType: "json",
cache: false,
success: function(html)
{
I just want the model to return a simple message to ensure that it is working up to this point. with that said, here is a copy of my function in the model:
public function indexSearch()
{
$testMessage = "this was returned via ajax";
return $testMessage;
}
Code that triggers the Ajax call:
$(document).ready(function(){
$(".search").keyup(function()
{
var searchbox = $(this).val();
var dataString = 'searchword='+ searchbox;
if(searchbox=='')
{
}
else
{
$.ajax({
type: "POST",
url: "/index/index-search/format/json",
data: dataString,
dataType: "json",
cache: false,
success: function(html)
{
$("#display").html(html).show();
}
});
}
return false;
});
});
I dont know what I am missing, this is my first attempt to getting AJAX calls to work in ZF2 and its not working out.
Any help would be greatly appreciated! cheers!

Answer 1

The issue was that I was returning html when I was expecting json... I've since changed this:
here is the controller action:
public function indexSearchAction()
{
$this->_helper->layout('homelayout')->disableLayout();
if ($this->getRequest()->isXmlHttpRequest()) {
if ($this->getRequest()->isPost()) {
$q=$_POST['searchword'];
$indexSearch = new Model_Index();
$result = $indexSearch ->indexSearch ($q);
$this->view->indexSearch = $result;
}
} else {
//regular controller logic goes here
}
}
jQuery Ajax handling code:
$(document).ready(function(){
$(".search").keyup(function() {
var searchbox = $(this).val();
var dataString = 'searchword='+ searchbox;
if(searchbox==''){
$("#display").hide();
} else
{
$.ajax({
type: "POST",
url: "/user/user-search/",
data: dataString,
cache: false,
success: function(html)
{ $("#display").html(html).show(); }
});
}return false;
});
});
jQuery(function($){
$("#searchbox").Watermark("Search");
});
Model_index function indexSearch() script:
public function indexSearch($q)
{
$select = $this->select()
->from($this)
->where('username LIKE ?', '%' . $q . '%');
$row = $this->fetchAll($select);
return $row;
}
Here is the input box element for users to search with:
<input type="text" class="rounded search" id="searchbox" /><br />
<div id="display">
</div>
view script (index-search.phtml) which displays the contents in the div:
<div class="display_box" align="left">
<ul class="index-list">
<?php echo $this->partialLoop('user/search-dropdown.phtml', $this->indexSearch);?>
</ul>
and last but not least, the view script that is mentioned in the partial loop above that iterates through the returns contents of the database and into a format that can be displayed within the dropdown. below is search-dropdown.phtml:
<li class="user-list-item" >
<div class="search-list-item-container" >
<?php
$validator = new Zend_Validate_File_Exists();
$validator->addDirectory('users/');
if ($validator->isValid('/' . $this->username . '/' . $this->username . '.jpg')) { ?>
<div class="search-list-item-picture">
<img class='search-pic' src="..\users\<?=$this->username ?>\<?=$this->username ?>.jpg?t=<?=time(); ?>">
</div>
<?php } else { ?>
<div class="search-list-item-picture">
<img class='search-pic' src="..\skins\blues\images\f1.png">
</div>
<?php }?>
<div class="search-list-item-name">
<?php echo $this->username; ?>
</div>
</div>
The end result is as follows:
thanks to everyone who assisted here! MUCH APPRECIATED

Answer 2

Most likely it is because of this line
$this->_helper->viewRenderer->setNoRender(true);
Followed by your attempt to use a view with this line
$this->view->indexSearch = $result;
If you're going to turn your views off, then you'll need to echo out your content. So something like echo $result;
On top of that, your ajax function is expecting JSON data to be returned, but you're actually returning plain text/html. If you know that you're ultimately going to be returning/echoing json, then during your testing, you can simply comment out the line dataType: "json", until you are done with your initial testing, and then add it back. If you are not going to be using json at all, simply remove that line.
See this simple JSFiddle example