[EXTENSION] Bootstrap

Yii 1.1 Extensions
21

can’t wait features

BootPopOver - A rich content tooltip


BootDialog - Bootstrap dialog

hope will be release soon

thank for wonderful ext.

22

Hi Chris,

Sorry to put the question on the comment. I did not notice there is a forum thread for bootstrap. It is amazing extension, very easy to use. Documentations and more samples would be great.

My problem is "Close not working on alert message"

I cannot make the close button works, I did this on the main layout

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

<?php echo Yii::app()->bootstrap->registerScriptFile("jquery.bootflash.js"); ?>

and on the view file

<?php if (Yii::app()->user->hasFlash(‘profileMessage’)): ?>

&lt;div class=&quot;alert-message success fade in&quot; data-alert=&quot;alert&quot;&gt;


    &lt;a class=&quot;close&quot; href=&quot;#&quot;&gt;×&lt;/a&gt;


    &lt;?php echo Yii::app()-&gt;user-&gt;getFlash('profileMessage'); ?&gt;


&lt;/div&gt;

<?php endif; ?>

Anything else should be added?

Actually, I show a bootFlash widget, is it the same as alert? how to use it?

Cheers,

Daniel

23

Hey Daniel,

You don’t need to register anything else besides Bootstrap itself in your layout. The widgets will register the necessary files themselves. Also, you can register BootFlash by adding the following code to the layout/view where you want to display the flash messages.




<?php $this->widget('ext.bootstrap.widgets.BootFlash'); ?>

If your flash message categories are set to ‘success’, ‘info’, ‘warning’ and ‘error’ this will display you flash messages. You can also set the keys manually by setting them in the widget configuration array and passing them as the second argument to the widget method.

I hope this helps. Please let me know if there are any future problems.

24

Hi Chris,

Thank you very much for your prompt and helpful response. One suggestion, why the flash is automatically closed? Any options to set the flash not closed automatically?

I am thinking of setting like template,


<?php $this->widget('ext.bootstrap.widgets.BootFlash', array('template' => '<div class="alert-message {key}"><p>{message}</p></div>')); ?>

Cheers,

Daniel

25

@Daniel: That’s a good suggestion. It could be an option, I’ll try to add it to the next release.

26

Version 0.9.2 is now live!

http://www.yiiframework.com/extension/bootstrap/files/bootstrap-0.9.2.zip

What’s new?

  • BootPopover (rich content tooltip widget)

  • Fixed a few bugs in the BootCrumb widget

  • Improved the existing jQuery plugins

I have also added more examples on the extension page, be sure to check them out.

Enjoy!

27

Hi Chris,

Another question, I add the afterDelete action on the CGridView, so that after successful/failed on deletion, it will shows the error message. How could I display using BootFlash?

What I usually have

View




<div id="statusMsg">

    <?php $this->widget('ext.bootstrap.widgets.BootFlash', array('template' => '<div class="alert-message {key}"><p>{message}</p></div>')); ?>

</div>


<?php

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

    'id' => 'purchase-order-grid',

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

    'filter' => $model,

    'columns' => array(

        ...

        array(

            'class' => 'CButtonColumn',

            'template' => '{delete}',

            'afterDelete' => 'function(link,success,data){ if(success) $("#statusMsg").html(data); }',

        ),

    ),

));

Controller




public function actionDelete($id) {

        // if AJAX request (triggered by deletion via admin grid view), we should not redirect the browser

        if (Yii::app()->request->isPostRequest) {

            try {

                $model = $this->loadModel($id);

                $model->delete();

                if (!isset($_GET['ajax']))

                    Yii::app()->user->setFlash('success', "PO Number #$model->number has been successfully deleted.");

                else

                    echo "<div class='alert-message success'>PO Number #$model->number has been successfully deleted.</div>";

            } catch (CDbException $e) {

                if (!isset($_GET['ajax']))

                    Yii::app()->user->setFlash('error', "PO Number #$model->number cannot be deleted, Please delete all details first before continue.");

                else

                    echo "<div class='alert-message error'>PO Number #$model->number cannot be deleted, Please delete all details first before continue.</div>"; //for ajax

            }

        }

        else

            throw new CHttpException(400, 'Invalid request. Please do not repeat this request again.');


        // if AJAX request (triggered by deletion via admin grid view), we should not redirect the browser

        if (!isset($_GET['ajax']))

            $this->redirect(isset($_POST['returnUrl']) ? $_POST['returnUrl'] : array('admin'));

    }

