How do I save user input per tab created through jQuery? - javascript

I am working on a project that allows a user to check off boxes per tab that is created through jQuery. The tabs are created when a user clicks on the Add button. Jquery generates a set of checkboxes per tab and should allow the user to check any number of boxes they want. The issue is that it looks like they share the same checkboxes since checking boxes in one tab transfers it over to the other tab. Is this something for Session Storage? Do I have to give each checkbox a unique name? Not quite sure if this is possible with just jQuery.
I realize that something like this would be easier using a stack but I am doing this to get a better understanding of that process.
Git: https://github.com/frfroylan/project_checklist
Link: http://proj-checklist.surge.sh/
HTML:
<body onload="script()">
<h1 class="h1-text">Product Checklist</h1>
<div class="wrapper">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist" id="tabs">
<li role="presentation" class="active" id="newTab"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span></li>
</ul>
<!-- Tab info -->
<div class="tab-content" id="tab-content">
<div role="tabpanel" class="tab-pane active" id="new">
<p>New Product name:</p>
<input type="text" placeholder=" Product Name" id="newProductName">
<button onclick="genLi()">Add</button>
</div>
</div>
</div>
</body>
JS:
script = function(){
newTabPanel = $('#new');
newTab = $('#newTab');
genLi = function(){
$('.active').removeClass('active');
var prodName = $('#newProductName').val();
var newLi = $('<li role="presentation" class="active" id="newTab">'+ prodName +'</li>');
newTab.before(newLi);
genNewTabCont(prodName);
}
genNewTabCont = function(id){
var newTabPane = $('HTML_TO_LONG_CHECK_GIT');
newTabPanel.before(newTabPane);
}
}

As you already noticed the error does not occur, when you choose different names. DOM manipulation with jQuery is all about selectors. If you just use an data-attribute or class as selector your jQuery call will affect all matched elements. If you want every tab to be unique, you have to create unique ID selectors or reference them by their position.
$('.tab').eq(position);

Related

Bootstrap change URL when switching tabs (WordPress)

I am new to bootstrap and I am currently playing around with a tab/navigation system. This is what I have for the tabs and the tabs content so far:
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="container">
<ul class="nav nav-tabs">
<li class="nav active">A</li>
<li class="nav">B</li>
<li class="nav">C</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade in active" id="A">Content inside tab A</div>
<div class="tab-pane fade" id="B">Content inside tab B</div>
<div class="tab-pane fade" id="C">Content inside tab C</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
Questions
I want to link directly to one of the tabs. E.g. www.mysite.com/mypage#B or www.mysite.com/mypage/#B should directly open tab B.
When clicking on tabs the URL needs to change to corresponding #id to be able to get to the current tab when refreshing the page.
I got 1 to work by JS and to check for what is after # in the URL and then via php have an if statement on each nav to see if it should be active or not, and same for the tab-panes. However, that doesn't solve problem 2.
How can I solve this nicely? Or should I skip Bootstrap and just create my own navigation with some JS?
A few things first:
You tagged your question with both bootstrap-4 and bootstrap-5, but you're actually using bootstrap-3. My solution below works for Bootstrap 3, but requires changes for Bootstrap 5 that uses the data-bs-target attribute.
The version of jQuery (1.11) you're using is from 2014. I recommend using a more recent version (3.6.3).
To solve problem 1 and 2, add the following jQuery script:
var hash = window.location.hash;
$(".nav-tabs").find("li a").each(function(key, value) {
if (hash === $(value).attr('href')) {
$(value).tab('show');
}
$(value).click(function() {
location.hash = $(this).attr('href');
});
});
This will
Get the hash from the url;
Loop through each nav-tab li a element;
If the hash matches with the href attribute of one of the tabs: show it;
Attaches a click event handler on all tabs, changing the url hash using its href attribute when fired.
For other solutions, take a look at this SO question.

How to link to specific tabs

I'm trying to link to specific tabs using flickity.css http://flickity.metafizzy.co/ and i'm having trouble. I know this has been a common problem using php but is there a known method (possibly using javascript) to create unique urls for all of the tabs created inside of "nav nav-tabs"? I'm trying to use a redirect to link to a certain tab after an event is completed. Using php would there be a way to path to that specific event?
<ul class="nav nav-tabs" id = "tab-style">
<li class = "active"><a data-toggle = "tab" href = "#profile"></li>
<li><a data-toggle = "tab" href = "#friends"></a></li>
<li><a data-toggle = "tab" href = "#games"></a></li>
<li><a data-toggle = "tab" href = "#context"></a></li>
</ul>
That is the code for creating the tabs all inside the same html file. The divs are created in the standard way. For example.
<div id = "profile" class "tab-pane fade in active">
tab contents
</div>
<div id="friends" class="tab-pane fade">
</div>
and so on...

Bootsrap Twitter tabs - go a specific tab when the page reloads

I am developing an web app. In some of the web pages I am using Twitter Bootstrap pane tabs. below is my code.
I am trying to go to a specific tab when the page reloads.
For example: when I am in the www.mywebsite.com/c.html the first active tab is 'bc' when I go to 'cc' and refresh the page it goes back to 'bc'. I want it to stay in 'cc'. I need to be able to do something like this www.mywebsite.com/c.html#cc But this does not work.
I looked at Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload? but could not find an answer that fits my code. I tried changing the class names still no luck.
<div class="wp">
<div class="widget">
<div class="tabs">
<ul class="nav nav-pills nav-justified">
<li class="active">bc</li>
<li>cc</li>
<li>lc</li>
<li>pc</li>
<li>sc</li>
</ul>
</div>
</div>
</div>
<div class="tab-content tab-content-inverse">
<div class="tab-pane active" id="bc">
...
</div>
<div class="tab-pane" id="cc">
...
</div>
<div class="tab-pane" id="lc">
...
</div>
<div class="tab-pane" id="pc">
...
</div>
<div class="tab-pane" id="sc">
...
</div>
</div>
Get the anchor part of the URL by using location.hash in your JavaScript/jQuery.
Then, append it into the following JavaScript:
document.querySelector('.nav li a[href="#lc"]').click();
You'll simply insert the value you pull using location.hash after the href= portion, which will then be clicked.
Change the value in the following Bootply example and run it to see how it works.
BOOTPLY
This worked for me. I changed the class names to tabs and the event to click event
$(document).ready(function () {
var hash = document.location.hash;
var prefix = "tab_";
if (hash) {
$('.tabs a[href=' + hash.replace(prefix, "") + ']').tab('show');
}
$('.tabs a').on('click', function (e) {
window.location.hash = e.target.hash.replace("#", "#" + prefix);
});
});
You can write some code in JavaScript that will run when the page loads and check the # part of the url (window.location.hash). Take a look at the bootstrap website for how to toggle a certain tab: http://getbootstrap.com/javascript/#tabs

Twitter Bootstrap tab shown event not firing on page load

In a page where I have n tabs, and the following script (coffeescript, I checked the compiled javascript and it seems to be ok)...
$ ->
init()
init = ->
$('a[data-toggle="tab"]').on 'shown', (event) ->
shown = event.target
console.log("Showing tab: " + shown)
Now, the 'shown' event does not fire on page load, so for the first tab being shown on the page there's no way to handle this (ie: loading content via xhr)
I tried adding this to the above script, to see if triggering it manually could work:
$('a[data-toggle="tab"]:first').tab 'show'
... but it didn't.
This is the HTML code I use in my view
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">
<%=t :updates, :scope => 'user.profile.sections'%>
</li>
<li class="">
<%=t :activity, :scope => 'user.profile.sections'%>
</li>
<li class="">
<%=t :articles, :scope => 'user.profile.sections'%>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="updates">
</div>
<div class="tab-pane" id="activity">
</div>
<div class="tab-pane" id="articles">
</div>
</div>
</div>
Any clue?
Try leaving the class active off both the tab <li> and the content <div>. One of the first lines of code in the show() method is to short-circuit if the tab being requested is already active.
JSFiddle
You can trigger the event manually when you tell the page to show the tab:
$('a[data-toggle="tab"]:first').trigger("shown.bs.tab");
I think you are mixing Bootstrap Javascript Toggable tabs and Basic tabs managed by classes and id's
In case you want to use Javascript to manage the tabs you should delete the data-toggle="tab" from the anchors on the LI elements as shown here: http://getbootstrap.com/2.3.2/javascript.html#tabs
You can compare the syntax with basics tabs: http://getbootstrap.com/2.3.2/components.html#navs
After my
$("#modal").modal('show');
I added this and it worked just fine:
$('a[data-toggle="tab"]:first').click();

Any suggestions for how to create this type of Navigatio

If you have some Javascript experience I'd appreciate some help.
I'm having an issue trying top create a tabbed menu that looks like the one referenced in the screenshot below.
Basically, because I need to include a full width horizontal line below the heading tab, I am unable to get the first tab to remove it's active styling once one of the other tabs is removed.
So my question is: how can I separate the first tab from the others with a full length without creating two different menus.
BTW, I am aware this is a confusing explanation and understand that I am probably doing this completely wrong, but that's why I am looking for your help :)
Here is how I am trying to do this so far:
<script>
$(document).ready(function() {
/* Tabs Activiation
================================================== */
var tabs = $('.tabs');
tabs.each(function(i) {
//Get all tabs
var tab = $(this).find('> a');
tab.click(function(e) {
//Get Location of tab's content
var contentLocation = $(this).attr('href');
//Let go if not a hashed one
if(contentLocation.charAt(0)=="#") {
e.preventDefault();
//Make Tab Active
tab.removeClass('active');
$(this).addClass('active');
//Show Tab Content & add active class
$(contentLocation).show().addClass('active').siblings().hide().removeClass('active');
}
});
});
});
</script>
<!-- Tabs -->
<nav id="tab-nav" class="grid3">
<h1 class="tabs">
<a class="active" href="#tab1">Tab 1 (H1)</a>
</h1>
</nav>
<hr />
<!-- Tabs -->
<nav id="tab-nav" class="grid3">
<div class="tabs">
Tab 2
Tab 3
</div>
</nav>
<!-- Tab Content -->
<ul class="tabs-content grid6">
<li class="active" id="tab1">Tab 1 Content</li>
<li id="tab2">Tab 4 Content</li>
<li id="tab3">Tab3 Content</li>
</ul>
So I made a working model... uses jQuery but not hash tags
http://jsfiddle.net/nenvG/31/
I think it's easier to add content to, wouldn't need to rearrange the html for each of the elements.

Categories

Resources