Update Bootstrap Thumbail Grid - ajax request - php

Question

Scenario: I have a view with a twitter bootstrap thumbnail grid that shows the countries. When the user clicks one image, it is supposed to show the cities related to that country, in the same grid (screen).
Technical: First I fill the dataProvider with countries, and then I should send a ajax request with the country id to my controller where it queries the database for cities related to that country and sends the new dataProvider, back to the view where it updates the same thumbnail dataProvider with new data.
Question: How do I do this?
Here is my code:
view with thumbnail declaration (name of the view: _detail)
<?php
$this->widget('bootstrap.widgets.TbThumbnails', array(
'id' => 'detailThumbnails',
'dataProvider' => $dataprov,
'template' => "{items}\n{pager}",
'itemView' => '_thumb',
));
?>
view called in thumbnail "itemView" property (name of the view: _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>
In case of success i need to update the same dataProvider, which is in the view named _detail, hence the require_once. What iam trying to do is pass the data from controller(below) in json and decode here. But i don't know how to build a new data provider from the json response, and dont know either if the encode is properly made. Is it????
controller (just some functions)
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;
}
If this is not the right way to do this, please let me know

Answer 1

You are mixing Server Side Code and Client side code.
Server Side Code
This code resides on server and upon request it gets executed to provide the valid output to the client. Once it is done it does not maintains any connection with the client
Client Side code
Once request is sent to server client waits for response from server and receives anything sent from server. Once done it disconnects from server until further requests made by user or scripts.
What you did here is <?php$json = CJSON::decode(data)?> php tags are serverside thing and they can not be populated because they appear on client side as in your code. Consider following
If you successfully made the AJAX request you better try changing datatype of Ajax request. I guess you are half way there but you do not know how to decode the JSON received. you can use 'dataType'=>'json' in your ajax request. for more details see Updating fields with Ajax and Json
Hopes this makes life easier
As for update part you can do something like create page and call it via renderpartial and return HTML to your view
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
}
}
and in your view you can just update the div that initially have the orignal grid so no need to use json format.
updateView
<?php
$this->widget('bootstrap.widgets.TbThumbnails', array(
'id' => 'detailThumbnails',
'dataProvider' => $dataProvider,
'template' => "{items}\n{pager}",
'itemView' => '_thumb',
));
?>
Note:
This code is not tested and is given for an idea only.

Answer 2

Ok, yesterday i fixed the problem that was in the jquery. The html generated was right but was not being inserted, when the image refreshed, and then, a little light turned on:
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);
},
});
});
');
The part of the code that says "sucess: "
Thank you very much for all the help you people gave me, specially bool.dev. Your help was precious.