2013-01-23 50 views
1

工作,我對這種情況很絕望,因爲我花了3天試圖找到我在此代碼錯誤。CakePHP的習慣與阿賈克斯jQuery的

我的應用程序應該獲取一些客戶通過我的控制器從地理數據庫座標,它應該返回一個JSON與座標是在視圖上的谷歌地圖的div標記的情節。

但是當我運行該應用程序沒有發生,只是我的形式加載,但在谷歌地圖不顯示,因此該標誌不一樣好。

這是我的代碼:我有它返回一個JSON響應就好了(我已經在Chrome控制檯檢查)一個CakePHP的控制方法。

代碼:

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

      } 
     } 

然後我有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.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'); 
      } 

在我看來:index.ctp HTML的「圖像(」開放式搜索。 png「,array('id'=>'open-search','class'=>'divlink')); ?> HTML->鏈路( $這 - > HTML->圖像( 「明確的search.png」 陣列( '類'=> 'divlink')), 「#maps」,陣列( '逃離' => 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> 

這應該很好地工作,因爲我始終有一個jqXHR.readystate = 4,服務器狀態= 200,但我的頁面沒有加載地圖。

我的應用程序的一些截圖:

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

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

很長一段時間debbuging它後,我認爲這是與Ajax回調(成功)的問題,但我不能肯定當然關於它。

任何關於它的幫助將是非常好的。

注:很抱歉,如果我有什麼錯我的英語。我是巴西人,我只懂一點英語。

UPDATE

我已經實現了這個工作。我不得不創建一個沒有任何內部的新模板,但是,

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

我真的不知道爲什麼,但它的工作。如果有人知道爲什麼或至少有線索。請告訴我。

+0

佩德羅,如果你解決代碼縮進和大括號的平衡問題,那麼人們就有機會看到可能發生的事情。 –

+0

對不起,已更新! –

+0

你在控制檯收到了什麼錯誤?你應該能夠確認/否認這是否是ajax問題。 –

回答

0

我發現所有這一切都是因爲CSS錯誤,當我設置地圖 - 畫布div的高度顯示地圖。

CSS代碼映射-帆布等元素是:

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

和固定值設置爲地圖畫布的父DIV或映射帆布,如:

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