[EXTENSION] Bootstrap

Yii 1.1 Extensions
782

TbGridView and TbDataColumn respectively ignore filterHtmlOptions for filter cells unfortunately.

In TbDataColumn.php it should be


public function renderFilterCell()

{

    echo CHtml::openTag('td',$this->filterHtmlOptions);

    echo '<div class="filter-container">';

    $this->renderFilterCellContent();

    echo '</div>';

    echo '</td>';

}

instead of


public function renderFilterCell()

{

    echo '<td><div class="filter-container">';

    $this->renderFilterCellContent();

    echo '</div></td>';

}

Added as minor ticket on bitbucket.

783

Is this extension replaced with http://yii-booster.clevertech.biz/index.html ? Which one should I use?

784

yii-booster is based on yii-bootstrap and they’re not compatible with each other.

booster’s functions go beyond bootstrap’s though the basic implementation is quite similar.

@Chris: what are your thoughts about the new project and what does it mean to yours?

785

I am using bootstrap for the first time and this is also the first time I am making a website with "responsive" features.

I am trying to build a grid that looks good when resized to the tablet or phone window size. Any thoughts on this? I am reasearching and it looks like I have to do this using media queries, and that bootstrap has some helper classes like ".visible-tablet" etc…

I tried something like this:




...


array(

  name'=>'date_modified',

  'htmlOptions'=>array('class'=>'visible-desktop'), /

),

...

so that the grid column is only visible in desktop size window. The result is that the CONTENT of the column is hidden when I resize the browser window, BUT the filter and header of column is still visible. How can I make the whole column disappear? Is there a better way of doing what I am trying to achieve? I am thinking that the grid with less columns will look better but maybe doing something like this:

http://css-tricks.co.../responsive.php

would be even better but I have no idea how this can be achieved using the TbGridView.

Edit:

I solved the issue using this code:





array(

       'name'=>'date_modified',

       'htmlOptions'=>array('class'=>'hidden-tablet hidden-phone'), //,'width'=>'145px'

       'headerHtmlOptions'=>array('class'=>'hidden-tablet hidden-phone'),

       'filterHtmlOptions'=>array('class'=>'hidden-tablet hidden-phone'),

),

...

For some reason the hidden class works, but the visible class breaks the grid layout.

786

Well, i made some progress in the last issue, its a totally different perspective

…

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).

Tecnhical: 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:

[u][b]view with thumbnail declaration (name of the view: _detail)

[/b][/u]


<?php 


            $this->widget('bootstrap.widgets.TbThumbnails', array(

                'id' => 'detailThumbnails',

                'dataProvider' => $dataprov,

                'template' => "{items}\n{pager}",

                'itemView' => '_thumb',

                ));


        ?>

[u][b]view called in thumbnail "itemView" property (name of the view: _thumb)

[/b][/u]


<?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????

[u][b]controller (just some functions)