Thank you for your help.

Regards,

Daniel

28

Version 0.9.3 is now live!

http://www.yiiframework.com/extension/bootstrap/files/bootstrap-0.9.3.zip

What’s new?

  • BootModal, BootTabs and BootPills

  • Replaced the jQuery plugins with jQuery UI widgets

  • Added support rendering of captcha blocks

I’ve been working hard with the JavaScript and both the new and existing widgets for this extension so I’m really exited about this release.

Enjoy!

29

@Daniel: In version 0.9.3 you can call the bootAlert widgets ‘alert’ method:




jQuery('#alert').bootAlert('alert','error','Failed to delete order.');

The code above will only work if you set your BootAlert widget’s id to ‘alert’:




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

    'id'=>'alert',

)); ?>
30

hello,

nice work Chris. can you please add trigger to popover ? coz i need it to be focus on forum input not just hover on mouse hover.

Best Regards

31

Hey Dr. x,

This is already supported. Just set the showEvent/hideEvent options to focus/blur and it should work.

32

thank you Chris for help , it work

33

Nice work.

Are you going to update to the bootstrap 1.4 ?

34

Yes I will. There will most likely be a new release available this Friday.

35

Hi Chris,

any example to use BootAlert on form validation?

what I can only think is


<?php echo CHtml::errorSummary($model, null, null, array('class' => 'alert-message block-message error')); ?>

but not as expected ;(

Cheers,

Daniel

36

Hi Chris,

Disregard last post since I re-think and it would be unwise to display error message summary as BootAlert. The reason is that the BootAlert will be hidden/closed after some times. Instead, I just set the error message text as "Failed on …" as the information and let the error for each attribute shown next to the textfield




$form = $this->beginWidget('ext.bootstrap.widgets.BootActiveForm', array(

    ...

    'errorMessageType' => 'inline', // how to display errors, inline or block?

    ...

Next question,

In my situation, I put the BootAlert on the layout/main.php. Hence, global position for error message. And below is my view admin.php code which contains afterDelete on the CGridView




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

        ...

        array(

            'class' => 'CButtonColumn',

            'template' => '{delete}',

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

        ),

As your instruction on the previous message I can display the error message upon ajax call. BootAlert is displayed as expected. However, one thing that is annoy me a little bit. The BootAlert is not closed automatically. I need to press on "X" to close the error message. If not closed, it will stack to each other.

Any help on this?

Cheers,

Daniel

37

Version 0.9.4 is now live!

http://www.yiiframework.com/extension/bootstrap/files/bootstrap-0.9.4.zip

What’s new?

  • Updated to Bootstrap 1.4.0

Sorry for the delay, I’ve been very busy lately.

Enjoy!

38

Just have to say that this extension is amazing and having just got the flash message set up and running I am blown away. I was in the process of putting a similar set of css/tools together when I found your extension.

Thanks You!!

39

Nice, thanks a lot.

40

Good afternoon gentlemen,

I am using the bootstrap extension and I can not make the button to open a modal screen work. How to close the screen.

The following code:




<a id="linkContatos" class="btn" data-controls-modal="dialogoContato" data-backdrop="true" data-keyboard="true" >Inserir novo contato</a>

                    </div>


                    <?php

                            $this->beginWidget('ext.bootstrap.widgets.BootModal',array(

                                    'id'=>'dialogoContato',

                                    'options'=>array(

                                            'title'=>'Inserir um novo contato',

                                            'backdropClose'=>false,

                                            'escapeClose'=>false,

                                            'open'=>true,

                                            //'closeTime'=>350,

                                            //'openTime'=>1000,

                                            'buttons'=>array(

                                                    array(

                                                            'label'=>'Salvar Contato',

                                                            'class'=>'btn primary',

                                                            'click'=>'js:salvarContato',

                                                    ),

                                                    array(

                                                            'label'=>'Cancelar',

                                                            'class'=>'btn primary',

                                                            'click'=>'js:function(){ $(this).modal("hide");}',

                                                    ),

                                            ),     

                                    ),

                            ));

                    ?>       

                    <div>

                            <?php echo $this->renderPartial('../contatos/_form_clientes', array('model'=>new Contatos)); ?>

                    </div>

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

I know qa modal screen is working since I left open automatically. The only problem is the buttons to open and close work right.

Thanks,

Bruno Piaui

ps: I’m sorry “English”. I am Brazilian and I’m using google translation ;D