The Problem: Im currently building a process simulation. I ve 2 bootstrap taps, one contains an editor(which works fine), the otherone is used to display the content during simulation. JsPlumb is used in order to display different simulation objects. The Problem is that the connections between these objects arent correctly displayed if the tap is switched from the editor to the simulation. They "snap" into the right position after an element is dragged, but I want them to render correctly on the tap switch.
Here is a fiddle: Problem fiddle
Code:
html:
<div class="container-fluid">
<ul class="nav nav-pills">
<li class="active">
<a href="#editor" data-target="#editor" data-toggle="tab">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>Editor
</a>
</li>
<li>
<a href="#display" data-target="#display" data-toggle="tab" id="testlink">
<span class="glyphicon glyphicon-fast-forward" aria-hidden="true"></span> Simulation
</a>
</li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane fade in active" id="editor"> </div>
<div class="tab-pane fade" id="display">
<div class="container center-block content">
<div id="test1" class="window">
a
</div>
<div id="test2" class="window">
b
</div>
</div>
</div>
Javascript:
jsPlumb.ready(function() {
jsPlumb.Defaults.Container = $('#display');
jsPlumb.connect({
source: $('#test1'),
target: $('#test2'),
anchor: "Continuous",
endpoint: "Blank",
detachable: false
});
jsPlumb.draggable($(".window"));
});
What I know: The problem is directly related to the fact that the tab content is not displayed on load, since placing the test divs into the editor tap (which is the active one on load) resolves the problem. fiddle: placing divs in aktive tab
Not an optimal solution but this works:
$('a[data-toggle="tab"]').on('shown.bs.tab', function (event) {
if (event.target.id == 'display-tab') {
jsPlumb.detachEveryConnection();
redrawEveryConnection();
}
});
This code removes every connection on a tab switch to the simulation and calls the redraw function, which has to be implemented depending on the situation (the start and endpoints ve to be saved somewehere e.g. server).
Related
I have a button in my index page when clicking on that button I need to open a specific tab section of another page. the button is on one page and the tab is on the second page.
I have multiple tabs on the 2nd page but only writing here 1 tabs that one I need to open when is clicked from home page
Page 1 - Where I have a button
<p>View Example Worksheet</p>
Page 2 - tabs exist
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link " data-toggle="tab" href="#w1">Worksheet</a>
</li>
<div id="w1" class="container tab-pane fade"><br>
<div class="container">
<div class="row">
<div class="col-12 col-sm-11">
<p class="f-15 gry2">The primary use of this worksheet is to provide a detailed checklist that will facilitate precise development of specifications with drawings, to ensure that all parties are talking about the same type and quality of building.</p>
<p>
</div>
</div>
</div>
</div>
Firstly this is not right way for tabs UI.
But if you want use
<script>
$(document).ready(function(){
$(".btn_readmore2").click(function(){
$("#w1").load("demo_test.txt");
});
});
</script>
other way find function is useful with is visible option you can check.
if($("#w1:visible")){
write you show action code here
}
I have a twitter bootstrap tabs component where i have five tabs.I want 3 of the tabs to be part of a form and the 4th, 5th not be.
So I thought, I'll just wrap the 3 tabs in a form.But it does not work. I have already checked How to wrap a selection of twitter bootstrap tabs as one form? this thread and from the first answer got two issues. Since in the 2nd answer issues are explained but i am expecting better solution using js and without modifying bootstrap core file.
I am using twitter bootstrap 3.3.2. How can I fix this?
Here is the sample code:
<div class="row">
<div class="col-lg-12 animated-panel zoomIn" style="animation-delay: 0.4s;">
<div class="hpanel">
<ul class="nav nav-tabs" data-tabs="tabs">
<li class="active">First</li>
<li class="">Second</li>
<li class="">Third</li>
<li class="">Fourth</li>
<li class="">Fifth</li>
</ul>
<div class="tab-content">
<form>
<div class="tab-pane active" id="tab-1">
<div class="panel-body">First tab fields
</div>
</div>
<div class="tab-pane" id="tab-2">
<div class="panel-body">Second tab fiels
</div>
</div>
<div class="tab-pane" id="tab-3">
<div class="panel-body">Third tab fields
</div>
</div>
</form>
<div class="tab-pane" id="tab-4">
<div class="panel-body">Fourth tab content
</div>
</div>
<div class="tab-pane" id="tab-5">
<div class="panel-body">Fifth tab content
</div>
</div>
</div>
</div>
</div>
</div>
I guess since bootstraps javascript conflicts with this kind of form placing you need to build an (dirty) workaround if you really want to use bootstraps tabs with this kind of form-placing.
You could place inside each of the first three tabs an single form and copy (only for submitting) the content of the other forms into the form submitted.
#lonesomeday mentions a way to intercept submitting forms
So you could do something like
$(document).on('submit', '.tab-pane:lt(3) form', function(e){
e.preventDefault();
$('.tab-pane:lt(3) form').not($(this)).children().clone().addClass('toRemove').hide().appendTo($(this));
this.submit();
$('.toRemove').remove();
});
Note: I did not test the code above
If your submit-button/trigger is outside of the tab-structure you could just copy the contents of the three tabs into an hidden form anywhere on the page and submit this one.
Another way would be to invoke jQuery's ajax without using forms.
I have some href's in my navbar which point to different subsections on a page.
The problem is that if a user clicks the href, the browser points to a wrong position on the page (presumably the location before the ng-repeat has been rendered.)
Here is part of my navbar:
<ul class="nav navbar-nav">
<!--Classes-->
<li class="dropdown">
Classes
<ul class="dropdown-menu" role="menu">
<li>
Class Types
</li>
<li>
Timetables
</li>
<li>
Class Descriptions
</li>
<li>
Instructors
</li>
<li>
Testimonials
</li>
</ul>
</li>
</ul>
And my Classes page:
<h2 class="mai-header-red" id="faq">FAQ</h2>
<h4 class="mai-header-white mai-contact-desc">Some description stuff here
</h4>
<div class="container ng-cloak" ng-controller="faqController">
<div class="panel-group" id="accordion">
<div class="panel panel-default" ng-repeat="faq in questions">
<div class="panel-heading">
<div data-toggle="collapse" data-parent="#accordion" href="#collapse{{$index}}">
<h4 class="panel-title">
{{$index + 1}}. {{faq.question}}
</h4>
</div>
</div>
<div id="collapse{{$index}}" class="panel-collapse collapse">
<div class="panel-body">
<p>{{faq.answer}}</p>
</div>
</div>
</div>
</div>
</div>
<h2 class="mai-header-red" id="testimonials">Testimonials</h2>
Any help would be appreciated.
I don't think you are having issue with ng-repeat but with angular routing system.
Angular routing break default anchor since it use hash to display your path.
Class Types
There is two times hash in your link and I assume your browser just consider the all string as an anchor (or angular route just catch it and prevent anchor effect).
To reproduce the anchor effect, you need to use $location.hash and $anchorScroll
In your app define :
app.run(function($rootScope, $location, $anchorScroll) {
//when the route is changed scroll to the proper element.
$rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
if($location.hash()) $anchorScroll();
});
});
Then you can use links like
Test/Foo
here is my issue:
(Please bear with me if that is easy/stupid question, I am new to Angular :) )
I am loading a page with angular where I have 3 tabs (and so 3 contents) which are using the tabs.
So when I land on my page, all the three tabs and content are generated.
My problem is that when I click on a different tab, the link matches the route, and I guess go back to the controller and render the view again.
My thoughts about this issue is to disable the view when I go to my controller the second time, but can't find any way of doing that.
As said, I am kind of new on angular, so if you think I should do things differently, any comments are welcome :)
Here is my view:
<div class="bs-example bs-example-tabs">
<ul role="tablist" class="nav nav-tabs">
<li role="presentation" class="active">
<a role="tab" data-toggle="tab" href="#tab1">tab1</a>
</li>
<li class="" role="presentation">
<a role="tab" data-toggle="tab" href="#tab2">tab2</a>
</li>
<li class="" role="presentation">
<a role="tab" data-toggle="tab" href="#tab3">tab3</a>
</li>
</ul>
</div>
<div class="tab-content">
<div id="tab1" class="tab-pane fade active in" role="tabpanel">
<div ng-include src="'/path/includes/tab1.htm'"></div>
</div>
<div id="tab2" class="tab-pane fade" role="tabpanel">
<div ng-include src="'/path/includes/tab2.htm'"></div>
</div>
<div id="tab3" class="tab-pane fade" role="tabpanel">
<div ng-include src="'/path/includes/tab3.htm'"></div>
</div>
</div>
And here is where I catch the route in the controller:
.when('/url/:intUserId?', {
controller:'ViewApiCtrl',
templateUrl: '/path/view-api.htm',
})
Let me know if I should post more info about my code !
Thanks a lot
EDIT
Basically I don't want to only return the content of one tab only, or just display one tab at a time.
For this example here, my 3 tabs are one big form, with some inputs on the 3 different tabs.
So it doesnt matter on what tab the user is, he can change a field on one, switch tab, click on save on the second tab and it will save the whole form.
What I am looking for is something like, when I switch tab, let bootstrap handle the display, and I want Angular to not doo anything ( so if it goes to the controller, exit it straight away and dont render/reload the template).
Thanks Michel for the tips, I think it will be useful on my other pages with tabs that are not really linked to each other (I can load one without the others), but for this particular case, I don't think it will suit me :(
On php using Zend Framework, I used to do it that way if that helps:
Zend_Layout::getMvcInstance()->disableLayout();
$this->_helper->viewRenderer->setNoRender( true);
Okay, so with your latest edit, with bootstrap you can do that, and with angular-ui as well!
Just put your tabs inside the form and when you submit all the data is submitted as well!
Is there a way to do the following
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<!-- Tab panes -->
<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 class="tab-pane" id='extra'> .... </div>
</div>
so there is another tab pane called #extra, but I don't want it to have a link as a tab, but I do want it to be toggleable by some other event
as bootstrap tabs.js works from trigger a tab('show') on a link and not on the pane itself, how do I trigger a tab pane without working on a tab?
note: I aware that the basic operation it does it doing a show() and hide() on the tab pane, but I feel that doing all this manually inhibits me from using callbacks, etc
You could add the tab for extras and then just hide it
Add this to your nav-tabs:
<li class="hidden"><a href="#extra" role="tab" data-toggle="tab" >Extra</a></li>
Then activate from somewhere else with JavaScript:
$("#launchExtra").click(function() {
$('#myTab a[href="#extra"]').tab('show')
});
Working demo in jsFiddle
Alternatively, you could just handle the whole thing yourself. The only thing .tab('show') does is remove the active class from all the other nav-tabs and tab-content elements. And then add back the .active class on the appropriate elements.
So first remove all the active elements and then add back the active class:
$("#launchExtra").click(function() {
$(".nav-tabs .active, .tab-content .active").removeClass("active");
$("#extra").addClass("active");
});
Working demo in jsFiddle
Create a link in memory and call the tab function on it.
$('<a data-toggle="tab" data-target="#some-id"></a>').tab("show")
an anchor link is used when you want to navigate. If you dont want to navigate, use a button. But style it like a link.
<ul class="nav nav-tabs">
<li role="presentation" class="active">
<button class="btn btn-sm btn-link">Tab1</button>
</li>
</ul>
nows its a button and will not navigate. Just add any javascript you want to it.
But I recommend to use the anchor. Javascript tabs dont support history back in the browser. And its often tricky to start with ex. tab number 4 selected. I often let every tabpage be an own page. With its own route