UI-TAB SET == Active tab on button click - javascript

I am working on a front end developement. I have tabs and these tabs are developed using "UI=TABSET"
So My question is , Lets assume i have 2 tabs.. tab1 and tab2. Firstly am on tab1..under tab there is a form where i entered details while moving to tab2..there will be modal popup with 2 buttons cancel and discard changes. If i click cancel..the details i have entered should remain same and stay on the same tab tab1 instead moving to tab2.
tab1 > entered details>click tab2 > modalpop>discard click> stay on tab1
Could you help me how to acheive this.

If you are looking for step like feature you can try this
http://mgonto.github.io/angular-wizard/
As it works if step 1 is finished move to step 2 and so on
Easy to implement

Related

how to know which 'a href' link was clicked from previous webpage?

I'm kind of new here but I've regularly visited Stack Overflow to refer to stuff I've found myself wanting to ask (I tend to find 99.9% of what I'm asking has already been 'asked' on here heh)
but I wonder if this has.
I have a home page which has two div elements (styled as boxes with transition effects that reveal a styled a href link of their own).
basically these are links to tabbed content on the about us page.
first button has been assigned the id of learn-more-1 and the other learn-more-2. Observe below:
<a id="#learn-more-1" href="about-us.html#company-history"/>
<a id="learn-more-1" href="about-us.html#why-choose-us"/>
about-us.html has a tab container with two divs that are assigned the id's:
#company-history and #why-choose-us
and below these we have our content (a heading with the paragraphs containing respective info).
The issue I am having is, when ever we click either href link on the home page (styled as buttons btw..) we reach the about-us page no problem. Its that the tab container HOUSES the tab buttons but we don't see them. The tabbed content that's shown starts from the Heading.
I'm at wits end trying to understand what I'm missing.
My question is, Is there a way for me to use jQuery on the about-us page, i.e:
$document.ready(function() {
* psuedo code here *
if the user arrived here via clicking learn-more-1 button
make the tab button #company-history ACTIVE
and scroll up 50px ( so we can see the damn button as it only shows
us the heading and paragraph content of the tab container..)
else if the user arrived here having clicked learn-more-2 button,
make the tab button #why-choose-us ACTIVE
and scroll up 50px
};
Here's the thing, by default #our-company-history, On the about-us page is active. Meaning if you just visited about-us you will see that the tabbed container shows you the company history. So nothing is hidden.
Is there a way to perhaps, write a function that simply passes an argument to the about-us.html that will allow us to KNOW which a href ref button link was clicked so we can then work with it? Or am I over complicating something really simple here?
Would appreciate some direction here folks cheers!
EDIT:
Marat I HAVE to know if either a href link was clicked in the home page ! This way, and only this way do i show them the tabbed container and the content under the active tab. Make sense ? What you are proposing will fire automatically each time user clicks on the about-us.html page and show the tabbed container by default. NOT what we're gunning for my friend. So you see, I NEED a way to conditionally check IF the user arrived to the about-us.html page via either of those two a href links (from home page) and then open the respective tabbed content accordingly. BTW, currently when either a href link (styled as buttons) gets clicked in the home page, they DO arrive on the about-us page and onto the tabbed container but are unable to see the active and non active tab. This is all thats the issue.
Some code to show you algoritm
$(document).ready(function() {
var tabId = window.location.hash; // get id of destination tab
if(tabId) {
$("#our-company-history").hide(); // hide default tab
var tab = $(tabId); // get destination tab
$(window).scrollTop(tab.offset().top); // scroll to destination tab
tab.show(); // display tab-content
}
});

Adding class active to a known tab

Is it possible to add a class active to a known tab in different page.
When i navigate to page 2 from page 1 i have to make tab 2 as active. I have the tab Id with me.
Can any one tell me what should I do?
My code
<div ng-repeat="t in data" class="time-tab-adspace" ng-class="{'tab-align-center':data.length==2}">
<a class="nav-people-tab text-hover" data-toggle="tab" ng-class="{'nav-people-tab-hover in':seltab=='ticket'+t.id}" ng-click="selecttab(t)"></a>
</div>
In the above code i get what is my selected tab and css like nav-people-tab-hover in gets applied when i click on it. Now when i click on continue below controller button gets executed.
$scope.seltab= tselected; // here I get the selected tab in page 2
$('#?????').addClass("active").show();
window.location.replace("page1");
In the above code What should I write in ????? or some piece of code inorder for me to work this?

Setting active tab current tab

I have three tabs that i'm setting active, due to a certain functionality, the last active tab might not be the one the user on. So at the end of this 3 line code i'm trying to set active the tab that the user is on:
tabPanel.setActiveTab(1);
tabPanel.setActiveTab(2);
tabPanel.setActiveTab(0);
I want to set the current tab the tab that the user is on, (the active tab).
Any help on this?
You can do something like this:
var currentTab = tabPanel.getActiveTab();
tabPanel.setActiveTab(0);
tabPanel.setActiveTab(1);
tabPanel.setActiveTab(2);
tabPanel.setActiveTab(currentTab);

Bootstrap nested tab not displaying until being re-selected

I am designing an admin panel for my application using nested tabs. Here is a basic diagram of how the tabs are set up.
Initially Active and Visible
-1a Initially Active and Visible
-1b Inactive
-1c Inactive
Inactive
-2a Initially Active but NOT Visible
-2b Inactive
-2c Inactive
2a is not visible at first because its parent(2) is not active however 2a does have the tag:
<li class='active'>
When I click on tab 2, tab 2a appears to be active, but the tab-pane is empty. Looking at the page source shows that there is data in the tab-pane for 2a. In order to see it I must click on tab 2b, then click back to tab 2a. My first thought was to remove .active from 2a. This then requires the user to click on 2a to active it instead of de-activating then re-activating to display the content. What I want to happen is for 2a to be immediately visible when tab 2 is clicked. Sorry for the long explanation. Below is the code if that is easier for you to sort through.
I placed the HTML code in this jsfiddle because it was too long to include in the post.
http://jsfiddle.net/vhFFf/
EDIT:
Here is a working fiddle that accurately shows the issue I am trying to correct:
http://jsfiddle.net/52VtD/4862/
Be sure to drag the Result pane as wide as possible so that the content displays as intended. When you click the "Users" button in the most left menu, the initially active pane content is not displayed. You must click "add user" or "trash" then click back to "Users" to see that panes content.
I think you have to manually add the active class to the pane to make it active when you switch to that tab <div class="tab-pane active" id="user"> I updated you FIDDLE
that was the simplest solution I could think of hope it helps.

similar to accordion issue but not using accordion

I have 4 div sections.
<div id= section1> Edit Button
continue button<br/>
</div <br/>
<div id= section2> Edit Button
<br/>
continue button<br/>
</div<br/>
<div id= section3> Edit Button
<br/>
continue button<br/>
</div<br/>
<div id= section4> Edit Button
<br/>
continue button<br/>
</div<br/>
in this scenario when a continue button for a respective section is clicked I will go to the next section where user has to enter inputs in text boxes.
on clicking continue I hide the controls and show a div with all inputs entered by user are written into it.
on clicking edit will show controls section of respective section and hides all other controls sections and edit buttons making user to enter only one section details but nt other sections.
so this happens with each and every section.
my problem is: sections are dynamic.. I can show or hide sections so in that case how do I maintain the continue and edit button functionality?
I need suggestions to achieve this functionality.
Assign a class for edit button and continue button first.
Then write an event handler for the button, hide all first and then make visible the button which was clicked.
Pseudo code:
// hide all button defined by their class name
$(".editButtonClass, .continueButtonClass").hide();
// --> if clicked button is a edit button do your job
if( $(this).hasClass("editButton")) {
// do your job
// --> the button which was clicked should be visible
$(this).show();
}
This is a generic approach so it should work for dynamic elements.

Categories