[EXTENSION] Bootstrap

Yii 1.1 Extensions
722

Hi,

I’m having an slight issue when using an ajax link to update a div on my project site. I know basically what is going wrong…I just am wondering if there is some workaround for this. I’ll try to explain…

I’m using the Navbar with dropdowns throughout the site. It works just fine until there is a page with an ajax link that does a renderPartial into one of the pages divs. I have to set the $processOutput to true because the page it’s loading uses things like the bootstrap Popovers and they haven’t been used yet on the initial page. However, because I set $processOutput to true, the Navbar’s dropdowns no longer function. …if I set the $processOutput to false, the Popovers obviously wont work but the Navbar dropdows would work.

Is there some way around this issue?

723

Did I mention untested? Sorry, I wasn’t thinking about possible error messages messing up the layout.

The only work around I could think of is omitting the original error message and "appending" it manually:


<div class="input-append">

    <?php echo $form->textFieldRow($model, 'attribute', array('errorOptions'=>array('style'=>'display:none;'))); ?>

    <?php $this->widget('bootstrap.widgets.TbButton', array('buttonType'=>'submit', 'label'=>'Go')); ?>

</div>

<?php if($model->hasErrors('attribute')) echo '<span class="help-block error">'.$model->getError('attribute').'</span>'; ?>

Now tested and working on my side.

There is an option to set “hideErrorMessage” in “errorOptions” but it doesn’t seem to work whatsoever.

Hope it helps.

724

Many thanks DF. That’s just what I needed.

Timbo.

725

Hi,

I have a problem using the CGridView together with a collapsable TbNavbar widget on IE8 : when I perform a search in the gridview, its content is simply discarded (no more table !). If The TbNavbar is removed or if it is configured to not be collapsable ( ‘collapse’ => false) everything is back no normal.

I’m not a js expert but obviously there is some side effects between these 2 controls in IE8 (no problem with FF and chrome). Has anyone experiences such issue ? … any clue on how to fix it ?

Thanks

8)

Here is the view. It is really very close to the original one created by gii crud. The only difference is the TbNavBar




<?php

Yii::app()->clientScript->registerScript('search', "

$('.search-button').click(function(){

	$('.search-form').toggle();

	return false;

});

$('.search-form form').submit(function(){

	$.fn.yiiGridView.update('game-grid', {

		data: $(this).serialize()

	});

	return false;

});

");


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

	'brand'		=> false,

	'type'		=> 'inverse',

	'brandUrl'	=> $this->createUrl('/site/index'),


	// if collapse is set to false : no problem with the gridview anymore

 

	'collapse'  => true,

	'items'		=> array(),

));

?>




<h1>Manage Games</h1>


<?php echo CHtml::link('Advanced Search','#',array('class'=>'search-button')); ?>

<div class="search-form" style="display:none">

<div class="wide form">


<?php $form=$this->beginWidget('CActiveForm', array(

	'action'=>Yii::app()->createUrl($this->route),

	'method'=>'get',

)); ?>

	<div class="row">

		<?php

			echo $form->textField($model,'name');

			echo CHtml::htmlButton( Yii::t('app','Rechercher'), array('class'=>'btn', 'type'=>'submit'));

		?>

	</div>


	<div class="row buttons">

		<?php echo CHtml::submitButton('Search'); ?>

	</div>


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


</div><!-- search-form -->


<?php $this->widget('zii.widgets.grid.CGridView', array(

	'id'=>'game-grid',

	'dataProvider'=>$model->search(),

	'filter'=>$model,

	'columns'=>array(

		'id',

		'name',

		array(

			'class'=>'CButtonColumn',

		),

	),

));

?>
726

Hi folks,

Is there any way to link to a specific tab when using TbTabs? This sort of thing works with CJuiTabs


'Breadcrumb item'=>array('foo/view', 'id' => $id, '#' =>'yw9_tab_2')

but doesn’t work with Bootstrap. I want to use this in my breadcrumbs (and elsewhere) to return to a specific tab in a view.

Thanks in advance!

727

There may be a better / proper way of doing this, what I ended up doing is popping this in a JavaScript file and including it on the pages that used the Bootstrap tabs.





    // enables the corect tab to load based on a # in the URL

    $().ready(function() {

    	var url = document.location.toString();

    	if (url.match('#')) {

    		$('a[href=#' + url.split('#')[1] + ']').tab('show');

    	}

    	// Change hash for page-reload

    	$('.nav-tabs a').on('shown', function(e) {

    		window.location.hash = e.target.hash;

    	})

    });

