[EXTENSION] Bootstrap

The function is unknown, not recognized, hence not a function. Where do you put the function? Check if it’s inside a document ready block to ensure it’s not called before jQuery has been loaded.


$(document).ready( function()

{

  $('#myModal').modal({'show':false});

)};

I’m wondering why you mention the modal works as expected? Are you talking about the rendered html for the modal? And why do you need to set it to “false”? It won’t open by itself anyway.

Hi Don Felipe

Thanks for the response.

I’m not actually including that function anywhere. I’m assuming it’s part of the bootstrap framework.

I mention the modal is working correctly because it is. It’s popping up when I click the button and loading the correct information.

If it helps the two errors show up in firebug as soon as the page is loaded.

Thanks

Lux

two errors… so what’s the second one?

Usually this “is not a function” thing occurs when said function is not placed inside a document ready block (see above) hence jQuery has not been loaded or when there’s a conflict; eg between several js libraries and/or additional js code of yours. Can you check where that piece of code is coming from?

Another thing: What browser are you using? Firefox?

Check if this error message appears in another browsers, too. Or…

Clear Firefox’ history, restart it, and try again. Maybe it’s playing tricks on you.

If all this doesn’t work, you need to attach your source code.

Hi

I tried testing it by just using the demo code that is on chris’s site and still the same errors. It’s actually the one error that is firing twice on every page load.




<?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'),

)); ?>



Lux

PS: I’m using firefox but still get the same error after clearing history. It may not even be worth bothering about because as I said the modal works and the page works fine with no errors. Tested it in opera too and again no problems. The only thing that’s weird is the error showing up in firebug.

It would be nice and useful to know where the "is not a function" message really comes from.

Can you post a link to your test site (if accessible) or would you mind saving your complete page with Firefox and attach the files as zip archive? Thx

Hi DF

The test code above produces exactly the same thing in firebug so you can easily test it with that.

Thanks

Lux

It works!

Seriously!?! I’m not asking about the demo code that works just fine on my side (as do other modals, too) but the entire source code of the HTML page where the modal has been added, so one can see and check what JavaScript files are used or not. How else could someone possibly help you? You’re not providing any additional information. The demo code itself cannot be the problem - it’s HTML only.

However, you said it’s not worth bothering.

hi all,

This extension looks amazing, but I can’t make it run. I did the exactly same steps as shown in the official website. I keep receiving a CException when trying to access it with the following message: “Alias “ext.bootstrap.components.Bootstrap” is invalid. Make sure it points to an existing PHP file.”

Here is my main file:

'preload'=&gt;array(


	'log',


	'bootstrap',


		


),


// autoloading model and component classes


'import'=&gt;array(


	'application.models.*',


	'application.components.*',


	'application.modules.rights.*',


	'application.modules.rights.components.*',		


		


),


    'gii'=&gt;array(


	'generatorPaths'=&gt;array(


		'bootstrap.gii', // since 0.9.1


	),


),


     'components'=&gt;array(


	'bootstrap'=&gt;array(


		'class'=&gt;'ext.bootstrap.components.Bootstrap', 


	),


       ...


     ),

I read someone saying, in a previous post, that this(‘application.extensions.bootstrap.widgets.*’,) should also be inserted in the import array. Also tried that. Got the same result.

I downloaded the 0.9.12 version

appreciate the help,

Rafael

I hope you changed the name of the bootstrap folder (to bootstrap) after copying it to extensions folder

Yes, I have changed it. This is the path: .../protected/extensions/bootstrap

Hi, I have just figured out the problem. The bootstrap folder didn’t have the necessary permissions.

thanks

yii user management dropdownlist

Hello, I set up a website using YUM and Bootstrap. The bootstrap version is beta 0.10 rev240 and the latest version of YUM repository. The problem is this: when the controller reads the hearing record when using the widget instead of CActiveForm BootActiveForm to generate forms and when reading the first call within the widget textFieldRow bark method with the following error: BootActiveForm and Its behaviors do not have a closure or method named "hasErrors".

This is the view code:


<?php

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

	    'id'=>'horizontalForm',

	    'type'=>'horizontal',

	    'id'=>'registration-form',

		'enableAjaxValidation'=>true,

		'enableClientValidation'=>true,

	    'focus'=>array($form,'username'),

	)); 

?>


<?php echo Yum::requiredFieldNote(); ?>

<?php echo CHtml::errorSummary($profile); ?>


<fieldset>

    <legend>Registro de usuario</legend>

 

    <?php echo $form->textFieldRow($form, 'username'); ?>

    <?php echo $form->textFieldRow($form, 'email'); ?>

    <?php echo $form->passwordFieldRow($form, 'password'); ?>

    <?php echo $form->textFieldRow($profile, 'nombre'); ?>

    <?php if(extension_loaded('gd') && Yum::module('registration')->enableCaptcha): ?>

		<div class="row">

			<?php echo CHtml::activeLabelEx($form,'verifyCode'); ?>

			<div>

			<?php $this->widget('CCaptcha'); ?>

			<?php echo CHtml::activeTextField($form,'verifyCode'); ?>

			</div>

			<p class="hint">

			<?php echo Yum::t('Please enter the letters as they are shown in the image above.'); ?>

			<br/><?php echo Yum::t('Letters are not case-sensitive.'); ?></p>

		</div>

	<?php endif; ?>

	<?php echo CHtml::label('acepto la política de privacidad', 'politica'); ?>

	<?php echo CHtml::checkBox('politica'); ?>

 

