I was having an issue with rendering a partial view with a combobox widget inside a modal via AJAX. My solution is to alter the partial view rendering call as follows:
public function actionReturnPartialView(){
....
$this->renderPartial('some/view',$data,false,true);
}
The final parameter forces the CController::processOutput() method to be called that inserts the registered client scripts appropriately.
Any other/better ways?
Hi All,
I try to load the content of tab via ajax (uses tbTabs), but it doesn’t work.
Below is my code, please help.
Thanks,
Index.php
<?php
$this->widget('bootstrap.widgets.TbTabs', array(
'type'=>'tabs',
'id' => 'mytab',
'placement'=>'above',
'tabs'=>array(
array('id'=>'tab1','label'=>'t1', 'content'=>'loading....', 'active'=>true),
array('id'=>'tab2','label'=>'t2', 'content'=>'loading...'),
array('id'=>'tab3','label'=>'t3', 'content'=>'Loading..'),
),
'events'=>array('shown'=>'js:loadContent'),
));
?>
<script type="text/javascript">
function loadContent(e){
var tabId = e.target.getAttribute("href");
var ctUrl = '';
if(tabId == '#tab1') {
ctUrl = $this->createUrl('/controller1/action1');
} else if(tabId == '#tab2') {
ctUrl = $this->createUrl('controller2/action2');
} else if(tabId == '#tab3') {
ctUrl = '....';
}
if(ctUrl != '') {
$.ajax({
url : ctUrl,
type : 'POST',
dataType : 'html',
cache : false,
success : function(html)
{
jQuery(tabId).html(html);
},
error:function(){
alert('Request failed');
}
});
}
preventDefault();
return false;
}
action1 of controller1
public function actionAction1()
{
$this->renderPartial('/viewContentTab1', null, false, true);
}
Is there a way to stop the Bootstrap extension from initializing on specific actions?
edit: removed, see next post
A big problem I’ve hit with this extension is that all AJAX requests are initializing Bootstrap because of preload. This is a huge waste of resources, especially when using AJAX-based file uploaders that split the file into chunks, for large files you could be intializing bootstrap hundreds of times.
I ended up disabling preload and switched the loading of bootstrap to a filter.
Create file: /bootstrap/filters/BootstrapFilter.php
<?php
class BootstrapFilter extends CFilter
{
protected function preFilter($filterChain)
{
Yii::app()->getComponent("bootstrap");
return true;
}
}
Then in a controller, add the new bootstrap filter:
public function filters()
{
return array(
'accessControl',
'postOnly + delete',
array('ext.bootstrap.filters.BootstrapFilter')
);
}
This will load bootstrap for all actions in the controller. If you wanted to disable loading bootstrap for a specific action, do the following:
array('ext.bootstrap.filters.BootstrapFilter - uploadajax')
This functionality could easily be added to the bootstrap Gii CRUD generation, and is a far better way to initialize this extension in my opinion.
Hi Luc,
just find out another way to render content in tab with bootstrap
Thanks,
Daniel
<ul class="nav nav-tabs" id="mytab">
<li><a data-target="#tab1" data-toggle="tab" href="tab1url">Tab1</a></li>
<li><a data-target="#tab2" data-toggle="tab" href="tab2url">Tab2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">...</div>
<div class="tab-pane" id="tab2">...</div>
</div>
<script>
$(function() {
$("#mytab").tab(); // initialize tabs
$("#mytab").bind("show", function(e) {
var contentID = $(e.target).attr("data-target");
var contentURL = $(e.target).attr("href");
$(contentID).load(contentURL, function(){
$("#mytab").tab();
});
});
$('#mytab a:first').tab("show");
});
</script>
ok, thank you for the tip.
Hi All,
I got the problem (action doesn’t call) when clicking on “Test Refresh” button to update the cgridview (renderpartial) via ajax with bootstrap tabs.
Both productController (default controller of module "Product") and ProductManagementController are under module "Product"
Seems be something wrong, please help!
Thanks,
Daniel
Here are the code
Index.php (Render Tabs from productController)
<ul class="nav nav-tabs" id="mytab">
<li><a data-target="#productMngt" data-toggle="tab" href="product/ProductManagement">Product Management</a></li>
....
<li><a data-target="#productReport" data-toggle="tab" href="product/productReport">Product Report</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="productMngt">...</div>
...
<div class="tab-pane" id="productReport">...</div>
</div>
<script>
$(function() {
$("#mytab").tab(); // initialize tabs
$("#mytab").bind("show", function(e) {
var contentID = $(e.target).attr("data-target");
var contentURL = $(e.target).attr("href");
$(contentID).load(contentURL, function(){
$("#mytab").tab(); // reinitialize tabs
});
});
$('#mytab a:first').tab("show"); // Load and display content for first tab
});
</script>
** productManagement.php (view)
<?php
$this->widget('bootstrap.widgets.TbButton', array(
'buttonType'=>'ajaxButton',
'type'=>'normal',
'label'=>'Test Refresh',
'url' => $this->createUrl('ProductManagement/RefreshProductGrid'),
'ajaxOptions'=>array(
'success'=>'refreshGrid'
),
));
?>
<?php
$this->widget('bootstrap.widgets.TbGridView',array(
...
'id'=>'listProduct',
...
?>
<script>
function refreshGrid(data) {
//display data returned from action
$("#results").html(data);
// refresh your grid
$.fn.yiiGridView.update('listProduct');
}
</script>
*** ProductManagementController
public function actionIndex()
{
...
$this->renderPartial('/Product/productManagement', array(
...
'model' => $model, false, true)
);
}
public function actionRefreshProductGrid() {
echo "OK";
}
Hi Daniel,
try with:
'url' => $this->createUrl('/Product/ProductManagement/RefreshProductGrid'),
(I’m doing like this with an edit form inside a tab, and also within a module …)
Hi Luc,
I tried with code but it’s still not working
'url' => $this->createUrl('/Product/ProductManagement/RefreshProductGrid'),
But when I change renderpartial to render of ProductManagementController, it’s work. Seems be it’s related to renderpartial.
public function actionIndex()
{
...
$this->render('/Product/productManagement', array(
...
'model' => $model)
);
}
I create a thumbnail with Yii Bootstrap and its default template is "item/pager"…How can i display all item in just 1 page (no pager)?
To remove the pager set enablePagination to false.
To show all items you need to set pageSize of your dataProvider accordingly.
Check out this link for more info.
Version yii-bootstrap-2.0.1.r324.zip problems.
I download the yii-bootstrap-2.0.1.r324.zip and follow the setup guide http://www.cniska.net/yii-bootstrap/setup.html#setup step by step. but the bootstrap css & js not auto register after run :
main.php
<?php
// uncomment the following to define a path alias
// Yii::setPathOfAlias('local','path/to/local-folder');
// This is the main Web application configuration. Any writable
// CWebApplication properties can be configured here.
Yii::setPathOfAlias('bootstrap', dirname(__FILE__).'/../extensions/bootstrap');
return array(
'basePath'=>dirname(__FILE__).DIRECTORY_SEPARATOR.'..',
'name'=>'My Web Application',
// preloading 'log' component
'preload'=>array('log'),
// autoloading model and component classes
'import'=>array(
'application.models.*',
'application.components.*',
),
'modules'=>array(
// uncomment the following to enable the Gii tool
/*
'gii'=>array(
'class'=>'system.gii.GiiModule',
'password'=>'Enter Your Password Here',
// If removed, Gii defaults to localhost only. Edit carefully to taste.
'ipFilters'=>array('127.0.0.1','::1'),
),
*/
),
// application components
'components'=>array(
'user'=>array(
// enable cookie-based authentication
'allowAutoLogin'=>true,
),
'bootstrap'=>array(
'class'=>'bootstrap.components.Bootstrap',
),
// uncomment the following to enable URLs in path-format
/*
'urlManager'=>array(
'urlFormat'=>'path',
'rules'=>array(
'<controller:\w+>/<id:\d+>'=>'<controller>/view',
'<controller:\w+>/<action:\w+>/<id:\d+>'=>'<controller>/<action>',
'<controller:\w+>/<action:\w+>'=>'<controller>/<action>',
),
),
*/
'db'=>array(
'connectionString' => 'sqlite:'.dirname(__FILE__).'/../data/testdrive.db',
),
// uncomment the following to use a MySQL database
/*
'db'=>array(
'connectionString' => 'mysql:host=localhost;dbname=testdrive',
'emulatePrepare' => true,
'username' => 'root',
'password' => '',
'charset' => 'utf8',
),
*/
'errorHandler'=>array(
// use 'site/error' action to display errors
'errorAction'=>'site/error',
),
'log'=>array(
'class'=>'CLogRouter',
'routes'=>array(
array(
'class'=>'CFileLogRoute',
'levels'=>'error, warning',
),
// uncomment the following to show log messages on web pages
/*
array(
'class'=>'CWebLogRoute',
),
*/
),
),
),
// application-level parameters that can be accessed
// using Yii::app()->params['paramName']
'params'=>array(
// this is used in contact page
'adminEmail'=>'webmaster@example.com',
),
);
but, the widget code is right, any help?
full html source code after run:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="en" />
<!-- blueprint CSS framework -->
<link rel="stylesheet" type="text/css" href="/css/screen.css" media="screen, projection" />
<link rel="stylesheet" type="text/css" href="/css/print.css" media="print" />
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="/css/ie.css" media="screen, projection" />
<![endif]-->
<link rel="stylesheet" type="text/css" href="/css/main.css" />
<link rel="stylesheet" type="text/css" href="/css/form.css" />
<script type="text/javascript" src="/assets/7930ee21/jquery.js"></script>
<title>My Web Application</title>
</head>
<body>
<div class="container" id="page">
<div id="header">
<div id="logo">My Web Application</div>
</div><!-- header -->
<div id="mainmenu">
<ul id="yw1">
<li class="active"><a href="/index.php?r=site/index">Home</a></li>
<li><a href="/index.php?r=site/page&view=about">About</a></li>
<li><a href="/index.php?r=site/contact">Contact</a></li>
<li><a href="/index.php?r=site/logout">Logout (demo)</a></li>
</ul> </div><!-- mainmenu -->
<!-- breadcrumbs -->
<div id="content">
<div class="navbar navbar-fixed-top"><div class="navbar-inner"><div class="container-fluid"><a class="btn btn-navbar" data-toggle="collapse" data-target="#yii_bootstrap_collapse_0"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a><a href="/site/index" class="brand"><img src="/images/logo.png" width="30" height="30"/></a><div class="nav-collapse" id="yii_bootstrap_collapse_0"><ul id="yw0" class="nav"><li class="active"><a href="/index.php?r=site/index"><i class="icon-home"></i> 首页</a></li></ul></div></div></div></div><h1>Welcome to <i>My Web Application</i></h1>
<p>Congratulations! You have successfully created your Yii application.</p>
<p>You may change the content of this page by modifying the following two files:</p>
<ul>
<li>View file: <code>D:\Cloud\Skydrive\www\projects\blog\protected\views\site\index.php</code></li>
<li>Layout file: <code>D:\Cloud\Skydrive\www\projects\blog\protected\views\layouts\main.php</code></li>
</ul>
<p>For more details on how to further develop this application, please read
the <a href="http://www.yiiframework.com/doc/">documentation</a>.
Feel free to ask in the <a href="http://www.yiiframework.com/forum/">forum</a>,
should you have any questions.</p>
</div><!-- content -->
<div class="clear"></div>
<div id="footer">
Copyright © 2012 by My Company.<br/>
All Rights Reserved.<br/>
Powered by <a href="http://www.yiiframework.com/" rel="external">Yii Framework</a>. </div><!-- footer -->
</div><!-- page -->
<script type="text/javascript">
/*<![CDATA[*/
jQuery(function($) {
jQuery('#yii_bootstrap_collapse_0').collapse({'parent':false,'toggle':false});
});
/*]]>*/
</script>
</body>
</html>
thks!
I was trying the new FormBuilder support - which turned out to generate a submit and reset button which is not working.
This is my basic environment:
[protected/controllers/SiteController.php]
<?php
...
public function actionLogin()
{
Yii::import('bootstrap.form.TbForm');
$form = new TbForm('application.views.site.loginForm', new User('login'));
$this->render('form', array('form' => $form));
}
...
?>
[protected/views/site/loginForm.php]
<?php
'elements' => array(...),
'buttons' => array(
'submit' => array(
'type' => 'submit',
'label' => 'Send',
),
'reset' => array(
'type' => 'reset',
'label' => 'Reset',
),
?>
[protected/views/site/form.php]
<?php echo $form; ?>
[themes/classic/layouts/main.php]
<?php Yii::app()->bootstrap->register(); ?>
<html>
...
</html>
The output of index.php?r=site/login (formatted manually):
<legend>Login</legend>
<label for="User_alias" class="required">Username <span class="required">*</span></label>
<input name="User[alias]" id="User_alias" type="text" />
<label for="User_password" class="required">Password <span class="required">*</span></label>
<input name="User[password]" id="User_password" type="password" />
<div class="form-actions">
<a class="btn">Send</a>
<a class="btn">Reset</a>
</div>
</legend>
The buttons to NOT work… Viewing the documentation these should be <button>-Elements instead of <a>-Elements. (using type => htmlSubmit or type => htmlReset generates the very same output)
What am I doing wrong? Thanks in advance.
(This reply is according to my post above).
I just found out that TbForm unfortunately is incompatible to how CForm works. Attributes are set in an other way.
e.g.: To change the type of a button, one need to set the ‘buttonType’ attribute instead of ‘type’. If you want to set the name attribute of a button you need to set it in the ‘htmlOptions’ attribute instead of beeing able to directly set it via ‘name’.
While I am happy that bootstrap now supports the Form Builder pattern, it would be great if TbForm could work the same way as CForm because the setup is quite unintuitive 
.
Alias "bootstrap.widgets.TbMenu" is invalid. Make sure it points to an existing PHP file and the file is readable.
i am getting this error… please anyone help me
Hi All,
I got the problem about the Modal, the Modal content always display the previous data
Example:
After I added the “product1” by clicking on “Save changes” button, and re-invoke the modal again to add another product. It’s show the “product1” information instead the initial value.
below is my code to try remove the data but it doesn’t work
Currently, I uses yii-bootstrap-1.2.0.r300
Thank you very much for your help!
<div id="addProduct" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" >
<div class="modal-header">
...
</div>
<div class="modal-body">
<div class="control-group">
<label class="control-label" for="product">Product Name</label>
<div class="controls">
<?php echo $form->textField($model,'product',...); ?>
</div>
</div>
...
</div>
<div class="modal-footer">
<button type="button" class="btn" id="save_product">Save changes</button>
...
</div>
</div>
<?php
$this->widget('bootstrap.widgets.TbButton', array(
...
'label'=>'Add Product', // trigger addProduct Modal
'htmlOptions'=>array(
'data-toggle'=>'modal',
'data-target'=>'#addProduct',
),
));
?>
<script>
$("#addProduct").on("hidden", function() {
$ ("#addProduct").removeData ('modal');
});
</script>
Did you solve your problem, I’m having the same issue, my bootstrap.widgets.TbMenu widget is not setting the active property.