[EXTENSION] Bootstrap

Hi There,

Got another question here, what if I wanna render image inside (HTMLs) inside the BootDetailView how do I do that?


'content'=>$this->widget('bootstrap.widgets.BootDetailView', array(

    'data'=>array('id'=>1, 'firstName'=>'Mark', 'lastName'=>'Otto', 'imageLink'=>'h t tp://xxx.xxx.com/images/xxx.jpg'),

    'attributes'=>array(

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

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

        array('name'=>'imageLink', 'label'=>'Profile picture'),

    ),

), true),

Current config (true) will render the output as strings so the output looks like :


First name: Mark 

Last name: Otto 

Profile picture: ht tp://xxx.xxx.com/images/xxx.jpg

instead of


First name: Mark 

Last name: Otto 

Profile picture: [Picture]

Does anyone know how to go about doing this?

Andy

Hi All!

I’m trying to use the great extension and stuck attempting to add Ajax functionality to BootMenu.

Just wanted to replace dropDownList for BootMenu and … no luck.

Does Bootmenu support something similar to:




CHtml::dropDownList($model,'id',$data,

array(

	'ajax'=>array(

	'type'=>'POST',

	'url'=>'some_url', 

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

	),

)

);



Any ideas? Maybe there is a way to achieve this with JQuery ?

Thanks in advance.

I believe BootListView have a syntax problem when you add ‘afterAjaxUpdate’ to options.

One that does not occure with CListView.

Sampa, thanks for reply.

It looks like BootMenu extends Cmenu that is not supporting any ajax options for its items at all.

So, I still have no idea about how to make the BootMenu items Ajax compatible :)

Oh I wasnt responding to you I was reporting a random error I came across :P

But okey, your dropdownlist is nothing other then a normal dropdownlist… generated thrue php:p

So u can do same things as if u were using another framework etc.

if your model is named Foo then at bottom




<script type="text/javascript">

$("#Foo_id").change(function(){

 $.ajax.....//any js code.

});



Hello,

Someone know how I can manually open an alert ? After an ajax request for example.

Thanks :)

Try something like this…


user()->setFlash('error', 'your error message');

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

    'htmlOptions'=>array('id'=>'myAlert', 'style'=>'display:none;'),

));

Then in your ajax callback, you show or fade in the alert:


$('#myAlert').show();

Not sure if there’s another way to achieve this.

Bootstrap uses Glyphicons Free.

The demo page infringes the Glyphicons Free license because it doesn’t “add a link to glyphicons.com in a prominent place (e.g. the footer of a website), include the CC-BY license and the reference to glyphicons.com on every page using Glyphicons

See: http://glyphicons.co…icons-licenses/

Hi guys, I was wondering if anyone had a neat way to auto-close alerts (the flash messages) after, say, 10 seconds?

I have problem with widgets it looks like jquery do not work. Dorpdowns do not drop, slider is a list and so on.




a("body").on is not a function

[Wstrzymuj na tym błędzie] 	


...entTarget)[this.type](this._options).data(this.type);if(!c.options.delay||!c.opt...


bootstrap.mini.js line 6



now i get




jQuery("a[rel=\"tooltip\"]").tooltip is not a function


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



OK i have commented line 132 and 133 in Bootstrap.php and now it is working but it is temporary solution. I would really appreciate if someone could tell me what can cause this problems.




		//$this->registerTooltip();

		//$this->registerPopover();



Hi!

Animation not working on the carousel. How do I fix it?

On your demo site does not work either.

Hi There,

Got another question here, what if I wanna render image inside (HTMLs) inside the BootDetailView how do I do that?


'content'=>$this->widget('bootstrap.widgets.BootDetailView', array(

    'data'=>array('id'=>1, 'firstName'=>'Mark', 'lastName'=>'Otto', 'imageLink'=>'h t tp://xxx.xxx.com/images/xxx.jpg'),

    'attributes'=>array(

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

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

        array('name'=>'imageLink', 'label'=>'Profile picture'),

    ),

), true),

Current config (true) will render the output as strings so the output looks like :


First name: Mark 

Last name: Otto 

Profile picture: ht tp://xxx.xxx.com/images/xxx.jpg

instead of


First name: Mark 

Last name: Otto 

Profile picture: [Picture]

Does anyone know how to go about doing this?

Andy

There’s always another question. Please make yourself familiar with the Yii class reference. All the answers are there! Yii-Bootstrap widgets extend the original Yii widgets hence you can make use of all the original options, too.

BootDetailView extends CDetailView - API is here. What needs to be done to have a link inside the view is the same that needs to be done to display an image.

In data simply add CHtml::image(src, alt, htmlOptions) and then you need to define the image attribute to be of type raw. If you need the image as link, put the CHtml::image() inside CHtml::link(). Using the old-fashioned way to render the widget:


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

    'data'=>array(

        'id'=>1, 

        'firstName'=>'Mark', 

        'lastName'=>'Otto', 

        'imageLink'=>CHtml::image(

            'http://www.placehold.it/200x100&text=yii-haw!', 

            'alt', 

            array('width'=>50, 'class'=>'className')

        )

    ),

    'attributes'=>array(

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

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

        array('name'=>'imageLink', 'label'=>'Profile picture', 'type'=>'raw'),

    ),

));

