Bootstrap Jquery Integration Into Yii

[viveksenreddy]

hii guys ,

I am new to yii framework… so if u can help me with the following problem i would be grateful.

I have this all UI with the help of twitter-bootstrap complete. Now i want to integrate it into yii framework .

while integrating this a problem with jquery has occured.My UI without framework works fine. with all the script tags as follows

[html]<script src="<?php Yii::app()->request->baseUrl?>/assests/js/navigation.js"></script>

<script src="<?php Yii::app()->request->baseUrl?>/assests/js/bootstrap/bootstrap-affix.js"></script>


<script src="<?php Yii::app()->request->baseUrl?>/assests/js/bootstrap/bootstrap-alert.js"></script>


<script src="<?php Yii::app()->request->baseUrl?>/assests/js/bootstrap/bootstrap-tooltip.js"></script>


<script src="<?php Yii::app()->request->baseUrl?>/assests/js/bootstrap/bootstrap-dropdown.js"></script>


<script src="<?php Yii::app()->request->baseUrl?>/assests/js/bootstrap/bootstrap-tab.js"></script>


<script src="<?php Yii::app()->request->baseUrl?>/assests/js/bootstrap/bootstrap-button.js"></script>


<script src="<?php Yii::app()->request->baseUrl?>/assests/js/bootstrap/bootstrap-collapse.js"></script>


<script src="<?php Yii::app()->request->baseUrl?>/assests/js/bootstrap/bootstrap-fileupload.js"></script>


<script src="<?php Yii::app()->request->baseUrl?>/assests/js/bootstrap/bootstrap-inputmask.js"></script>


<script src="<?php Yii::app()->request->baseUrl?>/assests/js/select2/select2.min.js"></script>


<script src="<?php Yii::app()->request->baseUrl?>/assests/js/bootstrap/bootstrap-tagmanager.js"></script>


<script src="<?php Yii::app()->request->baseUrl?>/assests/js/bootstrap/bootstrap-typeahead.js"></script>


<script src="<?php Yii::app()->request->baseUrl?>/assests/js/jquery.form.js"></script>

<script>

       $('.demoTabs a').click(function (e) {


				e.preventDefault();


				$(this).tab('show');


			})

</script>[/html]

when i use the same with yii using the script tags the jquery wasnt functional …(jquery tabs in my case).I have heard the a script should be registered before using it . but wasnt able to follow the usage properly . So i need help with this integration problem. That is how to register scripts instead of using <script tags>

Thank you …

[ricardo.fiorani]

Try this

Yii::app()->clientScript->registerCoreScript('jquery');

[viveksenreddy]

Try this

Yii::app()->clientScript->registerCoreScript('jquery');

thanks for the response…

Is that for jquery library … if yes then how to register other js files and inline scripts…

[seenivasan (Chellamnivas)]

I downloaded the zip file from the site choosing all the components

and extracted in assets folder as bootstrap.

The following two lines will register the all the 13 javascript plugins and necessary css in a view.

<?php

Yii::app()->clientScript->registerScriptFile("assets/bootstrap/js/bootstrap.min.js");

Yii::app()->clientScript->registerCssFile("assets/bootstrap/css/bootstrap.min.css");

?>

Now I can use the bootstrap-tab.js in the following way.

<ul class="nav nav-tabs" id="myTab">

<li class="active"><a href="#home">Home</a></li>

<li><a href="#profile">Profile</a></li>

<li><a href="#messages">Messages</a></li>

<li><a href="#settings">Settings</a></li>

</ul>


<div class="tab-content">

<div class="tab-pane active" id="home">...</div>

<div class="tab-pane" id="profile">...</div>

<div class="tab-pane" id="messages">...</div>

<div class="tab-pane" id="settings">...</div>

</div>


<?php 

Yii::app()->clientScript->registerScript('tabtest','

    $("#myTab a").click(function (e) {

    e.preventDefault();

    $(this).tab("show");

    })

'

);

[viveksenreddy]

Thanks for the reply…

I have a layout file which has the following code

	Yii::app()->clientScript->registerScriptFile(Yii::app()->getBaseUrl() ."/js/bootstrap.min.js");

		Yii::app()->clientScript->registerCssFile(Yii::app()->getBaseUrl()."/css/bootstrap.min.css");


Yii::app()->clientScript->registerScript('jquery-one',

				' $(document).ready(function(){

				

				

				$("#myTab a").click(function (e) {

					e.preventDefault();

					$(this).tab("show");

				});

				

				// Tooltips

				$("[title]").tooltip({

					placement: \'top\'

				});

				

				// Dropdowns

				$(".dropdown-toggle").dropdown();

				

				// Tabs

				

				// Smart Wizard

				$("#wizard").smartWizard();

			});' ,

				CClientScript::POS_HEAD);

I have used the tabs in the view file as follows

[html]<div class="tabbable">

			<ul class="nav nav-tabs" id="myTab">


				<li class="active"><a href="#tab1" data-toggle="tab">Basic Info</a>


				</li>


				<li><a href="#tab2" data-toggle="tab">Courses you tech</a></li>


				<li><a href="#tab3" data-toggle="tab">Job Preferences</a></li>


				<li><a href="#tab6" data-toggle="tab">Course Details</a></li>


				<li><a href="#tab4" data-toggle="tab">Background</a></li>


				<li><a href="#tab5" data-toggle="tab">Contact Adress</a></li>


				<li><a href="#tab7" data-toggle="tab">Upload Resume</a></li>


			</ul>


			<div class="tab-content" style="padding: 0;">


				<div class="tab-pane active" id="tab1">...</div>

for all the tabs

[/html]

Is there any error in code because the tabs arent working