Question

i am trying to make a ajax call by making use of jquery UI library(jquery autocomplete) from my view page to get the name of department based on user input. Autocomplete function looks like

$( "#auto_complete" ).autocomplete({
        source: function( request, response ) {
            $.ajax({
                url:  "/employees/getAddress",
                dataType: "jsonp",
                data: {
                    featureClass: "P",
                    style: "full",
                    maxRows: 12,
                    name_startsWith: request.term
                },
                success: function( data ) {

                    response( $.map( data.geonames, function( item ) {
                        return {
                            label: item.name,
                            value: item.id
                        }
                    }));
                }
            });
        },
        minLength: 2,
        select: function( event, ui ) {
            log( ui.item ?
                "Selected: " + ui.item.label :
                "Nothing selected, input was " + this.value);
        },
        open: function() {
            $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
        },
        close: function() {
            $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
        }
    });

here i am making a call to action called getAddress()

which looks like

       class EmployeesController extends AppController {

//var $components = array('Autocomplete');
public $components = array('RequestHandler');
var $helpers = array('Javascript', 'Ajax');
    /**
     * index method
     *
     * @return void
     */
    //var $helpers = array('Ajax');
 public function getAddress() {
        $this->log($this->params, 'debug');
        $this->layout = 'ajax';
        $departments = $this->Department->find('all', array(
        'conditions'=>array('Department.name LIKE'=>$this->params['url']['q'].'%'),
        'fields'=>array('name', 'id')));
        $this->log($departments, 'debug');
        //$this->set('departments', $departments);
        $this->set(compact('departments'));
}

but whenever i am making ajax call i am getting error

“NetworkError: 404 Not Found – http://localhost/employees/getAddress?callback=jQuery1710012251482368207167_1333972423088&featureClass=P&style=full&maxRows=12&name_startsWith=sal&_=1333972426249“

how to solve this problem?

Answer 1

I guess you are missing the project folder in url, try:

var webroot = '<?php echo $this->webroot; ?>';
$( "#auto_complete" ).autocomplete({
        source: function( request, response ) {
            $.ajax({
                url:  webroot + "employees/getAddress",
                dataType: "jsonp",
                data: {
                ......

Or you could define webroot in layouts/default.ctp and use it