If you do that, then your breadcrumbs / menus / etc with the ‘#’ =>‘tab-id’ will work. (be sure to specify the ‘id’ parameter when declaring your tabs, and use that ID as the # parameter)

728

Thanks Rums - much appreciated. I’ll give that a go.

729

I’m having trouble using the $(this) selector when using an ajaxLink button. As you can see in the code below, that should change the button’s text to read “New Text”, however it does not make any changes. The button’s generated ID is yt0, and when I change the code to $("#yt0).text(“New Text”), it works.

How can I change the code so that the $(this) selector (or something similar) will work?


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

            'label'=>'Promote',

            'buttonType'=>'ajaxLink',

            'size'=>'small',

            'url'=>array('api/add'),

            'ajaxOptions'=>array(

                'type' => 'POST',

                'beforeSend' => 'function( request )

                             {

                               // Set up any pre-sending stuff like initializing progress indicators

                             }',

                'success' => 'function( data )

                          {

                            $(this).text("New Text");

                          }',

                'data' => array( 'id' => $model->id )

            ),

        ));
730

I’m trying to do the same thing, however the button is being placed under the input box. It seems like

$form->textFieldRow inserts a <div class="control-group"> around the input causing the problem. How were you guys able to append a button while using textFieldRow?

731

The problem is the form type. The work around works with vertical forms only.

There is no way to manually get around the extra control-group unless you build the entire block manually (without yii-bootstrap).

Lets take a step back and think about Timbo’s original idea of pre-rendering the button and putting it inside the append option. It doesn’t seem to be such a bad idea after all! It only needs a little bit of tweaking css of the add-on and the embedded link (a tag).


<?php echo $form->textFieldRow($model, 'attribute', array(

    'append'=>$this->clips['searchBtn'],

    'appendOptions'=>array('class'=>'add-on-btn')

)); ?>

CSS:


.input-append .add-on-btn,

.input-prepend .add-on-btn {

  padding:0;

  border:none;

}


.input-append .add-on-btn .btn,

.input-prepend .add-on-btn .btn {

  margin:0;  

  height:16px;

  padding:6px 10px;

}

The padding of the parent element (span/add-on) and the margin of the child element (a/btn) need to be removed. Then we only want to see the border of the link/button and it should have the same height as the input field next to it. E voila!

This works for append and prepend, and all types of forms.

Tested with FF, Chrome, and Safari on Mac.

If anyone could test it on Windows and leave feedback it’d be appreciated.

Cheers.

732

I figured it was the horizontal form. I ended up doing this to get it to work:


 <div class="control-group">

    <div class="input-append">

      <?php echo $form->labelEx($model,'username', array('class'=>'control-label')); ?>

      <div class="controls">

        <?php echo $form->textField($model,'username',array('readOnly'=>true)); ?>

        <?php $this->widget('bootstrap.widgets.TbButton', array('buttonType'=>'button', 'label'=>$auth,

                                                                'type'=>'primary',

                                                                'htmlOptions'=>array('id'=>'auth', 'value'=>$auth),

                                                                )); ?>

      </div>

      <?php if($model->hasErrors('username')) echo '<span class="help-block error">'.$model->getError('username').'</span>'; ?>

    </div>

  </div>
733

Also, would it be a pain for yii-bootstrap to support button appends? Why couldn’t we do something like this?


<?php echo $form->textFieldRow($model, 'textField', 

   array('class'=>'input-medium', 

         'append'=>$this->widget('bootstrap.widgets.TbButton', array('buttonType'=>'submit', 'label'=>'Go'))

   )); ?>

The ‘append’ and ‘prepend’ attributes could also accept a button widget.

734

It surely takes some time to update the extension when the original framework has just been updated. Keep in mind the input-append and input-prepend classes have been added to TB most recently. Before that, append/prepend was used for strings only. Just be patient - chris83 is doing a great job it just takes a while to catch up with the original - and in the meantime use the workaround.

735

Did you sort this? i’ve got the same issue, happens when im using the BootStrap Navbar…

p

736

That’s good to know. I found out about this extension and Twitter bootstrap about a week or two ago so everything is new to me. I’m loving everything about it!

737

Can someone please help me. I am new to yii/bootstrap and I’ve been messing with this menu for awhile and just can’t seem to figure it out.

My problem is that when you shrink the screen (less than the 940px) the menu items disappear and the drop down button doesn’t appear. Is there a different way to do this without arrays?

I’m using version 1.1.0 of this extension.

Here is part of my code




<!--/top menu start-->

