[EXTENSION] Bootstrap

Hi Chris,

Congratulations for this extension.

I am trying to build up a dynamic dropdownlist elements using ajax i.e. the user selects in the first dropdownlist the State and the second dropdownlist will get loaded with the list of Cities for the selected State.




class Employee extends CActiveRecord

{

   ...

   public function relations()

   {

      return array(

         ...

         'city' => array(self::BELONGS_TO, 'City', 'city_id'),      )

   }

}






class City extends CActiveRecord

{

   ...

   public function relations()

   {

      return array(

         ...

         'state' => array(self::BELONGS_TO, 'State', 'state_id'),

      )

   }

}



To the employee creation form I need to add two fields for each dropdownlist elements. Since city_id belongs to Employee model we obviously will need:




   <?php echo $form->dropDownListRow($model(),'city_id', CHtml::listData(Site::model()->findAll(),'id','name'), array('prompt'=>'Select one item...')); ?>



The problem is on the state field, which doesn’t belong to Employee model. Actually state field should be inherited from CHtml (CHtml.dropDownList()) class rather than CActiveForm (CActiveForm.dropDownList()). Using Bootstrap dropDownListRow element we are always targeting for a CActiveForm element.

Is this correct? How can I workaround this?

Thanks

A.Miguel

This topic is for the bootstrap extension related questions, so you’d better ask those kind of questions here instead: http://www.yiiframework.com/forum/index.php/forum/29-general-discussion-for-yii-11x/

Nonetheless, for what you need you can follow this tutorial: http://www.yiiframework.com/wiki/24/

Yii-Bootstrap fails to work for me on php 5.4 - ZS 5.6 (same app running fine under 5.3.11RC).

I removed all blueprint css and copy-pasted the navbar from the demo.

PHP fails with a

The issue dissappears, as soon as I remove all non-array elements (like ‘—’ or the searchbox) from the navbar.

I guess you have to check if $item is an array, to avoid warnings in php 5.4++

Hi,

This is in fact a Bootstrap related question; please read carefully my topic.

The main point behind my question is that I cannot use any bootstrap method to build up a dropdownlist that is not directly related with the model i.e. a CHtml object. If you notice dropDownListRow is a bootstrap method that will execute the following:


	

protected function dropDownList()

{

   echo $this->getLabel();

   echo '<div class="controls">';

   echo $this->form->dropDownList($this->model, $this->attribute, $this->data, $this->htmlOptions);

   echo $this->getError().$this->getHint();

   echo '</div>';

}



This requires a model instance whereas CHtml not. In my example just the city field is directly related with the Employee model whereas State is not.

I’ve tried to enhance Bootstrap in order to include CHtml approach (see code below) but ended with no success because $model is required although the extension:




protected function dropDownListSimple()

{

   echo $this->getLabel();

   echo '<div class="controls">';

   echo CHtml::dropDownList($this->attribute,'', $this->data, $this->htmlOptions);

   echo $this->getError().$this->getHint();

   echo '</div>';

}



Feedback is very welcome.

A.Miguel

This is not really helpful. I obviously know this page and had problem with BootButton not with bootstrap itself.

Fortunately i solve this using submitLink instead submit.


<?php $this->widget('bootstrap.widgets.BootButton', array('fn'=>'submitLink', 'type'=>'primary', 'icon'=>'ok white', 'label'=>'Submit')); ?>

Hi just want to say how great this plugin is! :wink:

I have a Account and User model,(user has 1 account) and on the account view page, I am trying to display a text field with the full name of the user, the user model has firstname and lastname. How can I do that without having to define fullname in a model? And just combine the 2 on the view page.

I know this works with CHtml texfield, but I really want to use Boostrap.


<div class="row">

    <?php echo CHtml::textField('User[fullname]', 'Jason Smith', array('size'=>60,'maxlength'=>128)); ?>                

</div>



Thanks in advance

