Develop Reference

Dynamically creating tabs in bootstrap, with each new tab having the same default content?

I want to make a page such that I start off with Landing Page and Add Tab[+]. Then if I click add tab, I get a New Tab, with a blank version of the Landing Page Template. I'm using Bootstrap for front end and Python for back end.
https://jsfiddle.net/ub9m4ayq/1/
<form method="post">
<input type="hidden" name="campaign_key" value="{{campaign.campaign}}">
<input type="hidden" name="new" value="{{new}}">
<fieldset>
<div class="nav flex-column nav-pills" id="page-tabs" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="landing-tab" data-toggle="pill" href="#v-pills-landing" role="tab"
aria-controls="v-pills-home" aria-selected="true">Landing Page</a>
<a class="nav-link" id="add-new-tab" data-toggle="pill" href="#v-pills-add-new" role="tab"
aria-controls="v-pills-profile" aria-selected="false">[+] Add Page</a>
</div>
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-landing" role="tabpanel" aria-labelledby="v-pills-landing">
<div class="row">
<div class="col">
<div class="mb-3">
<label class="form-label">Page Title</label>
<input class="form-control" placeholder="Landing Page">
</div>
</div>
<div class="col">
<div class="mb-3">
<label class="form-label">URL</label>
<input class="form-control" type="text" name="page_url" placeholder="/index.html">
</div>
</div>
</div>
<div class="mb-3">
<label class="form-label">Page template (preview)</label>
<textarea id="email_template" name="email_template">{}</textarea>
<div id="email_template_editor" style="height: 300px; width: 100%">
</div>
<script src="/static/ace-builds/src-min-noconflict/ace.js" type="text/javascript"
charset="utf-8"></script>
<script>
var editor_textarea = document.getElementById('email_template');
var editor_elem = document.getElementById('email_template_editor');
editor_textarea.style.display = 'none';
editor_elem.style.border = '1px solid #ccc';
var editor = ace.edit(editor_elem, { wrap: true });
editor.session.setMode("ace/mode/html");
//editor.setTheme("ace/theme/twilight");
editor.session.on('change', function () {
editor_textarea.value = editor.session.getValue();
});
</script>
</div>
</div>
<div class="tab-pane fade" id="v-pills-add-new" role="tabpanel" aria-labelledby="v-pills-add-new">
<p>Hi</p>
</div>
</div>
</fieldset>
<div class="mb-3">
<button class="btn btn-primary">Save</button>
</div>
</form>
Thanks!

Toggle div with same ID through JS

Following is my code. My requirement is to hide all div by default through JS. And when click on the link, it should open relevant div with same id.
<ul class="links">
<li>Search</li>
<li>Share</li>
</ul>
<div id="search" class="search">
<input type="search" placeholder="Search" />
</div>
<div id="del" class="del">
Share me
</div>
$(document).ready(function() {
$("ul.links li a").on("click", function(e) {
e.PreventDefault;
var grabID = $(this).attr( "href" );
$('div' + grabID).toggleClass("hide");
$("div").not('div' + grabID).addClass("hide");
});
});

Don't really need javascript at all for that if you only want the latest link to be the one that is opened:
div { display: none; }
div:target {display:block}
<ul class="links">
<li>Search</li>
<li>Share</li>
</ul>
<div id="search" class="search">
<input type="search" placeholder="Search" />
</div>
<div id="del" class="del">
Share me
</div>
Here is a jquery solution:
$(document).on('click','.links a',function(e){
e.preventDefault();
var href = $(this).attr('href');
$('div').hide();
$(href).show();
});
div {display:none}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="links">
<li>Search</li>
<li>Share</li>
</ul>
<div id="search" class="search">
<input type="search" placeholder="Search" />
</div>
<div id="del" class="del">
Share me
</div>

