Jquery Autocomplete in Zend Framework without ZendX library

Question

I am posting this question because I have no idea what else to do. I have seen similar questions in Zend but the answers that have been accepted are simply not working for me.

Environment: Zend Framework 1.12 Jquery: 1.10.3 for jquery-ui.css, jquery-1.9.1.js and 1.10.3 jquery-ui.js

When I use the default functionality example of the jquery api documentation, everything is smooth, it works wonders. The problem comes when I place as source the url that connects to the action "automplete" of my controller. My controller does good, ir responds in json format, but the thing is, it responds as so:

{"json":[{"label":"John-1","value":"John"},{"label":"Jay","value":"Jay-1"},{"label":"Lusi","value":"Lusi-1"}]}

So you see, it places everything inside an array of 1 with key 'json', which is maddening, because Jquery doesn´t understand that, jquery only wants/needs/looks for the array with data. So I understand why it doesn´t work, but I don´t know how to go around it (I am new to php, zend and javascript).

For the controller to stop rendering viewscripts and layout and send the information passed to the view as json, I use the switchContext helper in the init() method:

 public function init() {
        $contextSwitch = $this->_helper->getHelper('contextSwitch');
        $contextSwitch->addActionContext('autocomplete', 'json')
                ->initContext();
    }

Here is the autocompleteAction:

public function autocompleteAction()
    {
        $autocomplete_data=array(
            array('label'=>'John-1', 'value'=>'John'),
            array('label'=>'Jay', 'value'=>'Jay-1'),
            array('label'=>'Lusi', 'value'=>'Lusi-1')
        );
       //echo Zend_Json::encode($autocomplete_data);
       $this->view->json= $autocomplete_data;
    }

As you can see, the reason it puts "json" as key for the data of all the autocomplete information I was sent is the name of the variable passed to the view. (I tested it by changing the variable name form json to "lala" and when I accessed via the url the array's key was now "lala" as in {"lala":[{"label":"John-1","value":"John"}....

You can see I also tried using the json_encode() (which is what Zend_Json::encode() uses), and echoing that, and this is what gets sent:

[][{"label":"John-1","value":"John"},{"label":"Jay","value":"Jay-1"},{"label":"Lusi","value":"Lusi-1"}]

I don´t even know how to access the data with that.

Does anyone know how to simply send the array [{"label":"something", "value":"something"}...] just like that?

Or does anyone know how I could manipulate the response from "source:" so that it reads whatever my controllers responds as--> response['json'] ¿?

EDIT

Alright, I believe I am onto something. The api documentation for jquery has this example, and I believe it is doing what I want: manipulating the resposne from the source. So I tried to mimick it with the following:

$( "#profesor" ).autocomplete({
        source:function(response ) {
            $.ajax({
                url: url,
                dataType: "json",
                success: function( data ) {
                    console.log(data);
                    response(data['json']);
                }
            });
        },
        minLength:1
    });

When it gets to console.log(data), 'data' is the response my controller is sending (the one with the 'json' key in the array). Wonderful, so all I should do is set the response for the autocomplete to be data['json'], but once it gets to that line...the following exception comes up: "Uncaught type Error: object is not a function". What does that mean? That it can´t access the "response" function of the autcomplete?

FINISH EDIT thanks in advance!

Chayemor Chayemor · Accepted Answer · 2013-06-03T13:21:33

The exception was being thrown due to my careless writing of the function in "source". The jquery api documentation has that this function contains two parameters, the first being the value typed into the autocomplete input element (my case, it was of type text with id "profesor"), and the second the response function. If you look at my code on the "editted" part, you´ll notice that I only have one parameter, and when I try to call it as a function the exception (in its absolute right) Uncaught type Error: object is not a function jumpts out. So here is the right way to do it:

 $( "#profesor" ).autocomplete({
            source: function( request, response ) {
                $.ajax({
                    url: url+'/term/'+request.term,
                    dataType: "json",
                    success: function( data ) {
                        response(data['json']);
                    }
                });
            }
        });

What I did was append" /term/typedTerm " into the url so that my controller can process and look in the database for anything that starts with that. And the response that the jquery will recieve is what it wants:

[{"label":"YourLabel","value":"LabelValue"},{"label":"Yourlabel2","value":"YourValue2"}]

Once again, I have had to go through this up-and-down because my controller sent the json data wrapped in {"viewVariableName":[actualData]} and what I needed was: [actualData]. I have noticed that this doesn´t happen to those who don´t use the contextSwitch _helper, but instead disable layout and rendering manually on every action that is supposed to send the json data.

 $this->_helper->viewRenderer->setNoRender(true);
 $this->_helper->layout->disableLayout();
 ....logical stuff here...
 echo Zend_Json::encode($DataToSend);

Why did I stay with mine? Because I'd rather just specify the controller who is going to send the json data with the contextSwitch in one place (since a few actions in that controller are going to be sending json data) rather than remember (and leave) two lines of code on each action. Matter of 'likes' I suppose.

Jquery Autocomplete in Zend Framework without ZendX library

1 Answers