Type raw is available in other widgets eg CGridView, too.

Have fun!

This is confusing. So you have commented the lines and then it’s working?

That means the functionality comes from another jQuery lib that is included.

Make sure there is no (JS) conflict and you’re using jQuery 1.7.1.

Well, there was a discussion on Twitter’s Bootstrap forum about this and there is no neat way and option to auto-hide any alert hence you need to add this manually. Give the alert object an ID and fade/hide the ID after whatever timeout/delay. If you want to auto-hide all or some alerts use a classname instead.

BootModal not working.

I have created view test.php with the foloowing copy/paste code from example:




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

 

<div class="modal-header">

    <a class="close" data-dismiss="modal">&times;</a>

    <h3>Modal header</h3>

</div>

 

<div class="modal-body">

    <p>One fine body...</p>

</div>

 

<div class="modal-footer">

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

        'type'=>'primary',

        'label'=>'Save changes',

        'url'=>'#',

        'htmlOptions'=>array('data-dismiss'=>'modal'),

    )); ?>

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

        'label'=>'Close',

        'url'=>'#',

        'htmlOptions'=>array('data-dismiss'=>'modal'),

    )); ?>

</div>

 

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

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

    'label'=>'Click me',

    'url'=>'#myModal',

    'type'=>'primary',

    'htmlOptions'=>array('data-toggle'=>'modal'),

)); ?>



I do see a button, but nothing happens when I click on it. I do not see any modal window on button click. I do not know where to look at to fix it.

Hi renathy,

I cut/paste your code and it works fine for me. Check that bootstrap-alert.js is loaded in your page. I’m using version 0.9.11.

ciao

B)

… and now tested with latest release : 0.10.1.beta.r254 : your code work fine.

On the other hand, I’ve found another bug related to the afterAjaxUpdate option for the BootGridView widget. It is the same bug as the one fixed for the [b]BootListView /b.

ciao

B)

Hey, guys!

Maybe I’m doing something wrong, but I cannot load bootstrap.

My config/main.php




'preload'=>array('log', 'bootstrap'),

'components'=>array(

           'bootstrap' => array('class' => 'ext.bootstrap.components.Bootstrap'

	    ),

)



My layout/main.php




<?php if(isset($this->breadcrumbs)):?>

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

			'links'=>$this->breadcrumbs,

		)); ?><!-- breadcrumbs -->

<?php endif?>



Give me a error:


Alias "bootstrap.widgets.BootBreadcrumbs" is invalid. Make sure it points to an existing directory or file. 

And don’t load css and js.

Hi,

your code works fine on my sample app…Did you install ‘bootstrap’ into your extensions folder ? … just in case, note that ‘boostrap’ folder should be lower case.

With version 0.10.1-beta.r254 You should have following folder structure :




protected\extensions\bootstrap

     				+-----assets

         			+-----components

         			+-----lib

         			+-----gii

         			+-----widgets



You could also try to write :




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

	'links'=>array('Library'=>'#', 'Data'),

));



hope this helps…

B)