I'm working on a custom solution, so I thought I would ask the community if anyone has use jQuery Tabs for this purpose before.
The idea is this: I have one main panel, a form with inputs. There are multiple tabs which basically identify different records. All the records will use this form, thats why I just want to load it once, instead of for each tab.
I put a basic example of the direction I want to go. As you can see there are 3 tabs but only one panel. I want to dynamically load content into the_input depending on which tab I click. SO i don't even want to switch the panel, just the selected tab on each click.
I was thinking I need to catch the beforeActivate (http://api.jqueryui.com/tabs/#event-beforeActivate) event, identify which tab was selected, and dynamically alter the 1 visual panel accordingly.
The code isn't really working
jQuery(function($){
$("#tabs").tabs({
beforeActivate(event, ui) {
$('#msg').append('<p>'+ui.newPanel+'</p>');
//I figure what I want to do here is catch the ID of the selected tab, and use that to dynamically load content to the tab.
}
});
function fill_input(selector){
if ( selector == 1 ) {
$('#the_input').val(1);
}else if ( selector == 2 ) {
$('#the_input').val(2);
}else{
$('#the_input').val();
}
}
})
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<div id="tabs">
<ul>
<li>New</li>
<li>record 1</li>
<li>record 2</li>
</ul>
<div id="bol_new">
<form>
<input id="the_input">
</form>
</div>
</div>
<div id="msg">
</div>
You could set the href for each hyperlink to bol_new as under
<ul>
<li>New</li>
<li>record 1</li>
<li>record 2</li>
</ul>
This will set the panel for each tab to the same div with id="bol_new"
Test: https://plnkr.co/edit/EGtCnmNr0c28AaT647SP?p=preview
I would advise just mocking up the tabs with CSS. You can then manipulate the form as needed.
Working example: https://jsfiddle.net/Twisty/j63uvk4q/
HTML
<div id="tabs" class="ui-tabs ui-corner-all ui-widget ui-widget-content">
<ul class="ui-tabs-nav ui-corner-all ui-helper-reset ui-helper-clearfix ui-widget-header">
<li class="ui-tabs-tab ui-corner-top ui-state-default ui-tab ui-tabs-active ui-state-active">
New
</li>
<li class="ui-tabs-tab ui-corner-top ui-state-default ui-tab">
Record 1
</li>
<li class="ui-tabs-tab ui-corner-top ui-state-default ui-tab">
Record 2
</li>
</ul>
<div id="bol_new" class="ui-tabs-panel ui-corner-bottom ui-widget-content">
<form>
Record:
<input id="the_input">
</form>
</div>
</div>
<div id="msg">
</div>
JavaScript
var myData = {
records: {
bol_1: "Homer Simpson",
bol_2: "Marge Simpson"
}
}
$(function() {
$("#tabs .ui-tabs-nav li").click(function(e) {
e.preventDefault();
$("#tabs li.ui-state-active").toggleClass("ui-tabs-active ui-state-active");
$(e.target).parent().addClass("ui-tabs-active ui-state-active");
var id = $(e.target).attr("href").substring(1);
$("#the_input").val(myData.records[id]);
});
$("#tabs .ui-tabs-nav .ui-tabs-tab").hover(function(e) {
$(this).toggleClass("ui-state-hover");
}, function(e) {
$(this).toggleClass("ui-state-hover");
});
});
Related
This is the answer as i was able to solve.
Wanted to change the css class="jsTree-clicked" after the button click event happened from Hyperlink1 to Hyperlink3.
$(document).ready(function () {
//remove Class
$('#myJSTree').find('.jsTree-clicked').removeClass('jsTree-clicked');
//need to do add it to List Item which has Id =3
//check the list item which has id =3 if so add the class to it
// It is not a button click event.
$('#myJSTree li').each(function (i, li) {
console.log('<li> id =' + $(li).attr('id'));
var myIdVal = $(li).attr('id');
if (myIdVal == 3) {
$(this).addClass('jsTree-clicked');
}
});
});
.jsTree-clicked { background-color:red;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myJSTree">
<ul class="nav nav-list">
<li id="1">
<a class="jsTree-clicked" title="Hyperlink1">HyperLink1</a>
</li>
<li id="2">
<a title="Hyperlink2">HyperLink2</a>
</li>
<li id="3">
<a title="Hyperlink3">HyperLink3</a>
</li>
</ul>
</div>
When the Hyperlink is clicked the JsTree adds a class="jsTree-clicked" . When you navigate to a different node it will remove and re-add the same class to the navigated node.
Expected
I want a function to remove [class="jsTree-clicked"] for the given List Item based on ID inside the div.
AND
Re-add [class="jsTree-clicked"] to any ListItem by passing the Key i.e ID .
I hope I was able to explain my problem.
Thank you
My JSTree is a third party open source.
$('.nav-list').on('click', 'li', function() {
$('.nav-list li.active').removeClass('active');
$(this).addClass('active');
});
.active{
background-color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myJSTree">
<ul class="nav nav-list">
<li id="1">
<a title="Hyperlink1">HyperLink1</a>
</li>
<li id="2">
<a title="Hyperlink2">HyperLink2</a>
</li>
<li id="3">
<a title="Hyperlink3">HyperLink3</a>
</li>
</ul>
</div>
Maybe this is helpful to you?
$(function () { $('#myJSTree').jstree(); });
const toggle = (e) => {
if (+$("#test").val()>=10 ) {
e.target.classList.remove("jstree-clicked");
console.log("You entered an invalid number.")
}
console.log(e.target)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<div id="myJSTree">
<ul>
<li id="1">
<a title="Hyperlink1" onclick="toggle(event)">HyperLink1</a>
</li>
<li id="2">
<a title="Hyperlink2">HyperLink2</a>
</li>
<li id="3">
<a title="Hyperlink3">HyperLink3</a>
</li>
</ul>
</div>
<input type="text" value="3" id="test"> < 10
I have simply included a rudimentary toggle() function to demonstrate the point of removing and ading the class name "jsTree-clicked". Please note that JStree assigns other classes to the node dynamically that should be kept there.
It appears to me as if the class jstree-clicked (not: jsTree-clicked) is set by JSTree after an element was clicked. You might have to play aroud with this further to get what you want.
The following might be more what you want. It will "link" to the given href only when the predefined test criteria in checkinput() is met:
$(function () { $('#myJSTree').jstree(); });
const checkinput = (e) => {
if (+$("#test").val()>=10 ) {
console.log("You entered an invalid number.")
} else document.location.href=e.target.href;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<div id="myJSTree">
<ul>
<li id="1">
<a title="Hyperlink1" href="https://jsonplaceholder.typicode.com/users/1" onclick="checkinput(event)">HyperLink1</a>
</li>
<li id="2">
<a title="Hyperlink2" href="https://jsonplaceholder.typicode.com/users/2">HyperLink2</a>
</li>
<li id="3">
<a title="Hyperlink3">HyperLink3</a>
</li>
</ul>
</div>
<input type="text" value="3" id="test"> < 10<br>
HyperLink1 will link to the page "user1" if the input is valid, <br>otherwise an eror will be shown in the console.
I have following bootstrap tabs code which is working when I click on the tab but I want to open the tab when I click on a link which I have created using ul > li > a
but unfortunately it's not working. how can i do this?
html code:
<ul>
<li>tab1</li>
<li>tab2</li>
</ul>
<div class="container">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>I'm in Section 2.</p>
</div>
</div>
</div>
</div>
Js Code:
<script>
// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "tab_";
if (hash) {
$('.nav-tabs a[href='+hash.replace(prefix,"")+']').tab('show');
}
// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash.replace("#", "#" + prefix);
});
</script>
Give your <ul> a class name, like alt-nav-tabs, and then copy the existing navigation JS code. It would look something like this:
HTML:
<!-- Add class to your <ul> element -->
<ul class="alt-nav-tabs">
<li>tab1</li>
<li>tab2</li>
</ul>
<div class="container">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>I'm in Section 2.</p>
</div>
</div>
</div>
</div>
JS:
<script>
// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "tab_";
if (hash) {
$('.nav-tabs a[href='+hash.replace(prefix,"")+']').tab('show');
}
// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash.replace("#", "#" + prefix);
});
// Copied (modify class selector to match your <ul> class): Change hash for page-reload
$('.alt-nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash.replace("#", "#" + prefix);
});
</script>
Persistent tab visibility:
Based on the following comment, you have a tab that is showing no matter which tab is active...
one my give link I see that on a random tab a class called tab-visible
is added automatically.
To resolve this, you can use the following code to remove this class after the HTML loads:
<script>
$(document).ready(function() {
$('#tab-bem-estar-e-ambiente').removeClass('tab-visible');
});
</script>
Place this script in the <head> section, and you should be good to go!
Alternatively...
I noticed you tried to override the original tab-visible behavior. As it is now, the tab with the tab-visible class will never be visible, even when that tab is clicked on and active. If you never intend to use the tab-visible class on your tabs, you could just remove the style from the original CSS document here:
http://futura-dev.totalcommit.com/wp-content/themes/futura-child/style.css?ver=4.9.8
Find that CSS file in your hosted files, search for .tab-visible, and simply remove the class.
This question already has answers here:
How to disable HTML links
(16 answers)
Closed 6 years ago.
I have a simple bootstrap wizard. I want to disable the next navigation link based on some condition. Can someone please tell me how to do it using jQuery or CSS or any other method.
<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul>
<li>Item Search</li>
<li>Item Details</li>
<li>Add SPR</li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<ul class="pager wizard">
<li class="previous first" style="display: none;">First</li>
<li class="previous">Previous</li>
<li class="next last" style="display: none;">Last</li>
<li class="next">Next</li>
</ul>
</div>
Thanks
the below code should work.
Basically it detects when the tab has changed, then it removes any disabled attribute that might exist. Then depending on the tab clicked there is an if statement that sets if the link can be clicked. After that if a disabled link is clicked, simply do nothing.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var target = $(e.target).attr("href");
$(".wizard a").removeAttr("disabled");
if(target == "#tab3"){
$(".next").attr("disabled","disabled");
}
else if(target == "#tab1"){
$(".previous").attr("disabled","disabled");
}
});
$(".wizard a").on("click", function(event){
if ($(this).is("[disabled]")) {
event.preventDefault();
}
});
Update: Use .prop('disabled',true) instead of .attr('disabled','disabled')
without seeing the rest of your code it's challenging to give an ideal answer for your situation, but you should be able to set a Boolean and check that before allowing the Next button.
You can also apply some CSS to make the button LOOK disabled as well.
var nextOK = true;
$('#mybutt').click(function(){
$('#nextA').prop('disabled',true).css({'color':'red'}); //display:none, or whatever.
nextOK = false;
});
$('#nextA').click(function(e){
if (nextOK) window.location.href = 'http://google.com';
else alert('Button disabled');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul>
<li>Item Search
</li>
<li>Item Details
</li>
<li>Add SPR
</li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<ul class="pager wizard">
<li class="previous first" style="display: none;">First
</li>
<li class="previous">Previous
</li>
<li class="next last" style="display: none;">Last
</li>
<li class="next"><a id="nextA" href="#">Next</a>
</li>
</ul>
</div>
<button id='mybutt'>Disable Next Button</button>
With javascript in the browser, you need to wait before the Document Object Model has completely loaded before calling some functions that manipulate the HTML.
You can achieve that by adding a simple document.ready function.
You can then add your condition in the function direcly, or any other code manipulating the HTML.
And lastly, by adding an id to the element you want to use, it would make your life much more easier.
Here is a sample of what it could look like:
document.ready = function() {
//Your condition
if(42 >= 1){
//Select the element and make it point to a void
$('#nextLink').attr('href', 'javascript:void(0)');
}
}
Using javascript:void is a really cross browser solution and works of on older versions (like good old IE).
I have three div elements:
<div class="hide_banner" id="1"><img src="1.png"></div>
<div class="hide_banner" id="2"><img src="2.png"></div>
<div class="hide_banner" id="3"><img src="3.png"></div>
After the page is loaded the user should see the 1st div only. Here is the JS/jQ code (this works perfectly):
$(document).ready(function() {
$('.hide_banner').not('#' + 1).hide(3000);
});
The user can pick another banner by click at links on this page:
<ul class="dropdown-menu" role="menu">
<li>Image 1</li>
<li>Image 2</li>
<li>Image 3</li>
</ul>
After click for example on the 3rd link (href="#3") the div with id="1" should hide and the div with id="3" shold be shown. I have an idea how to maintain the problem combaining with PHP, but i want to solve it with JS/jQ only, so please help! ;) Here is my JS/jQ code which doesn't work:
$(document).ready(function() {
$('.hide_banner').not('#' + 1).hide(3000);
$('a').click(function() {
var id = $(this).attr('href');
if(id == 1) {
$(id).show(3000);
$('#2').hide(3000);
$('#3').hide(3000);
}
if(id == 2) {
$(id).show(3000);
$('#1').hide(3000);
$('#3').hide(3000);
}
if(id == 3) {
$(id).show(3000);
$('#1').hide(3000);
$('#2').hide(3000);
}
});
});
P.s.: I know that it is incorrect to start id's names with a number ;)
Really, no need for if...else logic here, nor any need to specify the first id - just use :first:
$('.hide_banner').not(':first').hide(3000);
$('a').click(function() {
var id = $(this).attr('href');
$(id).show(3000);
$('.hide_banner').not(id).hide(3000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="hide_banner" id="1">1</div>
<div class="hide_banner" id="2">2</div>
<div class="hide_banner" id="3">3</div>
<ul class="dropdown-menu" role="menu">
<li>Image 1</li>
<li>Image 2</li>
<li>Image 3</li>
</ul>
You already know how to use jQuery not, so use it to exclude the selected target:
JSFiddle: http://jsfiddle.net/vk94mmv2/2/
$(document).ready(function () {
$('.hide_banner:not(:first)').hide(3000);
$('a').click(function () {
var id = $(this).attr('href');
var $show = $(id);
$show.show(3000);
$('.hide_banner').not($show).hide(3000);
});
});
Note: you can change the first selector to use the :not(:first) pseudo selectors to select all but the first banner.
I am trying to get values and text from elements in a jQuery accordion. Their are two lists separate lists on the home page wrapped in accordion. You can see the html/javascript below.
<!--Homepage Accordion-->
<div data-role="collapsible-set" data-inset="false" id="homepageAccordian" >
<!-- Crew List -->
<div data-role="collapsible" id="collapsibleCrewList">
<h3>Current Crew</h3>
<ul data-role="listview" data-inset="false" id="crewList">
<li>Crew #1</li>
<li>Crew #2</li>
<li>Crew #3</li>
<li>Crew #4</li>
</ul>
</div>
<script>
$(document).on('pageshow', '#TCHomepage', function(){
//alert('page show event fired');
checkSessionStorage();
});
</script>
<script>
$(document).on('click', '#crewList li a', function () {
clickOnCrewOnHomepage();
});
</script>
<!-- Open Calls -->
<div data-role="collapsible"id="collapsibleOpenCallsList">
<h3>Open Calls</h3>
<ul data-role="listview" data-inset="false" id="openCallsList">
<li>Call #1</li>
<li>Call #2</li>
<li>Call #3</li>
<li>Call #4</li>
</ul>
</div>
<script>
$(document).on('click', '#openCallsList li a', function () {
clickOnTroubleCallOnHomepage();
});
</script>
</div>
My issue is that when you click on one of the links in the accordion I cannot get the value of the link or the text of the link clicked respectively. In my javascript file I am using these functions to try and grab the values or text.
$(this).closest('li').attr('value'); and $(this).text();
My event handler for both accordions is $(document).on('click', '#crewList li a', function () { }); with the ids being different.
The problem is that these functions are not returning anything when the link is clicked.