Managing AJAX call with Zend Framework

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!

This has nothing to do with ZF2 - everything you have just posted is ZF1 — Sam
– Sam, Commented Apr 8, 2014 at 19:47
I am using ZF2... if this is the wrong approach, please tell me what the right one should be. — Frank Castle
– Frank Castle, Commented Apr 8, 2014 at 19:48
When I type into the search box I am expecting a div element to appear below it with the message "this was returned via ajax" within it. the browser console doesn't output anything either... — Frank Castle
– Frank Castle, Commented Apr 8, 2014 at 19:52
"the browser console doesn't output anything either" If you're seeing nothing at all, then your ajax most likely isn't even firing. You should show the code that triggers the ajax call. — Patrick Q
– Patrick Q, Commented Apr 8, 2014 at 20:10

Frank Castle · Accepted Answer · 2014-04-10 12:40:28Z

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:

enter image description here

thanks to everyone who assisted here! MUCH APPRECIATED

Patrick Q · Accepted Answer · 2014-04-08 20:33:12Z

0

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

edited Apr 8, 2014 at 20:33

answered Apr 8, 2014 at 19:53

Patrick Q

6,3942 gold badges28 silver badges34 bronze badges

2 Comments

Frank Castle Over a year ago

thanks again Patrick... commented out the JSON but still no result. nor do I get anything in the browser console :-(

Frank Castle Over a year ago

let me add to my last statement... when merging your code from jsFiddle with my code it returns the whole webpage inside the div... so in essence it worked however... I'd like to return the contents of the original indexSearch() function in the index model... Is the crux of my problem the fact that it is not returning jSon? if so, how do I change it to make it work...

Collectives™ on Stack Overflow

Managing AJAX call with Zend Framework

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related