Managing AJAX call with Zend Framework

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!

Answers


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


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


Need Your Help

Sort a foreach loop numerically

php sorting foreach opencart

Within opencart, i am developing the admin panel.

Basic HTTP and Bearer Token Authentication

rest curl basic-authentication access-token restful-authentication

I am currently developing a REST-API which is HTTP-Basic protected for the development environment. As the real authentication is done via a token, I'm still trying to figure out, how to send two