Dynamically adding a tab in bootstrap doesn't show tab-pane content after navigating away and back
Ive seen a lot of similar questions, but nothing that is quite like this (that I can find).
This is in a rails 5 app, bootstrap-sass 3.3, jquery 1.12.4.
$("#opendata").on("click", function(){
$("<div class='tab-pane active' id='summary'>hi</div>").appendTo("#tab-content");
$("<li class='active' data-toggle='tab'><a href='summary' aria-expanded='true'>Summary</a></li>").appendTo("#tabs")
})
I have 2 tabs that are loaded with the page, and need to add other tabs dynamically. The above code works - the tab is added, and the tab-pane contents are displayed. However if I navigate away from that tab, and navigate back (the tab itself will go active) the tab-pane is showing the contents of the previous tab.
I've narrowed the issue down to the dynamic tab-pane not getting an 'active' class put on it. I've tried to do this via console as well, and it doesn't work either.
The main solution I saw for dynamic tabs was to add something like this
jQuery(function($){
$("tabs").on("click", "a", function(e){
e.preventDefault();
$(this).tab('show');
})
})
But to no avail. It seems like the added tab-pane just doesn't respond to anything, console or otherwise. Am I missing something or going about this the wrong way? The tab gets added fine, just when navigating away and back that it doesn't respond.
javascript jquery twitter-bootstrap-3
asked Nov 21 '18 at 20:05
user10567361user10567361
1
add a comment |
Ive seen a lot of similar questions, but nothing that is quite like this (that I can find).
This is in a rails 5 app, bootstrap-sass 3.3, jquery 1.12.4.
$("#opendata").on("click", function(){
$("<div class='tab-pane active' id='summary'>hi</div>").appendTo("#tab-content");
$("<li class='active' data-toggle='tab'><a href='summary' aria-expanded='true'>Summary</a></li>").appendTo("#tabs")
})
I have 2 tabs that are loaded with the page, and need to add other tabs dynamically. The above code works - the tab is added, and the tab-pane contents are displayed. However if I navigate away from that tab, and navigate back (the tab itself will go active) the tab-pane is showing the contents of the previous tab.
I've narrowed the issue down to the dynamic tab-pane not getting an 'active' class put on it. I've tried to do this via console as well, and it doesn't work either.
The main solution I saw for dynamic tabs was to add something like this
jQuery(function($){
$("tabs").on("click", "a", function(e){
e.preventDefault();
$(this).tab('show');
})
})
But to no avail. It seems like the added tab-pane just doesn't respond to anything, console or otherwise. Am I missing something or going about this the wrong way? The tab gets added fine, just when navigating away and back that it doesn't respond.
javascript jquery twitter-bootstrap-3
asked Nov 21 '18 at 20:05
user10567361user10567361
1
Have you tried showing the tabs by directly calling it's id?$('#summary').tab('show').$("tabs")seems like it might be the wrong selector.
– Iskandar Reza Razali
Nov 21 '18 at 23:03
I did - for both the tabs that are loaded with the page, as well as the dynamically added tabs. Didn't work for any of them.
– user10567361
Nov 22 '18 at 15:46
add a comment |
Ive seen a lot of similar questions, but nothing that is quite like this (that I can find).
This is in a rails 5 app, bootstrap-sass 3.3, jquery 1.12.4.
$("#opendata").on("click", function(){
$("<div class='tab-pane active' id='summary'>hi</div>").appendTo("#tab-content");
$("<li class='active' data-toggle='tab'><a href='summary' aria-expanded='true'>Summary</a></li>").appendTo("#tabs")
})
I have 2 tabs that are loaded with the page, and need to add other tabs dynamically. The above code works - the tab is added, and the tab-pane contents are displayed. However if I navigate away from that tab, and navigate back (the tab itself will go active) the tab-pane is showing the contents of the previous tab.
I've narrowed the issue down to the dynamic tab-pane not getting an 'active' class put on it. I've tried to do this via console as well, and it doesn't work either.
The main solution I saw for dynamic tabs was to add something like this
jQuery(function($){
$("tabs").on("click", "a", function(e){
e.preventDefault();
$(this).tab('show');
})
})
But to no avail. It seems like the added tab-pane just doesn't respond to anything, console or otherwise. Am I missing something or going about this the wrong way? The tab gets added fine, just when navigating away and back that it doesn't respond.
javascript jquery twitter-bootstrap-3
asked Nov 21 '18 at 20:05
user10567361user10567361
1
Ive seen a lot of similar questions, but nothing that is quite like this (that I can find).
This is in a rails 5 app, bootstrap-sass 3.3, jquery 1.12.4.
$("#opendata").on("click", function(){
$("<div class='tab-pane active' id='summary'>hi</div>").appendTo("#tab-content");
$("<li class='active' data-toggle='tab'><a href='summary' aria-expanded='true'>Summary</a></li>").appendTo("#tabs")
})
I have 2 tabs that are loaded with the page, and need to add other tabs dynamically. The above code works - the tab is added, and the tab-pane contents are displayed. However if I navigate away from that tab, and navigate back (the tab itself will go active) the tab-pane is showing the contents of the previous tab.
I've narrowed the issue down to the dynamic tab-pane not getting an 'active' class put on it. I've tried to do this via console as well, and it doesn't work either.
The main solution I saw for dynamic tabs was to add something like this
jQuery(function($){
$("tabs").on("click", "a", function(e){
e.preventDefault();
$(this).tab('show');
})
})
But to no avail. It seems like the added tab-pane just doesn't respond to anything, console or otherwise. Am I missing something or going about this the wrong way? The tab gets added fine, just when navigating away and back that it doesn't respond.
javascript jquery twitter-bootstrap-3
javascript jquery twitter-bootstrap-3
asked Nov 21 '18 at 20:05
user10567361user10567361
1
asked Nov 21 '18 at 20:05
user10567361user10567361
1
asked Nov 21 '18 at 20:05
user10567361user10567361
1
asked Nov 21 '18 at 20:05
user10567361user10567361
1
asked Nov 21 '18 at 20:05
user10567361user10567361
1
1
Have you tried showing the tabs by directly calling it's id?$('#summary').tab('show').$("tabs")seems like it might be the wrong selector.
– Iskandar Reza Razali
Nov 21 '18 at 23:03
I did - for both the tabs that are loaded with the page, as well as the dynamically added tabs. Didn't work for any of them.
– user10567361
Nov 22 '18 at 15:46
add a comment |
Have you tried showing the tabs by directly calling it's id?$('#summary').tab('show').$("tabs")seems like it might be the wrong selector.
– Iskandar Reza Razali
Nov 21 '18 at 23:03
I did - for both the tabs that are loaded with the page, as well as the dynamically added tabs. Didn't work for any of them.
– user10567361
Nov 22 '18 at 15:46
Have you tried showing the tabs by directly calling it's id?
$('#summary').tab('show') . $("tabs") seems like it might be the wrong selector.– Iskandar Reza Razali
Nov 21 '18 at 23:03
Have you tried showing the tabs by directly calling it's id?
$('#summary').tab('show') . $("tabs") seems like it might be the wrong selector.– Iskandar Reza Razali
Nov 21 '18 at 23:03
I did - for both the tabs that are loaded with the page, as well as the dynamically added tabs. Didn't work for any of them.
– user10567361
Nov 22 '18 at 15:46
I did - for both the tabs that are loaded with the page, as well as the dynamically added tabs. Didn't work for any of them.
– user10567361
Nov 22 '18 at 15:46
add a comment |
1 Answer
1
active
oldest
votes
so chalk this one up to looking at the same code for too long on my part. The solution is:
$("<li class='active' data-toggle='tab'><a href='#summary' aria-expanded='true'>Summary</a></li>").appendTo("#tabs")
Notice the '#' in front of the href that I forgot in the first post.
answered Nov 23 '18 at 22:23
user10567361user10567361
1
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53419727%2fdynamically-adding-a-tab-in-bootstrap-doesnt-show-tab-pane-content-after-naviga%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
so chalk this one up to looking at the same code for too long on my part. The solution is:
$("<li class='active' data-toggle='tab'><a href='#summary' aria-expanded='true'>Summary</a></li>").appendTo("#tabs")
Notice the '#' in front of the href that I forgot in the first post.
answered Nov 23 '18 at 22:23
user10567361user10567361
1
add a comment |
so chalk this one up to looking at the same code for too long on my part. The solution is:
$("<li class='active' data-toggle='tab'><a href='#summary' aria-expanded='true'>Summary</a></li>").appendTo("#tabs")
Notice the '#' in front of the href that I forgot in the first post.
answered Nov 23 '18 at 22:23
user10567361user10567361
1
add a comment |
so chalk this one up to looking at the same code for too long on my part. The solution is:
$("<li class='active' data-toggle='tab'><a href='#summary' aria-expanded='true'>Summary</a></li>").appendTo("#tabs")
Notice the '#' in front of the href that I forgot in the first post.
answered Nov 23 '18 at 22:23
user10567361user10567361
1
so chalk this one up to looking at the same code for too long on my part. The solution is:
$("<li class='active' data-toggle='tab'><a href='#summary' aria-expanded='true'>Summary</a></li>").appendTo("#tabs")
Notice the '#' in front of the href that I forgot in the first post.
answered Nov 23 '18 at 22:23
user10567361user10567361
1
answered Nov 23 '18 at 22:23
user10567361user10567361
1
answered Nov 23 '18 at 22:23
user10567361user10567361
1
answered Nov 23 '18 at 22:23
user10567361user10567361
1
1
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53419727%2fdynamically-adding-a-tab-in-bootstrap-doesnt-show-tab-pane-content-after-naviga%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Have you tried showing the tabs by directly calling it's id?
$('#summary').tab('show').$("tabs")seems like it might be the wrong selector.– Iskandar Reza Razali
Nov 21 '18 at 23:03
I did - for both the tabs that are loaded with the page, as well as the dynamically added tabs. Didn't work for any of them.
– user10567361
Nov 22 '18 at 15:46