</fieldset>

 

<div class="form-actions">

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

    <?php $this->widget('bootstrap.widgets.BootButton', array('buttonType'=>'reset', 'icon'=>'remove', 'label'=>'Reset')); ?>

</div>

 

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

By changing the widget class to CActiveForm everything works (changing calls textFieldRow to textField everything works, but lose Bootstrap interface. Can anyone help me out?

Hi Guys!

I have LESS and BOOTSTRAP here and I’m trying to change the navbar background-color.

How do I do that?

I’ve tried this:


// Import the Bootstrap mixins, operations and functions so that you can use them in this file.

@import "../protected/extensions/bootstrap/lib/bootstrap/less/mixins.less";

 


//COLORS

//-------------------


// Custom Blue

// ------------------

@customBlue:            #35478C;

@customBlueHighlight:   #4E7AC7;

 

//Navbar variables

//-------------------

@navbarBackground:                      @customBlue;

@navbarBackgroundHighlight:     @customBlueHighlight;




/*

    RULES

*/


.navbar-inner {

    min-height: @navbarHeight;

    #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground);

}






My compiled CSS was:




.clearfix { *zoom:1; }

.clearfix:before, .clearfix:after {

  display:table;

  content:"";

}

.clearfix:after { clear:both; }

.hide-text {

  font:0 / 0 a;

  color:transparent;

  text-shadow:none;

  background-color:transparent;

  border:0;

}

.input-block-level {

  display:block;

  width:100%;

  min-height:28px;

  -webkit-box-sizing:border-box;

  -moz-box-sizing:border-box;

  -ms-box-sizing:border-box;

  box-sizing:border-box;

}

.navbar-inner {

  min-height:;

  background-color:#4466af;

  background-image:-moz-linear-gradient(top,#4e7ac7,#35478c);

  background-image:-ms-linear-gradient(top,#4e7ac7,#35478c);

  background-image:-webkit-gradient(linear,0 0,0 100%,from(#4e7ac7),to(#35478c));

  background-image:-webkit-linear-gradient(top,#4e7ac7,#35478c);

  background-image:-o-linear-gradient(top,#4e7ac7,#35478c);

  background-image:linear-gradient(top,#4e7ac7,#35478c);

  background-repeat:repeat-x;

  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7ac7', endColorstr='#35478c', GradientType=0);

}



Register order:





	<link rel="stylesheet" type="text/css" href="/css/style.css"/>

	<script src="http://api.html5media.info/1.1.5/html5media.min.js"></script>




	<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<link rel="stylesheet" type="text/css" href="/assets/85335561/css/bootstrap.min.css" />

<link rel="stylesheet" type="text/css" href="/assets/85335561/css/bootstrap-responsive.min.css" />

<link rel="stylesheet" type="text/css" href="/assets/85335561/css/bootstrap-yii.css" />

<script type="text/javascript" src="/assets/2714e111/jquery.js"></script>

<script type="text/javascript" src="/assets/2714e111/jquery.yiiactiveform.js"></script>

<script type="text/javascript" src="/assets/85335561/js/bootstrap.min.js"></script>




And my navbar is gray and not blue.

I need help with this :~

Hi!

The less code compiles without a problem though the value for height is missing; however this will be ignored by the browser. So your problem seems to be the register order. The newly compiled style.css has to come after the bootstrap.min.css. Otherwise it’ll be ignored. Instead of manually adding it in the <head> tag, you need to register the file at the very bottom of your layout file, right before the closing body tag, and it’s going to be add after the bootstrap css.




... all the html code ...


<?php

  Yii::app()->getClientScript()->registerCssFile(Yii::app()->baseUrl.'/css/style.css');

?>  

</body>

</html>	



LESS is MORE.

Cheers.

hi guys!

I have a problem with bootThumbnails.




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

    'dataProvider'=> new CArrayDataProvider($items, array(

	'keyField'=>'MFNID'

    )),

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

    'itemView'=>'_thumb',

    'viewData'=>array('itemsCount'=>count($items)),

)); ?>



_thumb was used from example.

So, sometimes it renders good thumbnail grid, but sometimes i receive grid with empty spots.

How to fix it?

see example in attachment

Those empty spots seem to be empty <li></li> elements. Why are they rendered empty?

Please provide the source code of your customized _thumb.php!

You may want to check and post the $items array, too - just to make sure everything’s okay and as expected: var_dump($items);

fixed my problem

count $index and add divider (clear:both)

thxs!

Hi People,

Can anyone tell me how do I render BootDetailView widget inside any tab render by BootTabbable?

Thanks

Andy

Some call it magic… well it’s quite easy…


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

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

    'attributes'=>array(

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

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

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

    ),

), true),

$this->widget(widgetName, dataArray)

… writes the output directly to the page because the default of the 3rd parameter is false.

$this->widget(widgetName, dataArray, true)

… "captures" the output and returns it as String object.

Here is the class reference.

You can also make use of renderPartial() for long content that needs a lot of additional php code and stuff…


'content'=>$this->renderPartial('filename', array(), true, false),

Put all code/content in ‘filename.php’ pass variables in array() as usual. With some clever logic you could have only 1 extra file for all the tabs’ contents.

Yii-Haw!