Question

场景：我有一个带有Twitter引导缩略图网格的视图，可以显示这些国家/地区。当用户点击一个图像时，它应该在同一个网格（屏幕）中显示与该国家/地区相关的城市。

技术：首先我将dataProvider填入国家/地区，然后我应该将带有国家/地区ID的ajax请求发送到我的控制器，在那里它向数据库查询与该国家/地区相关的城市并发送新的dataProvider，返回到用新数据更新相同缩略图dataProvider的视图。

问题：我该怎么做？

这是我的代码：

使用缩略图声明查看（视图名称：_detail）

<?php 

            $this->widget('bootstrap.widgets.TbThumbnails', array(
            'id' => 'detailThumbnails',
            'dataProvider' => $dataprov,
            'template' => "{items}\n{pager}",
            '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'] ?>" alt="">
        <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;
        }

如果这不是正确的方法，请告诉我

Answer 1

您正在混合Server Side Code和Client side code。

服务器端代码

此代码驻留在服务器上，并根据请求执行以向客户端提供有效输出。完成后，它不会与客户端保持任何连接

客户端代码

一旦请求被发送到服务器客户端等待来自服务器的响应并接收从服务器发送的任何内容。完成后，它将断开与服务器的连接，直到用户或脚本发出进一步的请求。

你在这里做的是<?php$json = CJSON::decode(data)?> php标签是服务器端的东西，它们无法填充，因为它们出现在客户端，就像你的代码一样。请考虑以下

如果您成功提出了AJAX请求，最好尝试更改datatype的{{1}}。我想你已经到了一半，但你不知道如何解码收到的Ajax request。您可以在ajax请求中使用JSON。有关详细信息，请参阅Updating fields with Ajax and Json

希望这会让生活更轻松

对于更新部分，您可以执行类似创建页面的操作，并通过'dataType'=>'json'进行调用并将renderpartial返回到您的视图

HTML

并且在您的视图中，您只需更新最初具有orignal网格的div，因此无需使用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 } }格式。的的UpdateView

json

注意：此代码未经过测试，仅供参考。

Answer 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。你的帮助很宝贵。

更新Bootstrap Thumbnail Grid - ajax请求

2 个答案: