Yii Framework Forum: Bootstrap Jquery Integration Into Yii - Yii Framework Forum

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Bootstrap Jquery Integration Into Yii Rate Topic: -----

#1 User is offline   viveksenreddy 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 3
  • Joined: 14-March 13

Posted 14 March 2013 - 10:34 AM

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
<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>


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 ..
0

#2 User is offline   fiorani 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 2
  • Joined: 27-July 12

Posted 14 March 2013 - 11:13 AM

Try this

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

0

#3 User is offline   viveksenreddy 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 3
  • Joined: 14-March 13

Posted 14 March 2013 - 11:17 AM

View Postfiorani, on 14 March 2013 - 11:13 AM, said:

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..
0

#4 User is offline   seenivasan 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 601
  • Joined: 17-June 12
  • Location:Chennai,TamilNadu,India.

Posted 14 March 2013 - 03:15 PM

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");
    })
'
);

0

#5 User is offline   viveksenreddy 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 3
  • Joined: 14-March 13

Posted 15 March 2013 - 12:10 AM

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

<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


Is there any error in code because the tabs arent working
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users