Yii Bootstrap Thumbail - image drilldown

Question

Iam a yii newbie (started a week ago) and i want to use the yii Bootstrap Thumbnail grid in order to display some countries images, and then i want to drill in each country and display the cities, etc, without reloading the entire screen, just the right side.

Code for the create view

echo $this->renderPartial('_form', $this);

Between other things this view below is used to display the images. It has two divs. One for picking the images that relates to the countries/cities, the other displays the choice that the user made in terms of city by clicking in a button that is supposed to be near the picture, but only when the user drills into the cities.

1st doubt -> should i be rendering partials? I only want to refresh the right side of the screen, the one that has the images. Take into account that iam rendering one partial in the previous code, and other below. Is that even possible?

$this->renderPartial('_formCountry', $this);    

This view is responsible for loading the widget

$dataProvider = new CActiveDataProvider('Country');

$this->widget('bootstrap.widgets.TbThumbnails', array(
    'id' => 'countryThumbId',
    'dataProvider' => $dataProvider,
    'template' => "{items}\n{pager}",
    'itemView' => '_countryThumb',
));

The view below fills it with images of the countries, and sends the id of Country via post.

2nd doubt -> How can i drill down clicking the image, instead of having a button to do that???

echo $this->createUrl('city/view', array('id' => $data['id']));

        $this->widget('bootstrap.widgets.TbButton', array(
            'label' => 'cidades',
            'buttonType' => 'ajaxButton',
            'type' => 'primary', // null, 'primary', 'info', 'success', 'warning', 'danger' or 'inverse'
            'size' => 'mini', // null, 'large', 'small' or 'mini'
            'url' => Yii::app()->createUrl("tripDetail/showCities"),
            'ajaxOptions' =>
                    array('data' =>
                        array(
                            'id' => $data['id'],
                        ),
                        'type' => 'POST',
                    )
                )
        );

This action is fired upon button click and gets a new dataProvider based on the country the user picked

3rd doubt -> how many renderPartials can be nested????

public function actionShowCities()
        {
            $cityId = $_POST['id'];

            $dataProvider = $this->getCities($cityId);

            $this->renderPartial('_formCity', array('dProvider'=>$dataProvider));

        }

*The action above fires up this view _formCity which in turn calls _cityThumb*

$this->widget('bootstrap.widgets.TbThumbnails', array(
    'id' => 'countryThumbId',
    'dataProvider' => $dProvider,
    'template' => "{items}\n{pager}",
    'itemView' => '_cityThumb',
));

*_cityThumb*

4th doubt -> The cities were the only screen that was rendered, when i clicked the button to show me the cities, nothing happened, why????

echo $this->createUrl('place/view', array('id' => $data['id'])); 

Sorry for the long post and so many doubts, but its my first time with a php framework....and yii is not that easy, at least at first. :-[

Answer 1

Q. Should i be rendering partials? Q. How many renderPartials can be nested?

Most definitely you should, renderPartial is there to do just these sort of things:

it does not apply a layout to the rendered result. It is thus mostly used in rendering a partial view, or an AJAX response.

And you can nest as many as you want, just keep in mind that separating these view files should serve a purpose.

---

Q. How can i drill down clicking the image, instead of having a button to do that?

Just use a javascript click handler for an image. A jquery example:

<!-- sample image element -->
<img src="xyz.jpg" id="some_id" class="some-class" alt="Image not loaded"/>
<?php
    // in yii it's good to use registerScript to add a javascript snippet to generated html
    Yii::app()->clientScript->registerScript('script-name','
        $("#some_id").click(function(){
            // here make the ajax call
        });
    ');

There are many methods of adding a click handler for an image, the best way will depend on how you are using the view to add the image tags.

---

Q. The cities were the only screen that was rendered, when i clicked the button to show me the cities, nothing happened, why?

This will need debugging at your end. Only tip i can give you is to check if the http calls are occurring(or not) using Firebug.