[/b][/u]


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 getAllCountries()

        {

            $countryController = new CountryController(null);

            $countriesList = $countryController->getAllModels();

            

            if (!$countriesList)

            {

                throw new CHttpException(404,'The requested page does not exist.');

            }

            

            //var_dump($countriesList);

            $countriesL = CHtml::listData($countriesList, 'id', 'name');

            return $countriesL;

        }

        

        public function actionGetCities()

        {

            

            if(isset($_POST['id']))

            {

                $cityId = $_POST['id'];

            

                $dataprovider = $this->getCitiesFromDb($cityId);

                                

                echo $this->renderPartial('_detail',array('dataprov'=> $dataprovider),false,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;

        }

[b]If this is not the right way to do this, please let me know

[/b]

Please help me, i’m doing this for days now, and i cant just do it… :(

787

hi guys, im new to bootstrap - yii, ive followed the setup instructions found on http://www.cniska.net/yii-bootstrap/setup.html

but when i tried using:

$this->widget(‘bootstrap.widgets.TbGridView’, array(

'type'=&gt;'striped bordered condensed',


'dataProvider'=&gt;&#036;model-&gt;search(),


'template'=&gt;&quot;{items}&quot;,


'columns'=&gt;array(


    'id',


    'name',


    'address',


    array(


        'class'=&gt;'bootstrap.widgets.TbButtonColumn',


        'htmlOptions'=&gt;array('style'=&gt;'width: 50px'),


    ),


),

));

i only get the default yii look of the cgridview and the paddings are way off… i was hoping to see exactly what it looked like in the examples: http://www.cniska.net/yii-bootstrap/index.html

i’ve also tried removing

<!-- blueprint CSS framework

<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/screen.css" media="screen, projection" />

<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/print.css" media="print" />

–>

<!–[if lt IE 8]>

<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/ie.css" media="screen, projection" />

<![endif]–>

<!-- blueprint CSS framework

<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/main.css" />

<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/form.css" />

–>

and adding:

<?php echo Yii::app()->bootstrap->registerCoreCss(); ?>

i still get the blue look, and not the exact sleek design of the sample… am i missing something? thanks in advance…

788

Good Job!

789

I’ve made some changes to my last post, solving some of the problems.

If someone could give me an answer…

The code is updated. Now, when i click an image, it doesnt show anything, but refreshes the screen but the images that were supposed to be the cities are missing. The exception was The "dataProvider" property cannot be empty.

Thanks in advance :rolleyes:

790

Out of ideas… No one? :-[

791

Hello everyone. Yesterday i found the problem and solved my case. ;D

The problem 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: "

Thanks for your support, specially Trejder.

792

I changed a little the code of the yii-bootstrap, because I wanted to show the error messages while a form for ‘post’, was in inline mode. When the form is in inline mode, the user will not get messages like “the username is wrong”, because it is removed from inline forms. In order to achieve this result, you have to add the following code to the TbInputInline for every field you use, like textfield or textareafield “echo $this->getError().$this->getHint();”

793

Hi!

For a school project were obligated to use the Yii Framework, which is totally fine. We wanted to integrate Yii Bootstrap, but since we just found out we’d get a higher grade for writing our own CSS, we want to to remove Yii Bootstrap (sorry!). However, some things don’t work anymore after removing all the bootstrap folder in the extensions folder and removing the bootstrap lines in the main config file.

Which things? Well, it seems to be affecting our/the Javascript &amp; Ajax code, which is weird. Because those were developped before we setup Yii Bootstrap. So are we missing something? What do we need to do to succesfully uninstall Yii Bootstrap?

Thanks in advance if you’re so kind to help us. :)

794

Hey there –

I love this extension and its functionalities, though I’m hitting a wall with TbGridView. Maybe this is something people have already discovered/worked through, but I’m having trouble with the filtering function.

Some context: I have a referral model with the following (standard, Gii-created) search() function.




public function search()

	{


		$criteria=new CDbCriteria;


		$criteria->compare('id',$this->id);

		$criteria->compare('referName',$this->referName,true);

		$criteria->compare('route',$this->route,true);

		$criteria->compare('publisher',$this->publisher,true);

		$criteria->compare('channel',$this->channel,true);

		$criteria->compare('active',$this->active,true);


		return new CActiveDataProvider($this, array(

			'criteria'=>$criteria,

		));

In my ReferralController.php, I have the following index() function, which creates the data provider from the Referral model. It also passes a referral param for potential filtering.




public function actionIndex()

	{


		$dataProvider=new CActiveDataProvider('Referral');


		$this->render('index',array(

			'dataProvider'=>$dataProvider,

			'referral'=> New referral(),

		));

	}

The following code will generate a nice, pretty gridview with search fields… that don’t work.




<?php $this->widget('bootstrap.widgets.TbGridView', array(

    'type'=>'striped bordered condensed',

    'dataProvider'=>$dataProvider,

    'template'=>"{items}",

    'filter'=>$referral,

    'columns'=>array(

        array('name'=>'id', 'header'=>'#'),

        array('name'=>'referName', 'header'=>'Referral Name'),

        array('name'=>'route', 'header'=>'Redirect To'),

        array('name'=>'publisher', 'header'=>'Publisher'),

        array('name'=>'channel', 'header'=>'Channel'),

        array('name'=>'active', 'header'=>'Active'),

        array(

            'class'=>'bootstrap.widgets.TbButtonColumn',

            'htmlOptions'=>array('style'=>'width: 50px'),

        ),

    ),

)); ?>

If I change ‘filter’=>$referral to ‘filter’=>$referral->search() as most the examples suggest, I get the following error:

CActiveDataProvider and its behaviors do not have a method or closure named "getValidators".

I’ve attached a copy of the stack trace if anyone has any ideas. I have a feeling this is an obvious mistake, but I’m just not seeing it.

Any help would be greatly appreciated–

795

hello Yii-ers.

this is my first time i used ‘Yii-Bootstrap’

i’ve followed the step by step…

i want to create navigation bar with menu.

when i refresh my page,i got an error …

anyone can help me to solve this problem.

thnks before :)

796

Thanks for great extension.

I have a problem.

Bootstrap extension works fine.

When i use TbNavbar or TbMenu they don’t assign active=true for current elements.

I have local server, Yii project in subfolder: base url: http : // yii.test/blog

In controller:




$this->menu = array(

	array('label'=>'Home', 'url'=>'#'),

	array('label'=>'Test', 'url'=> $this->createUrl('/test')),

	array('label'=>'Menu', 'url'=> $this->createUrl('/menu')),

	array('label'=>'User', 'url'=> $this->createUrl('/user')),

	array('label'=>'Access', 'url'=> $this->createUrl('/rights')),

);

In View:




<?php $this->widget('bootstrap.widgets.TbNavbar', array(

  'type'=>'inverse',

  'brand'=>Yii::app()->name,

  'brandUrl'=>'#',

  'collapse'=>true,

  'items'=>array(

	  array(

		  'class'=>'bootstrap.widgets.TbMenu',

		  'items'=>$this->menu,

	  ),

  ),

)); ?>

Widget generate nice menu. All links works. Application contains test, menu, user and right Controller. But cueent item don’t hihglight.

Where my mistake?

===========================

I change url’=>$this->createUrl(’/test’) for ‘url’=>array(’/test’). New code generates same links.

I play with parameters and create new menu:




$this->menu = array(

	array('label'=>'Home', 'url'=>'#'),

	array('label'=>'Test', 'url'=> array('/test/default/index')),

	array('label'=>'Menu', 'url'=> array('/menu/default/index')),

	array('label'=>'User', 'url'=> array('/user/default/index')),

	array('label'=>'Access', 'url'=> array('/rights/default/index')),

);

If I put full path: /module/controller/method - active style works fine.

But I want see active TEST menu element for all links /test/*.

How do this?

797

Hi all,

I have some questions about tooltip. It’s around 2h that I spent in order to make it works but I failed. I saw, and saw again all the topic and response in this one about it but nothing works.


	

<div class="row"> 		

  <?php echo $form->labelEx($model,'name'); ?> 		

  <?php echo $form->textField($model,'name',array('rel'=>'tooltip','title'=>'blabla','rows'=>1, 'cols'=>50));?>

  <a href="#" rel="tooltip" title="First tooltip">help</a> 	

</div>

Above is my code i wrote in order to try to have tooltip on this input for example.

I tried to write it in htmlOptions of textfield… and in <a> … but I have just the default tooltip yellow on both.

I tried to add many thing in config main I read on internet and on this topic but nothing gives a better result, then I deleted them etc…




'components'=>array(     

  'bootstrap'=>array(       

    'class'=>'ext.bootstrap.components.Bootstrap',       

    'plugins'=>array(         

      'transition'=>false,         

      'tooltip'=>array(           

        'options'=>array(             

         'placement'=>'bottom',),),),),

but nothing seems to work.

I got a look on source code, and about tooltip I just see

jQuery(‘a[rel=“tooltip”]’).tooltip({‘placement’:‘bottom’});

jQuery(‘a[rel=“popover”]’).popover();

So I guess it’s right, but I didn’t see anything about a tooltip.js or something

So if you can help me, that would be much appreciated

EDIT:

tooltip seems to work on page /update/id/XX but not in dialog box I open to display the grid

798

This is not a Bootstrap issue - if post a new question, someone will be able to help you.

799

Hi @Chris83,

Thanks for the extension very nice and helpfull.

I have a BootstrapTab in which i want display some views.

How can I embeb any other Bootstrat widget inside a BootstrapTab?

Regards,

800

Hi @Chris83,

Thanks for the extension very nice and helpfull.

I have a BootstrapTab in which i want display some views.

How can I embeb any other Bootstrat widget inside a BootstrapTab?

Regards,

801

I would like to make one of the links in the navbar a primary button. Is this possible?