CakePHP ne fonctionnera pas avec Ajax jQuery

Je suis très désespéré par cette situation car j’ai passé plus de 3 jours à essayer de trouver mon erreur dans ce code.

Mon application doit extraire certaines coordonnées géographiques des clients de la firebase database via mon contrôleur et renvoyer un JSON avec les coordonnées à tracer dans la vue en tant que marqueurs sur un div de Google Map.

Mais lorsque je lance l’application, rien ne se passe, seul le formulaire est chargé, mais Google Map ne s’affiche pas. Par conséquent, les marqueurs ne le sont pas non plus.

Voici mon code: j’ai une méthode de contrôleur CakePHP qui renvoie parfaitement une réponse JSON (j’ai vérifié dans la console Chrome).

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)))); } }

Ensuite, j’ai la page Web avec la demande Ajax:

  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.https://stackoverflow.com/questions/14486895/cakephp-wont-work-with-ajax-jquery/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.https://stackoverflow.com/questions/14486895/cakephp-wont-work-with-ajax-jquery/maps.MapTypeId.ROADMAP }; var map = new google.https://stackoverflow.com/questions/14486895/cakephp-wont-work-with-ajax-jquery/maps.Map(document.getElementById('map_canvas'), mapOptions); var markersCondensed = new Array(); var bounds = new google.https://stackoverflow.com/questions/14486895/cakephp-wont-work-with-ajax-jquery/maps.LatLngBounds(); $.each (markers, function(key, value){ var marker = new google.https://stackoverflow.com/questions/14486895/cakephp-wont-work-with-ajax-jquery/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'); }

Et à mon avis: index.ctp Html-> image (“open-search.png”, array (‘id’ => ‘open-search’, ‘class’ => ‘divlink’)); ?> Html-> link ($ this-> Html-> image (“clear-search.png”, array (‘class’ => ‘divlink’)), “#https://stackoverflow.com/questions/14486895/cakephp-wont-work-with-ajax-jquery/maps”, array (‘escape’ => false ))?>

   Html->image("hide-search.png",array('id'=>'close-search', 'class'=>'divlink')); ?>  Form->create('User',array('action'=>'filter')); ?>  Vendas   Data da venda Form->input('Sale.0.sale_date_min', array('label'=>'A partir do dia:', 'type'=>'date')); ?> Form->input('Sale.0.sale_date_max', array('label'=>'Até o dia', 'type'=>'date')); ?> 
  Total da venda Form->input('Sale.0.sale_total_min', array('label' => 'Valor mínimo', 'class' => 'money')); ?> Form->input('Sale.0.sale_total_max', array('label' => 'Valor máximo', 'class' => 'money')); ?> 
 
  Clientes Form->label('Client.sex', 'Sexo:'); ?> Form->checkbox('Client.sex', array('value'=> 'm')); ?> Form->checkbox('Client.sex', array('value'=> 'f')); ?>  Faixa etária Form->input('Client.age_min', array('label' => 'Idade mínima')); ?> Form->input('Client.age_max', array('label' => 'Idade máxima')); ?> 
  Renda Form->input('Client.income_min', array('label' => 'Renda mínima', 'class' => 'money')); ?> Form->input('Client.income_max', array('label' => 'Renda máxima', 'class' => 'money')); ?> 
 
 
 
 
  Html->image("ajax-loading.gif"); ?>Carregando o mapa...
 
  SEM RESULTADOS

Cela devrait fonctionner correctement car j’ai toujours un jqXHR.readystate = 4 et un SERVER STATE = 200, mais ma page ne charge pas la carte.

Quelques captures d’écran de mon application:

http://soffr.miximages.com/jquery/server_status_response.png

http://soffr.miximages.com/jquery/loaded_app.png

Après une longue période de débogage, je pense que c’est un problème avec le callback Ajax (succès), mais je ne peux pas en affirmer avec certitude.

Toute aide à propos de ce serait très gentil.

Remarque: Désolé si quelque chose ne va pas dans mon anglais. Je suis brésilienne et je connais juste un peu l’anglais.

METTRE À JOUR

J’ai réussi à faire fonctionner cette chose. Je devais créer un nouveau modèle avec rien à l’intérieur du corps mais,

  fetch('content'); ?>

Je ne sais vraiment pas pourquoi mais ça a fonctionné. Si quelqu’un sait pourquoi ou au moins avoir un indice. S’il vous plaît dites-moi.

J’ai découvert que tout cela se passait à cause d’une erreur CSS, lorsque j’ai défini la hauteur de map-canvas div sur la carte affichée.

Le code CSS pour map-canvas et d’autres éléments sont:

  #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}

Et définissez une valeur fixe sur le div parent de map-canvas ou sur map-canvas, comme: