CakePHP中不会使用Ajax的jQuery工作 [英] CakePHP wont work with Ajax jQuery
问题描述
我很绝望对这种情况，因为我已经花了3天试图找到我在这个code错误。
I'm very desperate about this situation because I've spent over 3 days trying to find my mistake in this code.
我的应用程序应该获取一些客户通过我的控制器从地理坐标数据库，它应该返回一个JSON的坐标是阴谋在视图上的谷歌地图的div标记。
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.
这是我的code：我有它返回一个JSON响应就好了（我已经在Chrome控制台检查）
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))));
}
}
然后，我有Ajax请求的网页：
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');
}
在我看来：index.ctp HTML的形象（开放式search.png，阵列（'身份证'=>'开放式搜索，阶级=>divlink'））; ？> HTML的链接（ $这个 - > HTML的形象（明确search.png，阵列（类=>divlink'））， #maps，阵列（'越狱'=> FALSE））？>
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>
这应该工作正常，因为我一直有一个jqXHR.readystate = 4，服务器状态= 200，但我的页面没有加载地图。
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
在很长一段时间debbuging它，我认为这是与Ajax回调（成功）的一个问题，但我不能肯定确认一下吧。
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.
我已经取得了得了这件事的工作。我不得不创建什么也没有在身体里面一个新的模板，但是，
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'); ?>
我真的dont't知道为什么，但是，它的工作。如果有人知道这是为什么，或者至少有一个线索。请告诉我。
I really dont't know why but, it worked. If someone knows why or at least have a clue. Please tell me.
推荐答案
我发现这一切发生的事情，因为一个CSS错误，当我设置的地图，画布div中显示了地图的高度。
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.
CSS的code映射，帆布等元素有：
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>
这篇关于CakePHP中不会使用Ajax的jQuery工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
