更新引导缩略图网格 - ajax 请求
Posted
技术标签:
【中文标题】更新引导缩略图网格 - ajax 请求【英文标题】：Update Bootstrap Thumbail Grid - ajax request 【发布时间】：2012-10-17 14:39:11 【问题描述】：场景：我有一个带有显示国家/地区的 twitter 引导缩略图网格的视图。当用户点击一张图片时，它应该在同一个网格（屏幕）中显示与该国家相关的城市。
技术：首先我用国家/地区填充 dataProvider，然后我应该向我的控制器发送一个带有国家/地区 ID 的 ajax 请求，在那里它查询与该国家/地区相关的城市的数据库并发送新的dataProvider，回到它用新数据更新同一个缩略图 dataProvider 的视图。
问题：我该怎么做？
这是我的代码：
带有缩略图声明的视图（视图名称：_detail）
<?php
$this->widget('bootstrap.widgets.TbThumbnails', array(
'id' => 'detailThumbnails',
'dataProvider' => $dataprov,
'template' => "items\npager",
'itemView' => '_thumb',
));
?>
缩略图“itemView”属性中调用的视图（视图名称：_thumb）
<?php
require_once '_detail.php';
?>
<li class="span3">
<a href="#" class="<?php echo "thumbnail".$data['id'] ?>" rel="tooltip" data-title=" <?php echo "Clicar.."; ?>">
<img src="<?php echo Yii::app()->getBaseUrl() . $data['photo'] ?>" >
<a href=
"
<?php
echo $className;
echo $this->createUrl(get_class($data).'/view', array('id' => $data['id']));
?>
"
>
<?php
echo $data['name'].$data['id'];
?>
</a>
<?php
Yii::app()->clientScript->registerScript('thumbClick'.$data['id'],'
$(".thumbnail'.$data['id'].'").click(function()
var request = $.ajax(
data:
id : '.$data['id'].'
,
type: "post",
url:"'.Yii::app()->createAbsoluteUrl("tripDetail/getCities").'",
error: function(response, error)
alert("Error: " + response + " : " + error);
,
);
$(".thumbnail'.$data['id'].'").ajaxSuccess(function()
$.fn.yiiListView.update("detailThumbnails");
);
);
');
?>
</a>
</li>
如果成功，我需要更新同一个 dataProvider，它位于名为 _detail 的视图中，因此是 require_once。我想要做的是将来自控制器（下面）的数据以 json 格式传递并在此处解码。但是我不知道如何从 json 响应中构建一个新的数据提供者，也不知道编码是否正确。是吗？？？？
控制器（只是一些功能）
public function actionCreate()
$session = new CHttpSession;
$session->open();
if(isset($_SESSION['mySession']))
$data = $_SESSION['mySession'];
if ($data)
if(!isset($_GET['ajax']))
$dataprov = new CActiveDataProvider("Country");
$this->render('create',
array(
'dat'=>$data,
'dataprov'=>$dataprov
)
);
public function actionGetCities()
if(isset($_POST['id']))
$cityId = $_POST['id'];
$dataProvider = $this->getCitiesFromDb($cityId);
echo $this->renderPartial('_detail',array('dataprov'=> $dataProvider),true,true);
public function getCitiesFromDb($cityId)
$criteria = new CDbCriteria;
$criteria->select = "*";
$criteria->condition = "b4_Country_id = " . $cityId;
$dataProv = new CActiveDataProvider('City',
array('criteria'=>$criteria));
return $dataProv;
如果这不是正确的方法，请告诉我
【问题讨论】：
这不起作用<?php$json = CJSON::decode(data)?>，因为您试图将服务器端代码与客户端参数混合。 php 无法访问 data，因为它是一个 javascript 变量。
也没有 jQuery update 方法，所以这个 $("#detailThumbnails").update(data); 不会做任何事情，除非你已经实现了一个名为 update 的自定义插件。而且您不需要在客户端手动解码 JSON，您只需将 dataType: 'json' 作为参数添加到 jquery $.ajax 调用，或者您可以从 php 发送 json 标头，jQuery 将识别并解析响应为JSON：header('Content-Type: application/json');
另一个问题是，当我单击图像时，它会向服务器端生成 2 个请求，因为脚本是在 _thumb 视图中注册的...
你能澄清一下这一行吗：“首先我用 cities 填充 dataProvider，然后我应该向我的控制器发送一个带有国家 ID 的 ajax 请求，在那里它查询数据库与该国家有关的城市”。如果你已经有了城市，那为什么还要查询呢？
它的国家，对不起....
【参考方案1】：
您正在混合Server Side Code 和Client side code。
服务器端代码
此代码驻留在服务器上，并根据请求执行以向客户端提供有效输出。一旦完成，它就不会与客户端保持任何连接
客户端代码
一旦请求发送到服务器，客户端等待服务器的响应并接收服务器发送的任何内容。一旦完成，它将与服务器断开连接，直到用户或脚本发出进一步的请求。
你在这里所做的是<?php$json = CJSON::decode(data)?> php 标签是服务器端的东西，它们不能被填充，因为它们出现在你的代码中的客户端。考虑关注
如果您成功提出了AJAX 请求，您最好尝试更改Ajax request 的datatype。我猜你已经完成了一半，但你不知道如何解码收到的JSON。你可以在你的ajax请求中使用'dataType'=>'json'。更多详情见Updating fields with Ajax and Json
希望这能让生活更轻松
至于更新部分，您可以执行创建页面并通过renderpartial 调用它并将html 返回到您的视图
public function actionGetCities()
if(isset($_POST['id']))
$cityId = $_POST['id'];
$dataProvider = $this->getCitiesFromDb($cityId);
echo $this->renderPartial('updateView',array('dataprovider'=> $dataProvider),true,true);//see documentation for third and fourth parameter and change if you like
在您看来，您只需更新最初具有原始网格的 div，因此无需使用 json 格式。
更新视图
<?php
$this->widget('bootstrap.widgets.TbThumbnails', array(
'id' => 'detailThumbnails',
'dataProvider' => $dataProvider,
'template' => "items\npager",
'itemView' => '_thumb',
));
?>
注意： 此代码未经测试，仅供参考。
【讨论】：
首先，我要感谢您的回答。我已经更改了代码，但问题是我无法更新 dataProvider，就像我在上一条评论中所说的那样...... 有不同的解决方法，但您将无法更新'dataProvider' => $dataProvider, 属性，因为它是服务器端代码。您可以做的是让您的操作生成html 在您的操作中使用renderPartial 并传递新的数据提供程序并从那里获取html 并显示。在答案中查看原始代码形成
我明白你的意思，但是...... :( 仍然不起作用。让我问你一些事情。如果你要把第一个 dataProvider 初始化，你在哪里做？？
luis，从服务器返回什么数据？错误是什么？ url被正确调用了吗？
我更新了代码。现在它抛出一个异常，因为 dataProvider 首先是通过 ajax 更新的......【参考方案2】：
好的，昨天我修复了 jquery 中的问题。生成的html是对的，但是没有插入，刷新了图片，然后，点灯亮了：
Yii::app()->clientScript->registerScript('thumbClick'.$data['id'],'
$(".thumbnail'.$data['id'].'").click(function()
var request = $.ajax(
data:
id : '.$data['id'].'
,
type: "post",
success: function(data)
$("#detailThumbnails").html(data);
,
url:"'.Yii::app()->createAbsoluteUrl("tripDetail/getCities").'",
error: function(response, error)
alert("Error: " + response + " : " + error);
,
);
);
');
代码中显示“成功：”的部分
非常感谢大家给予我的所有帮助，特别是 bool.dev。您的帮助很宝贵。
【讨论】：
很高兴我能帮忙。很好，你想出了自己的解决方案以上是关于更新引导缩略图网格 - ajax 请求的主要内容，如果未能解决你的问题，请参考以下文章