Hide your all divs on load of your document. And just show the respective div on click of the link.
see the working fiddle-
$(document).ready(function() {
$("div").hide();
$("ul.links li a").on("click", function(e) {
e.PreventDefault;
var grabID = $(this).attr( "href" );
$('div').hide();
$('div' + grabID).show();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="links">
<li>Search</li>
<li>Share</li>
</ul>
<div id="search" class="search">
<input type="search" placeholder="Search" />
</div>
<div id="del" class="del">
Share me
</div>

You can fix this issue by simply adding the class hide to all targets initially like
$('.search, .del').addClass("hide");
$("ul.links li a").on("click", function(e) {
e.preventDefault();
var grabID = $(this).attr("href");
$('div' + grabID).toggleClass("hide");
$("div").not('div' + grabID).addClass("hide");
});
.hide{display:none}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="links">
<li>Search</li>
<li>Share</li>
</ul>
<div id="search" class="search">
<input type="search" placeholder="Search" />
</div>
<div id="del" class="del">
Share me
</div>

Here you go with a solution using pure JavaScript
document.getElementById("search").classList.add("hide");
document.getElementById("del").classList.add("hide");
function clickMethod(e) {
var id = e.getAttribute("href").replace("#", "");
document.getElementById(id).classList.toggle("hide");
}
.hide {
display: none;
}
<ul class="links">
<li>Search</li>
<li>Share</li>
</ul>
<div id="search" class="search">
<input type="search" placeholder="Search" />
</div>
<div id="del" class="del">
Share me
</div>
Define a class name hide which will help you to hide the element and then use the toggle method to toggle the class.
Hope this will help you

how to add and remove attributes click event in jquery?

function myFunction(e) {
var currentTab = $(e).data("target");
$(currentTab).is(':visible') && $(currentTab).hide('slow') || $(currentTab).show('slow').siblings().hide('slow');
if ($(currentTab).is(":hidden")){
$(currentTab).children('input').attr("name", 'filterMode');
$(currentTab).children('input').attr('value', currentTab);
$(currentTab).children('div').children('input:first').attr("name", 'filterBegin');
$(currentTab).children('div').children('input:last').attr("name", 'filterEnd');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-primary searchPanel">
<ul class="nav nav-list panel-tabs filterButtons">
<li>
<button class="btn btn-arya btn-primary" type="button" data-target="#kararNo" data-toggle="tab"
onclick="myFunction(this)">Karar No İle
</button>
</li>
</ul>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane" id="kararNo">
<input type="hidden" class="form-control filterInputs" id="searchInput0" placeholder="Karar No">
<div class="input col-sm-5">
<input type="text" class="form-control filterInputs" id="searchInput1" placeholder="Karar No">
</div>
</div>
</div>
</div>
</div>
This inputs open in first click, second click closes.
I want to delete when I close the added attributes when I open. can you help me please ?

function myFunction(e) {
var currentTab = $(e).data("target");
var filters = ['filterMode', 'filterBegin','filterEnd'];
if($(currentTab).is(':visible')){
$(currentTab).children('input').removeAttr('value');
$(currentTab).find('input').map(function(index,input){
$(input).removeAttr("name");
});
$(currentTab).siblings().find('input').map(function(index,input){
$(input).removeAttr("name");
});
$(currentTab).hide('slow');
}else{
$(currentTab).children('input').attr('value', currentTab);
$(currentTab).find('input').map(function(index,input){
$(input).attr("name", filters[index]);
});
$(currentTab).siblings().find('input').map(function(index,input){
$(input).removeAttr("name");
});
$(currentTab).show('slow').siblings().hide('slow');
}
}
solution of my question, that's it. Thank's a lot

function myFunction(e) {
var currentTab = $(e).data("target");
// check element visible
if($('#kararNo:visible').length == 0){
console.log("visible");
}else{
console.log("hidden");
}
//end element visiblity check
$(currentTab).is(':visible') && $(currentTab).hide('slow') || $(currentTab).show('slow').siblings().hide('slow');
if ($(currentTab).is(":hidden")){
console.log("hidden");
$(currentTab).children('input').attr("name", 'filterMode');
$(currentTab).children('input').attr('value', currentTab);
$(currentTab).children('div').children('input:first').attr("name", 'filterBegin');
$(currentTab).children('div').children('input:last').attr("name", 'filterEnd');
}
}
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var target = $(e.target).attr("href") // activated tab
alert(target);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel panel-primary searchPanel">
<ul class="nav nav-list panel-tabs filterButtons">
<li>
<button class="btn btn-arya btn-primary" type="button" data-target="#kararNo" data-toggle="tab"
onclick="myFunction(this)">Karar No İle
</button>
</li>
</ul>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane" id="kararNo">
<input type="hidden" class="form-control filterInputs" id="searchInput0" placeholder="Karar No">
<div class="input col-sm-5">
<input type="text" class="form-control filterInputs" id="searchInput1" placeholder="Karar No">
</div>
</div>
</div>
</div>
</div>
Just use your known id to check the visibility as follows.
if($('#kararNo:visible').length == 0){
console.log("visible");
}else{
console.log("hidden");
}

jquery ready event is not working when bootstrap modal is called

I have created a jquery menu as I have links in my li, which is generated by a framework and can not have control over it.
I have created the snippet for my code. It works fine on document load. No issues.
I have another bootstrap button for sign in and sign up.
As i click on button it breaks my menu which created with jQuery and show all links without nesting. It seems like it calls another event and it breaks it.
It will be great help if some one help to tackle this sort of issue.
Thanks.
V
$(document).ready(function(){
$.fn.chunk = function(size) {
var arr = [];
for (var i = 0; i < this.length; i += size) {
arr.push(this.slice(i, i + size));
}
return this.pushStack(arr, "chunk", size);
}
var listItems = $("ul.nav li div");
listItems.each(function() {
var contentIds = $(this).attr("id");
if(contentIds != 'homeLink' &&
contentIds != 'jobBoardLink' &&
contentIds != 'contentLink10000001' &&
contentIds != 'contentLink20000002' &&
contentIds != 'contentLink30000003' &&
contentIds != 'contentLink40000004'){
$(this).parent().appendTo('#contentLink10000001');
if(contentIds.indexOf('contentLink2') !== -1){
$(this).parent().appendTo('#contentLink20000002');
}
if(contentIds.indexOf('contentLink3') !== -1){
$(this).parent().appendTo('#contentLink30000003');
}
if(contentIds.indexOf('contentLink4') !== -1){
$(this).parent().appendTo('#contentLink40000004');
}
}
});
$('#contentLink10000001 > a,#contentLink20000002 > a,#contentLink30000003 > a,#contentLink40000004 > a').removeAttr('href');
var liCount = $('#contentLink10000001 li,#contentLink20000002 li,#contentLink30000003 li,#contentLink40000004 li').length;
$("#contentLink10000001 li").chunk(liCount).wrap('<ul class="subContent"></ul>');
$("#contentLink20000002 li").chunk(liCount).wrap('<ul class="subContent"></ul>');
$("#contentLink30000003 li").chunk(liCount).wrap('<ul class="subContent"></ul>');
$("#contentLink40000004 li").chunk(liCount).wrap('<ul class="subContent"></ul>');
});
.navbar-nav> li{
float: left;
position:relative;
}
.navbar-nav> li:hover{
display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<div class="container">
<center>
<button class="btn btn-primary btn-lg" href="#signup" data-toggle="modal" data-target=".bs-modal-sm">Sign In/Register</button>
</center>
</div>
<!-- Modal -->
<div class="modal fade bs-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<br>
<div class="bs-example bs-example-tabs">
<ul id="myTab" class="nav nav-tabs">
<li class="active">Sign In</li>
<li class="">Register</li>
<li class="">Why?</li>
</ul>
</div>
<div class="modal-body">
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in" id="why">
<p>We need this information so that you can receive access to the site and its content. Rest assured your information will not be sold, traded, or given to anyone.</p>
<p></p><br> Please contact <a mailto:href="JoeSixPack#Sixpacksrus.com"></a>JoeSixPack#Sixpacksrus.com</a> for any other inquiries.</p>
</div>
<div class="tab-pane fade active in" id="signin">
<form class="form-horizontal">
<fieldset>
<!-- Sign In Form -->
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="userid">Alias:</label>
<div class="controls">
<input required="" id="userid" name="userid" type="text" class="form-control" placeholder="JoeSixpack" class="input-medium" required="">
</div>
</div>
<!-- Password input-->
<div class="control-group">
<label class="control-label" for="passwordinput">Password:</label>
<div class="controls">
<input required="" id="passwordinput" name="passwordinput" class="form-control" type="password" placeholder="********" class="input-medium">
</div>
</div>
<!-- Multiple Checkboxes (inline) -->
<div class="control-group">
<label class="control-label" for="rememberme"></label>
<div class="controls">
<label class="checkbox inline" for="rememberme-0">
<input type="checkbox" name="rememberme" id="rememberme-0" value="Remember me">
Remember me
</label>
</div>
</div>
<!-- Button -->
<div class="control-group">
<label class="control-label" for="signin"></label>
<div class="controls">
<button id="signin" name="signin" class="btn btn-success">Sign In</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<div class="modal-footer">
<center>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</center>
</div>
</div>
</div>
</div>
<ul class="nav navbar-nav">
<li>
<div class="link" id="contentLink10000001"><ins> </ins>Parent Link 1</div>
</li>
<li>
<div class="link" id="contentLink20000002"><ins> </ins>Parent Link 2</div>
</li>
<li>
<div class="link" id="contentLink1000006"><ins> </ins>Child Link 1</div>
</li>
<li>
<div class="link" id="contentLink1000002"><ins> </ins>Child Link 2</div>
</li>
<li>
<div class="link" id="contentLink1000003"><ins> </ins>Child Link 3</div>
</li>
<li>
<div class="link" id="contentLink1000004"><ins> </ins>Child Link 4</div>
</li>
</li>
<li>
<div class="link" id="contentLink2000014"><ins> </ins>Child Link 5</div>
</li>
<li>
<div class="link" id="contentLink2000015"><ins> </ins>Child Link 6</div>
</li>
<li>
<div class="link" id="contentLink2000016"><ins> </ins>Child Link 7</div>
</li>
<li>
<div class="link" id="contentLink30000003"><ins> </ins>Parent Link 3 </div>
</li>
<li>
<div class="link" id="contentLink3000001"><ins> </ins>Child Link 8</div>
</li>
<li>
<div class="link" id="contentLink40000004"><ins> </ins>Parent Link 4 </div>
</li>
<li>
<div class="link" id="contentLink4000001"><ins> </ins>Child Link 9</div>
</li>
</ul>

document.ready is called when the DOM is loaded, not when the modal is opened.
You want to bind to the modal open event.
$('#modal-content').on('shown.bs.modal', function() {
$("#txtname").focus();
})

I have got my code working by adding this function to my jQuery
$(document).ready(function(){
$.fn.chunk = function(size) {
var arr = [];
for (var i = 0; i < this.length; i += size) {
arr.push(this.slice(i, i + size));
}
return this.pushStack(arr, "chunk", size);
}
buildNavMenus();
$( document ).ajaxComplete(function() {
buildNavMenus();
});
});
in buildNavMenus(); I have added my code to create nested menu.

Bootstrap Center Left Right Div breaks on mobile

I am using bootstrap 3 for my mobile project . I am designing an header . Like
Block1 Block2 Block3
I want block 1 to be left aligned always on all screen size . Similarly the position of block2 and block3 needs to be in same position .
I don't want to collapse my header.
An Header bar like http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_header
in Bootstrap3
Update
<div class="row">
<div class="col-xs-4">
<input type="checkbox" name= "my-checkbox" style="width:100%" checked>
</div>
<div class="col-xs-4">
<h4 class="ag-top-bar-text rm-dots" style="padding:7px">Header Text</h4>
</div>
<div class="col-xs-4 pull-right">
<input type="checkbox" name= "my-checkbox" style="width:100%" checked>
</div>
</div>
</div>
</div>
</nav>

Try this,
HTML
<nav class="navbar navbar-default">
<div class="navbar-collapse">
<ul class="nav navbar-nav">
<li class="pull-left">Block 1</li>
<li>Block 2</li>
<li class="pull-right">Block 3</li>
</ul>
</div>
</nav>
Add some CSS
.navbar-nav {
width: 100%;
text-align: center;
}
.navbar-nav > li {
float: none;
display: inline-block;
}
Demo

If you are using a 12 grid column you should be able to do something like this:
<div class="row">
<div class="col-xs-4">
Block 1
</div>
<div class="col-xs-4">
Block 2
</div>
<div class="col-xs-4">
Block 3
</div>
</div>