Why the tabs are not shown with AngularJS tabbale directive.
http://plnkr.co/edit/yu0Bh0?p=preview
This is optional part of angularJS, which is used everywhere in the docs (here)
The source of the directive is here.
I don't see any special css in the doc site.
EDIT:
the markup of the plunkr (above) was copied from the doc link given above.
But, when tried with the markup on Angular main page (angularjs.org), it works.
Not sure how it works at doc site.
The working markup has data-toggle attributes, and url fragments to tab pane.
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="">index.html</li>
<li class="">project.js</li>
<li class="">list.html</li>
<li class="active">detail.html</li>
<li class="">mongolab.js</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="project-html">
<h1>project</h1>
</div>
<div class="tab-pane" id="project-js">
<h1>project js</h1>
</div>
<div class="tab-pane" id="list-html">
<h1>project html</h1>
</div>
<div class="tab-pane active" id="detail-html">
</div>
<div class="tab-pane" id="mongolab-js">
</div>
</div>
</div>
There has to be some functionality / code written somewhere that makes the tabs work. Currently, what you have there is just the html and css ( which provides the structure and the styling ) and the behaviour part is missing ( the JS part ).
In angular, this behaviour is custom written and is provided the directive. In bootstap, you need to include the js file ( bootstrap.js ? ). Then there are two ways of making this work. Either include the data-* elements as specified in the docs in their appropriate places or on document ready call something like
$(".tabbable").tabs();
in your JS code somewhere. This is the behavioural pieces that is missing from your plunker.
Related
OK so I am trying to build my own website using HTML templates and well i created a few additional pages of my own to incorporate to the template however and I linked them together well i thought i did and when i click the button linked to my created pages it does nothing it does not even refresh the page.
ill put a snippet of the part of the code i have problems with
<div class="col-lg-4 course_col">
<div class="course">
<div class="course_image"><img src="images/Physics.png" alt=""></div>
<div class="course_body">
<div class="course_title">Physics</div>
<div class="course_info">
<ul>
<li>Edward Nkadimeng</li>
<li>Grade 12</li>
</ul>
</div>
<div class="course_text">
<p>Physics Curriclum.</p>
</div>
</div>
</div>
</div>
I'm new to angular, been trying to fix this for about an hour now but can't get it working. I have some html code:
<li class="notification-dropdown hidden-xs hidden-sm">
<a href="#" class="trigger">
<i class="icon-warning-sign"></i>
<span class="count">8</span>
</a>
<div class="pop-dialog">
<div class="pointer right">
<div class="arrow"></div>
<div class="arrow_border"></div>
</div>
<div class="body">
...
The notification pop-dialog is hidden by default and the following JQuery shows it when the .notification-dropdown is clicked
$(document).on("click", ".notification-dropdown", function (e) {
e.preventDefault();
e.stopPropagation();
// hide all other pop-dialogs
$(".notification-dropdown .pop-dialog").removeClass("is-visible");
$(".notification-dropdown .trigger").removeClass("active");
var $dialog = $(this).children(".pop-dialog");
$dialog.toggleClass("is-visible");
});
For some reason, this code does not work when I put the html into AngularJS's ng-view loaded as a partial into a main html document.
I've already loaded the JQuery lib before Angular.
I've tried to shorten the code for simplicity, I can show more code if needed.
Best try to avoid using jQuery with AngularJS completely. Using both together in this fashion is a common mistake among those new to Angular, coming form a jQuery background. Here is a great answer on that topic: "Thinking in AngularJS" if I have a jQuery background?
You could just use ui bootstrap´s dropdown.
Alternatively, there are ngShow and ngIf. If you still want to use your own css class to hide it, just set the class with ngClass.
Then, you can use ngClick to recieve the click event.
Here is how it would look (HTML only, you dont even have to write any JS for this):
<li class="notification-dropdown hidden-xs hidden-sm" ng-click="showDialog = !showDialog">
<a href="#" class="trigger">
<i class="icon-warning-sign"></i>
<span class="count">8</span>
</a>
<div class="pop-dialog" ng-show="showDialog">
<div class="pointer right">
<div class="arrow"></div>
<div class="arrow_border"></div>
</div>
<div class="body">
<!-- body content -->
</div>
</div>
</li>
EDIT : Added Code
EDIT : working plunk
I love jQueryUI, but the Tabs widget seems to be complicating things too much (jQueryUI version 1.10.3).
I know it can load content on the fly and this is all wonderful, but I have here a very simple structure with a form and some DataTables, more or less like this:
<div id="MyContent">
<ul>
<li>Main Data</li>
<li>Additional data 1</li>
<li>Additional data 2</li>
</ul>
<div id="Form">
<form>...</form>
</div>
<div id="SubTable1">
DataTables 1 goes here
</div>
<div id="SubTable2">
DataTables 2 goes here
</div>
</div>
However, things break horribly when I apply jQueryUI Tabs to this. One reason I already know is the use of <base> tag in my code, which makes Tabs "think" I want to load my content on the fly, instead of simply hiding/showing content already there. But even using a hack to fix this, DataTables doesn't render correctly.
And frankly, I don't want to spend days trying to figure it all out to find a fix.
Instead, I would like to know if there is a way to "switch off" all the fanciness of JqueryUI Tabs, and make it just hide and show my tabs, using whatever is inside each div. Is it possible?
That would solve my problem. If I manually create some buttons and associate a click event that simply do a display: none / display: block to my divs, they work like a charm, including DataTables.
In fact, I'm considering dumping jQueryUI Tabs completely and creating the necessary code to do just that, but I would prefer to use jQueryUI Tabs, if possible.
Thanks a lot in advance!
I will admit this is a bit ham-fisted - but it works, as an example.
HTML:
<div id="MyContent">
<ul>
<li>Main Data</li>
<li>Additional data 1</li>
<li>Additional data 2</li>
</ul>
<div id="Form" class="tab active">
<form>My Form</form>
</div>
<div id="SubTable1" class="tab">
DataTables 1 goes here
</div>
<div id="SubTable2" class="tab">
DataTables 2 goes here
</div>
</div>
CSS:
.tab{display:none}
.active{display:block}
jQuery:
$('#MyContent a').on('click',function(e){
var id = $(this).attr('href')
$('div.active').toggleClass('active');
$(id).toggleClass('active', ($(this).attr('class') != 'active'));
console.log()
})
Working jsFiddle
I'm trying to get tabs working on my app, and following the Bootstrap docs to set them up results in an error: Uncaught TypeError: Object [object Object] has no method 'tab' . I have a JSFiddle of the problem code: Not Working Fiddle
A little more info, which could be relevant: my app, built using Symfony, is compiling Bootstrap with Less, hence needing to use my own Bootstrap resources for the Fiddle example. There could be a problem with the compiling that's causing this, but I do see the Tab javascript code in there...
The HTML:
<div class="container">
<div class="row">
<ul id="campaignTabs" class="nav nav-tabs">
<li class="active">Tasks</li>
<li>Schedule</li>
<li>Upgrade</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="tasks">
Tab 1
</div>
<div class="tab-pane fade" id="schedule">
Tab 2
</div>
<div class="tab-pane fade" id="upgrade">
Tab 3
</div>
</div>
</div>
</div>
The JS:
$('#campaignTabs a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
Any help would be appreciated!
EDIT: My original link was accidentally using links to local resources, so naturally that wasn't working! I updated to using resources from Dropbox, so hopefully those are working now.
You are miss the CSS and JS files.
I update your jsfidle at http://jsfiddle.net/LS37A/3/ to fix your problem by point to official bootstrap CSS and JS at http://getbootstrap.com/getting-started/#download-cdn
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
as answered in the chat, your compiled bootstrap.js is faulty. Either use the prebuilt js in dist folder, or make sure your compiler is including all required .js libs.
Working fiddle Demo with added live links of bootstrap library.
Problem with your fiddle
links are dead see-
http://kiomedia.virt/app_dev.php/js/93eb36e_bootstrap_1.js
http://kiomedia.virt/app_dev.php/css/fabf8b3_bootstrap_1.css
I've got a page with a three column layout (main nav on the left, center console in the middle and specific page options/navigation on the right). Until now I've been using jQuery UI's Tabs widget in the center console area for one of my pages.
What I'd like to do is separate the tabs (putting them in the right hand column) whilst maintaining the contents position in the middle. Like this:
<div id="center_console">
<div class="tabs_container" id="pets"></div>
<div class="tabs_container" id="family"></div>
<div class="tabs_container" id="bio"></div>
</div>
<div id="right_options">
<div id="tabs">
<ul>
<li>Pets</li>
<li>Family</li>
<li>Bio</li>
</ul>
</div>
</div>
So far however I've been unable to find a way to use jQuery UI to do this (it seems to require that tabs and content be placed within the same container).
I think what you need to do is use the 'select' method
So you would bind your links to the tab you want to click
<div id="center_console">
<div class="tabs_container" id="pets"></div>
<div class="tabs_container" id="family"></div>
<div class="tabs_container" id="bio"></div>
</div>
<div id="right_options">
<div id="tabs">
<ul>
<li id="pets">Pets</li>
<li id="family">Family</li>
<li id="bio">Bio</li>
</ul>
</div>
</div>
$(function(){
//set-up your tabs as normal first
$('#bio').click(function(){
$('#center_console').tabs("select", '#bio');
});
});
You may need to have some links set-up as tabs in the center_console as well, but you could use CSS to hide these. I'm not 100% sure on how tabs() works under the hood. I managed to get this working by hacking around the jqueryui demo with firebug, but for some reason I couldn't get the tabs to work in jsfiddle. If you can set-up an example in that I'm happy to edit it to show you what I did
Thanks to a useful comment below, I realised that I'm not following best practice here. I've set-up a fiddle that should achive what you want ( all be it you will need to style it correctly). It can be found here http://jsfiddle.net/GKNC9/1/
thanks