CakePHP wont work with Ajax jQuery

I'm very desperate about this situation because I've spent over 3 days trying to find my mistake in this code.

My application should retrieve some clients geo coordinates from database via my controller and it should return a JSON with the coordinates to be plot in the view as markers on a Google Map div.

But when I run the application nothing happen, only my form loads, but the Google Map does not show, consequently the markers doesn't as well.

This is my code: I have a CakePHP controller method which returns a JSON response just fine(I've checked in Chrome Console).

Code:

    class ClientsController extends AppController {

          public $helpers = array('Js'=>array('Jquery'), 'GoogleMap', 'Html', 'Form');
          public $components = array('RequestHandler');


          public function loadJsonMarkers() {
              $conditions = array(
                                   'not' => array('Client.geoloc' => null),
                                   'geoloc !=' => '(-1,-1)'
                                  );

             if ($this->RequestHandler->isAjax()) {
                $clients = $this->Client->find('all', array(
                                                  'conditions' => $conditions,
                                                  'fields' => array('Client.geoloc'),
                                                  'recursive' => -1
                                               ));

              $this->header('Content-Type: application/json; Charset=UTF-8');
              return new CakeResponse(array('type'=> 'json', 'body' => json_encode(array('clients' => $clients))));

           }
      }

Then I have the webpage with the Ajax Request:

         function mapCaller(sentData)
         {

            $.ajax({
                       url: 'clients/loadJsonMarkers',
                       accepts: 'json',
                       type: 'POST',
                       data: sentData,
                       dataType: 'json',
                       error: function(xhr,status,err){
                             alert("DEBUG: status"+status+" \nError:"+err);
                       },  
                       success: function(transport){   

                             var markers = new Array();

                             for(var i in transport.clients){
                                 var latlng = transport.clients[i].Client.geoloc.replace("(", "");
                                 latlng = latlng.replace(")", "");
                                 latlng = latlng.split(',');

                                 markers.push(new google.maps.LatLng(parseFloat(latlng[0]),parseFloat(latlng[1])));
                             }

                             plotMap(markers);

                             $('#map-loading').fadeOut('slow');

                       },
                       complete: function(){
                             console.log(data);
                             console.log(sentData);
                       }
         });   

         function plotMap(markers)
         {   
            var mapOptions = { mapTypeId: google.maps.MapTypeId.ROADMAP };

             var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

             var markersCondensed = new Array(); 
             var bounds = new google.maps.LatLngBounds(); 

             $.each
             (markers,
             function(key, value){   
                  var marker = new google.maps.Marker({ position: value });
                  markersCondensed.push(marker);

                  bounds.extend(value);
              }
              );

              var mcOptions = {gridSize: 50}; 
              var markerCluster = new MarkerClusterer(map, markersCondensed, mcOptions);

              if (markers.length > 0)
                  map.fitBounds(bounds); 
              else
                  $('#map-no-results').fadeIn('slow');
          }

And in my view: index.ctp Html->image("open-search.png", array('id'=>'open-search', 'class'=>'divlink')); ?> Html->link( $this->Html->image("clear-search.png", array('class'=>'divlink')), "#maps", array('escape'=>false)) ?>

    <div id="search-box">
        <?= $this->Html->image("hide-search.png",array('id'=>'close-search', 'class'=>'divlink')); ?>

        <div class="form">
            <?= $this->Form->create('User',array('action'=>'filter')); ?>
            <fieldset>
                <legend>Vendas</legend>
                <fieldset class="sub-fieldset">  <?php //TODO define style for ?>
                    <legend class="sub-legenda">Data da venda</legend>
                    <?= $this->Form->input('Sale.0.sale_date_min', array('label'=>'A partir do dia:', 'type'=>'date')); ?>
                    <?= $this->Form->input('Sale.0.sale_date_max', array('label'=>'Até o dia', 'type'=>'date'));  ?>
                </fieldset>
                <fieldset class="sub-fieldset">
                    <legend class="sub-legenda">Total da venda</legend>
                    <?= $this->Form->input('Sale.0.sale_total_min', array('label' => 'Valor mínimo', 'class' => 'money')); ?>
                    <?= $this->Form->input('Sale.0.sale_total_max', array('label' => 'Valor máximo', 'class' => 'money')); ?>
                </fieldset>
            </fieldset>
            <fieldset>
                <legend>Clientes</legend>
                <?= $this->Form->label('Client.sex', 'Sexo:'); ?>
                <?= $this->Form->checkbox('Client.sex', array('value'=> 'm')); ?>
                <?= $this->Form->checkbox('Client.sex', array('value'=> 'f')); ?>

                <fieldset class="sub-fieldset">
                    <legend class="sub-legenda">Faixa etária</legend>
                    <?= $this->Form->input('Client.age_min', array('label' => 'Idade mínima')); ?>
                    <?= $this->Form->input('Client.age_max', array('label' => 'Idade máxima')); ?>
                </fieldset>
                <fieldset class="sub-fieldset">
                    <legend class="sub-legenda">Renda</legend>
                    <?= $this->Form->input('Client.income_min', array('label' => 'Renda mínima', 'class' => 'money')); ?>
                    <?= $this->Form->input('Client.income_max', array('label' => 'Renda máxima', 'class' => 'money')); ?>
                </fieldset>
            </fieldset>
        </div>
    </div>


    <div id="map_canvas"></div>
    <div id="map-loading" class="notice-box">
        <p><?= $this->Html->image("ajax-loading.gif"); ?>Carregando o mapa...</p>
    </div>


    <div id="map-no-results" class="notice-box">
        <p><a href="maps">SEM RESULTADOS</a></p>
    </div>

This should work fine since I always got a jqXHR.readystate = 4 and a SERVER STATE = 200, but my page does not load the map.

Some screenshots of my application:

http://dl.dropbox.com/u/67445902/server_status_response.png

http://dl.dropbox.com/u/67445902/loaded_app.png

After a long time debbuging it I think it is a problem with the Ajax callback(success), but I can't affirm certainly about it.

Any help about It would be very nice.

Note: Sorry if I got something wrong in my English. I'm a brazilian and I know just a little bit of English.

UPDATE

I've achieved to got this thing working. I had to create a new template with nothing inside the body but,

               <? echo $this->fetch('content'); ?>

I really dont't know why but, it worked. If someone knows why or at least have a clue. Please tell me.

Answers


I've discovered that all of this was happening because of an css error, when I set the height of map-canvas div the map shown up.

The css code to map-canvas and other elements are:

          #map_canvas label{width:auto; display:inline; height: 900px; /*Your height here*/}
          #map_canvas img{max-width:none}
          .gmaps label{width:auto; display:inline}
          .gmaps img{max-width:none}

And set a fixed value to the parent div of map-canvas or to map-canvas, like:

         <div id="map_canvas"></div>

Need Your Help

High-level server library for sharing data over network

collaboration high-level

I'd like to implement something similar to Etherpad - an online collaboration program.

Cities, Municipalities, or Settlements?

ui-design

I'm trying to build a form that lets a user enter an address as easily as possible.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.