I’m afraid you would have exactly the same problem without Bootstrap as far as I can tell. Instead of using the standard Bootstrap $form->dropDownListRow function (or the Bootstrap less $form->dropDownList), you just need to use the CHtml::dropDownList($this->attribute,’’, $this->data, $this->htmlOptions); way directly in your page.

You don’t really need to use the Bootstrap extension functions, you can just build the structure yourself like you do in this code:




   echo '<div class="control-group">';

   echo '<label for="State" class="control-label required">State <span class="required">*</span></label>';

   echo '<div class="controls">';

   echo CHtml::dropDownList('StateList','', State::getStates(),array(

			'ajax' => array(

				//'type'=>'POST', //request type default GET

				'dataType'=>'json',

				'url'=>CController::createUrl('City/getCitiesByStateId'), //url to call.

				'update'=>'#Employee_city_id', //selector to update

				//'data'=>'js:javascript statement'

				'data'=>array('stateId'=>'js:this.value'),

				//leave out the data key to pass all form values through

				//http://www.yiiframework.com/wiki/24/

			),

			'empty' => '---'

		));

   echo '</div>';



You might have a problem with validation this way though (there will be none on the State field). If you need that, you will have to add a “State” property to your model (just put: public $state = ‘’; in your model), which you can then use in your validation rules etc.

Actually that would also allow you to use the Bootstrap extension and normal form functions (as this will make "State" part of your model as if it would be in your table), so this will probably be the easiest (and best) solution for you. Your Employee model will then actually have a "State" property.

Hopefully this will help you a bit.

Cheers

@A.Miguel & jasocl: The extension doesn’t currently support building forms without a model, this is because I hardly ever build forms using plain CHtml elements because it’s not very dynamic and the validation becomes a lot more tricky. I’d suggest that you modify your model by adding the attribute that you need for the dropdown or build the form yourself without the use of Bootstrap’s widgets as Xuntar suggested.

@Fredi: Upgrade to the latest beta release and you won’t have a problem anymore. In 0.9.11 BootButton creates a button instead of an input when creating a submit button.

@Surlac: You are correct, PHP 5.4 will give a warning in that case. I need to change the code to make sure that it’s an array before using it as one. Thanks for reminding me about this.

Thanks Chris, I am new to Yii, I thought there is something I missed. Once again great work, I look forward to see it evolve even more.

Hi Chris,

Any example on how to add twitter like login dropdown on the menu bar on the top?

Cheers,

Daniel

Sorry guys, how do you make the current tab stay in focus after page submission? (using partial-rendering for content) or it’s only possible by using tab -> Ajax load method?

thanks in advance.

Jason

You can dynamically set the ‘active’ property of each tab. So you could for instance set active based on a $_GET variable.

Hi,

In addition, I have the BootAlert not working with the deletion from GridView. below is my code:




array(

            'class' => 'BootButtonColumn',

            'template' => '{delete}',

            'afterDelete' => "function(link,success,data){ if(success) { var obj = jQuery.parseJSON(data); jQuery('#alert').bootAlert('alert', obj.status, obj.msg); } }",

            'deleteConfirmation' => 'Anda yakin untuk menghapus formula ini?',

            'visible' => Yii::app()->user->checkAccess('Formula.Delete'),

        ),



I put the BootAlert in main.php in layout




        <div style="position: fixed; width: 100%; bottom: 50px; left: 0px;">

            <div class="container-fluid">

                <?php

                $this->widget('BootAlert', array(

                    'id' => 'alert',

                    'keys' => array('success', 'info', 'warning', 'error'),

                ));

                ?>

            </div>

        </div>



It used to be working fine. But, now it does not work anymore… any help?

Hi,

I have problem with display bootstrap ActiveForm with CForm anyone can help me? What should i do to integrate bootstrap with CForm?

Hallo Everyone,

@Chris thank you very much for this extension. I used to use other twitter bootstrap extension but I moved to yours and it works as a breeze.