<div class="navbar navbar-fixed-top">

    <div class="navbar-inner">

        <div class="container">

            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

                <span class="toggle-bar"></span>

                <span class="toggle-bar"></span>

                <span class="toggle-bar"></span>

            </a>

		

			<a class="brand" href="<?php echo $this->createAbsoluteUrl('//'); ?>"><?php echo CHtml::encode(Yii::app()->name); ?></a>

			

				<div class="nav-collapse">

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

					'type'=>'inverse', // null or 'inverse'

					'collapse'=>true, // requires bootstrap-responsive.css

						'items'=>array(

							array(

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

							'items'=>array(

								array('label'=>'Assets', 'url'=>'#', 'items'=>array(

									array('label'=>'Check In/Out Assets', 'icon'=>'barcode', 'url'=>'#'),

									array('label'=>'List Assets', 'icon'=>'list', 'url'=>'#'),

									array('label'=>'Edit Assets', 'icon'=>'edit', 'url'=>'#'),

									'---',

									array('label'=>'Create Asset Model', 'url'=>'#'),

									array('label'=>'Create Assets', 'icon'=>'plus-sign','url'=>'#'),

									array('label'=>'Move Assets', 'icon'=>'share-alt', 'url'=>'#'),

							                '---',

							                array('label'=>''),

							                array('label'=>'Reserve Asstes', 'icon'=>'ok-sign', 'url'=>'#'),

							               

						                )),

								array('label'=>'Inventory', 'url'=>'#', 'items'=>array(

									array('label'=>'List Inventory', 'icon'=>'list', 'url'=>'#'),

									array('label'=>'Edit Inventory', 'icon'=>'edit', 'url'=>'#'),

									'---',

									array('label'=>'Move Inventory', 'url'=>'#'),

									array('label'=>'Take Out Inventory', 'icon'=>'share-alt','url'=>'#'),

									array('label'=>'Restock Inventory', 'icon'=>'refresh','url'=>'#'),							               

						                )),


				)); ?>

				</div>

		</div>

	</div>

</div>

Also, how would I link to a different icon other than the default bootstrap? Say in path my_app_name > images > icons > icon_name

big thank you in advance!!!!

738

Hi All,

I have problem about call action from other controller which is rendered using renderPartial uses bootstrap.widgets.TbTabs

I’ve used “zii.widgets.jui.CJuiTabs” with following code to renderPartial a form and cgridview, it’s work. And I would like to change to uses bootstrap.widgets.TbTabs, but I don’t know how to call action with TbTabs

Below code I’ve tried with CJuiTabs:

index.php


$this->widget('zii.widgets.jui.CJuiTabs', array(

    'tabs'=>array(

        'Tab1'=>array('ajax'=>'module/controler1/action1', 'id'=>'tab1'),

	'Tab2'=>array('ajax'=>'module/controler1/action2', 'id'=>'tab2'),            	            	

    ),   

));

controller1 -> action1


....

$this->renderPartial('/_form1', array(...), false, true);

Thank you for your help

739

Can we use popover or tooltip on a TbButton? I tried using the below but no luck:




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

  array('label'=>'Import Listings',

        'buttonType'=>'ajaxButton', 

	'type'=>'primary',

	'htmlOptions'=>array('id'=>'fb-auth', 'value'=>'fb-auth', 'class'=>'btn-small', 'data-trigger'=>'hover', 'data-title'=>'A Title', 'data-content'=>'And here\'s some amazing content. It\'s very engaging. right?', 'title'=>'Ttip', 'rel'=>'popover' ),

	'url'=>$this->createUrl('update'),

	'ajaxOptions'=>array(

	   'type' => 'POST',

	   'data' =>array('ajax'=>'ajax'),

           'success'=>'function(data) {

              $.fn.yiiListView.update(\'your-product-listings\');

              Estore.displayFlashMessage(data);

           }',

           'error'=>'function(data) {

              alert("There was an error updating your shop listings.");

            }'

  )

)); ?>
740

By default the js plugin for popovers listens to <a>-tags only


jQuery('a[rel="popover"]').popover();

With ‘buttonType’=>‘ajaxButton’ you’re creating a <button>-tag instead - that’s why nothing will pop. Try using ajaxLink instead of ajaxButton or set another line of js code manually.


jQuery('button[rel="popover"]').popover(); //or

jQuery('#fb-auth').popover();
741

how do that bootstrap.min.js and bootstrap.min.css will be loaded at start? I set defined(‘YII_DEBUG’) or define(‘YII_DEBUG’,false); but nothing happens