I do found some small thing I couldn’t solve myself. So I ask for help. I use BootMenu widget with pills type here is the code


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

					'type'=>'pills',

					'items'=>array(

						array('label'=>'', 'url'=>array('//site/index'),'icon'=>'home'),

						array('label'=>'Blog', 'url'=>array('//post/index')),

						array('label'=>'Zwierzopedia', 'url'=>array('//wiki/index')),

						array('label'=>'Ogłoszenia', 'url'=>array('//ad/index')),

						array('label'=>'Baza Firm', 'url'=>array('//company/index')),

						array('label'=>'Zwierzaki', 'url'=>array('//pets/index')),

						array('label'=>'Profil', 'url'=>array('//profile/profile/view'),'icon'=>'user','visible'=>!Yii::app()->user->isGuest, 'itemOptions'=>array('style'=>'float:right;')),

						array('label'=>'Społeczność', 'url'=>array('//user/user/browse'), 'itemOptions'=>array('style'=>'float:right;')),

					),

				)); 

				?>

What I’d like to achieve is to have white icons only on active item. By default active pills are blue and black icon doesn’t look as that good as white one. ActiveCssClass is not parameter in BootMenu widget. If someone already solved this please let me know.

Regards

Hi,

I had a problem with less files integration and render in IE8.

I solved the issue in IE8 removing all comments in bootstrap less files (include all less files imported by bootstrap.less file) and it rendered fine in IE8.

I don’t know if it was the right way to correct it, but in this case seems to be working.

kind regards,

Fábio Felicidade.

Hi,

I’ve encountered this error:


CException


Property "BootButton.fn" is not defined.

After using bootstrap gii generator, I try to enter create entry section but it hang up there. Other widgets work fine.

Any suggestion?

@xgenvn

I was getting that same error and I resolved it by going into:

\protected\extensions\bootstrap\gii\bootstrap\templates\default\_form.php

starting from line 27 and changed this:




	<div class="form-actions">

		<?php echo "<?php \$this->widget('bootstrap.widgets.BootButton', array(

			'fn'=>'submit',

			'type'=>'primary',

			'label'=>\$model->isNewRecord ? 'Create' : 'Save',

		)); ?>\n"; ?>

	</div>



To this:




	<div class="form-actions">

		<?php echo "<?php \$this->widget('bootstrap.widgets.BootButton', array(

			'buttonType'=>'submit',

			'type'=>'primary',

			'label'=>\$model->isNewRecord ? 'Create' : 'Save',

		)); ?>\n"; ?>

	</div>



Then all you have to do is regenerate your forms!

Hope this helps!

Hello,

Is it possible to show a modal dialog from a BootNavBar menu item?

How? What value should be assigned to ‘url’?

I tried this, but it’s not working…




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

    'items'=>array(

        array(

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

            'items'=>array(

                 ....

                 array('label'=>'About', 'url'=>'#modal',),

                 ....




 <?php $this->beginWidget('bootstrap.widgets.BootModal', array('id'=>'modal')); ?>

 <div class="modal-header">

    <h3>Modal Text</h3>

</div>

 <?php $this->endWidget(); ?>







Hello.

Can anyone tell me why this:




$gridDataProvider = new CArrayDataProvider(array(

    array('id'=>1, 'firstName'=>'Mark', 'lastName'=>'Otto', 'language'=>'CSS'),

    array('id'=>2, 'firstName'=>'Jacob', 'lastName'=>'Thornton', 'language'=>'JavaScript'),

    array('id'=>3, 'firstName'=>'Stu', 'lastName'=>'Dent', 'language'=>'HTML'),

));


 

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

    'type'=>'striped bordered condensed',

    'dataProvider'=>$gridDataProvider,

    'template'=>"{items}",

    'columns'=>array(

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

        array('name'=>'firstName', 'header'=>'First name'),

        array('name'=>'lastName', 'header'=>'Last name'),

        array('name'=>'language', 'header'=>'Language'),

        array(

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

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

        ),

    ),

));



is returning:

Trying to get property of non-object

I just copied it from:

http://www.cniska.net/yii-bootstrap/#bootGridView

Thanks