Bootstrap 3.3.7 button groups - only 1 button can be clicked - javascript

I have a form with 2 button groups, I would like to be able to select an option from both groups.
Here is my code:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<fieldset id="card_type_fieldset">
<legend>Card Type</legend>
<div class="btn-group btn-group-justified" role="group">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Visa</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Master</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Amex</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Discover</button>
</div>
<input type="hidden" name="card_type" value=""/>
</div>
</fieldset>
<fieldset id="ticket_type_fieldset">
<legend>Ticket Type</legend>
<div class="btn-group btn-group-justified" role="group">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Regular</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">VIP</button>
</div>
<input type="hidden" name="ticket_type" value=""/>
</div>
</fieldset>


One option is:
Note: I moved the hidden input outside the div.btn-group to have a nice border radius on the button group.
$('button').click(function() {
//Remove class selected on all buttons
$(this).parents('fieldset').find('button').removeClass('selected');
//Add class the clicked button
$(this).addClass('selected');
//Update the hidden field of the value
$(this).parents('fieldset').find('input[type="hidden"]').val( $(this).text() );
})
.selected {
background-color: red!IMPORTANT;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<fieldset id="card_type_fieldset">
<legend>Card Type</legend>
<div class="btn-group btn-group-justified" role="group">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Visa</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Master</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Amex</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Discover</button>
</div>
</div>
<input type="hidden" name="card_type" value="" />
</fieldset>
<fieldset id="ticket_type_fieldset">
<legend>Ticket Type</legend>
<div class="btn-group btn-group-justified" role="group">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Regular</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">VIP</button>
</div>
</div>
<input type="hidden" name="ticket_type" value="" />
</fieldset>
Using Bootstrap 4
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Active
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio
</label>
</div>
Doc: Radio Buttons


In this case, I would like to use a checkbox.
you can then do some css to fit the checkbox.
your code will be
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<fieldset id="card_type_fieldset">
<legend>Card Type</legend>
<div class="btn-group btn-group-justified" role="group">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Visa</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Master</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Amex</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Discover</button>
</div>
<input type="hidden" name="card_type" value=""/>
</div>
</fieldset>
<fieldset id="ticket_type_fieldset">
<legend>Ticket Type</legend>
<div class="btn-group btn-group-justified" role="group">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Regular</button>
<INPUT TYPE="Checkbox" Name="Browser" ID="C1" Value="Firefox">
</div>
<div class="btn-group" role="group">
<button type="checkbox" class="btn btn-default">VIP</button>
<INPUT TYPE="Checkbox" Name="Browser" ID="C1" Value="Firefox">
</div>
<input type="hidden" name="ticket_type" value=""/>
</div>
</fieldset>
please remember that I have edited only last two buttons.
thanks


To achieve expected result, use below option of using click event and adding class
$("#card_type_fieldset .btn").click(function() {
$("#card_type_fieldset .clicked").removeClass("clicked")
$(this).addClass("clicked");
});
$("#ticket_type_fieldset .btn").click(function() {
$("#ticket_type_fieldset .clicked").removeClass("clicked")
$(this).addClass("clicked");
});
code sample - https://codepen.io/nagasai/pen/yKZZLd
$("#card_type_fieldset .btn").click(function() {
$("#card_type_fieldset .clicked").removeClass("clicked")
$(this).addClass("clicked");
});
$("#ticket_type_fieldset .btn").click(function() {
$("#ticket_type_fieldset .clicked").removeClass("clicked")
$(this).addClass("clicked");
});
.clicked {
color: #333;
background-color: #e6e6e6 !important;
border-color: red !important
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<fieldset id="card_type_fieldset">
<legend>Card Type</legend>
<div class="btn-group btn-group-justified" role="group">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Visa</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Master</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Amex</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Discover</button>
</div>
<input type="hidden" name="card_type" value=""/>
</div>
</fieldset>
<fieldset id="ticket_type_fieldset">
<legend>Ticket Type</legend>
<div class="btn-group btn-group-justified" role="group">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Regular</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">VIP</button>
</div>
<input type="hidden" name="ticket_type" value=""/>
</div>
</fieldset>


I assume you're using buttons as options (unique or multiple), isn't it? Please check:
radio buttons (unique)
checkboxes (multiple)
Then with CSS you can make them appear to be buttons if you want that style that you've shown in your snippet.
Boostrap components: https://getbootstrap.com/docs/3.3/components/
Link with examples: https://www.w3schools.com/bootstrap/bootstrap_forms_inputs.asp

Related

Bootstrap 4 input field in popover

The problem is described in title.
I have a Bootstrap 4 modal and one popover with input field with buttons.
In IE 11 everything is ok, but in Firefox input loses focus.
Popover:
$('[data-toggle="popover"]').popover({
container: "body",
sanitize: false,
content: function () {
return $("#choose-user-popover-content").html();
}
}).on('shown.bs.popover', function () {
$('#ExecutorSNPSearchStr').focus();
});
Popover html:
<div id="choose-user-popover-content" style="display: none;">
<div class="row">
<div class="col">
<div class="input-group">
<input type="text" class="form-control" id="ExecutorSNPSearchStr" aria-describedby="ExecutorSNPSearchStrAddon"/>
<div class="input-group-append" id="ExecutorSNPSearchStrAddon">
<button class="btn btn-sm btn-outline-info w-3" type="button">
<i class="fas fa-search"></i>
</button>
<button class="btn btn-sm btn-outline-danger w-3" type="button">
<i class="fas fa-trash-alt"></i>
</button>
</div>
</div>
</div>
</div>
https://i.stack.imgur.com/rTe2q.png
Can anyone tell what is the reason for this, and how to solve this problem?
UPD: I recreated the situation in a separate html-file.
$(function () {
$('[data-toggle="popover"]').popover({
sanitize: false,
content: function () {
return $("#PopoverContent").html();
}
});
}).on('shown.bs.popover', function () {
$('#ExecutorSNPSearchStr').focus();
});
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<section>
<div id="PopoverContent" style="display: none;">
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username"
aria-label="Recipient's username with two button addons" aria-describedby="button-addon1">
<div class="input-group-append" id="button-addon1">
<button class="btn btn-outline-primary" type="button" data-toggle="popover" data-placement="bottom"
data-html="true" data-title="Search">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</div>
</section>
<section>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Test modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col">
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username"
aria-label="Recipient's username with two button addons"
aria-describedby="button-addon4">
<div class="input-group-append" id="button-addon4">
<button class="btn btn-outline-primary" type="button" data-toggle="popover"
data-trigger="click" data-placement="bottom" data-html="true"
data-title="Search">
<i class="fas fa-user-plus"></i>
</button>
<button class="btn btn-outline-danger" type="button">
<i class="fas fa-user-minus"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</section>
<div class="container">
<div class="row">
<div class="col mt-5">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"></script>

There is a simple mistake, you have tabindex="-1" in your modal so your input focus is removing by it.
For Bootstrap 4
MODAL + INPUT POPOVER
$(function () {
$('[data-toggle="popover"]').popover({
container: 'body',
title: 'Search',
html: true,
placement: 'bottom',
sanitize: false,
content: function () {
return $("#PopoverContent").html();
}
});
})
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<section>
<div id="PopoverContent" class="d-none">
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username"
aria-label="Recipient's username with two button addons" aria-describedby="button-addon1">
<div class="input-group-append" id="button-addon1">
<button class="btn btn-outline-primary" type="button" data-toggle="popover" data-placement="bottom"
data-html="true" data-title="Search">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</div>
</section>
<section>
<div class="modal fade" id="exampleModal" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Test modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col">
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username"
aria-label="Recipient's username with two button addons"
aria-describedby="button-addon4">
<div class="input-group-append" id="button-addon4">
<button class="btn btn-outline-primary" type="button" data-toggle="popover">
<i class="fas fa-user-plus"></i>
</button>
<button class="btn btn-outline-danger" type="button">
<i class="fas fa-user-minus"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</section>
<div class="container">
<div class="row">
<div class="col mt-5">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"></script>
INPUT POPOVER + INSIDE CONTENT
$(function () {
$('[data-toggle="popover"]').popover({
container: 'body',
html: true,
placement: 'bottom',
sanitize: false,
content:
`<div id="PopoverContent">
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username"
aria-label="Recipient's username with two button addons" aria-describedby="button-addon1">
<div class="input-group-append" id="button-addon1">
<button class="btn btn-outline-primary" type="button" data-toggle="popover" data-placement="bottom"
data-html="true" data-title="Search">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</div>`
})
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title">Click to toggle popover</button>
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
INPUT POPOVER + OUTSIDE CONTENT
$(function () {
$('[data-toggle="popover"]').popover({
container: 'body',
html: true,
placement: 'bottom',
sanitize: false,
content: function() {
return $('#PopoverContent').html()
}
})
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<div id="PopoverContent" class="d-none">
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username"
aria-label="Recipient's username with two button addons" aria-describedby="button-addon1">
<div class="input-group-append" id="button-addon1">
<button class="btn btn-outline-primary" type="button" data-toggle="popover" data-placement="bottom"
data-html="true" data-title="Search">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</div>
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title">Click to toggle popover</button>
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
For Bootstrap 5
MODAL + INPUT POPOVER
const popover = new bootstrap.Popover(document.querySelector('.callPopover'), {
container: 'body',
title: 'Search',
html: true,
placement: 'bottom',
sanitize: false,
content() {
return document.querySelector('#PopoverContent').innerHTML;
}
})
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<section>
<div id="PopoverContent" class="d-none">
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username with two button addons" aria-describedby="button-addon1">
<button class="btn btn-outline-primary" type="button" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-html="true" data-bs-title="Search">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</section>
<section>
<div class="modal fade" id="exampleModal" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Test modal</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col">
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username with two button addons" aria-describedby="button-addon4">
<button class="btn btn-outline-primary callPopover" type="button" data-bs-toggle="popover">
<i class="fas fa-user-plus"></i>
</button>
<button class="btn btn-outline-danger" type="button">
<i class="fas fa-user-minus"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</section>
<div class="container">
<div class="row">
<div class="col mt-5">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"></script>
INPUT POPOVER + INSIDE CONTENT
const popover = new bootstrap.Popover(document.querySelector('[data-toggle="popover"]'), {
container: 'body',
title: 'Search',
html: true,
placement: 'bottom',
sanitize: false,
content: `<div id="PopoverContent">
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username"
aria-label="Recipient's username with two button addons" aria-describedby="button-addon1">
<button class="btn btn-outline-primary" type="button" data-toggle="popover" data-placement="bottom"
data-html="true" data-title="Search">
<i class="fas fa-search"></i>
</button>
</div>
</div>`
})
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title">Click to toggle popover</button>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"></script>
INPUT POPOVER + OUTSIDE CONTENT
const popover = new bootstrap.Popover(document.querySelector('.callPopover'), {
container: 'body',
title: 'Search',
html: true,
placement: 'bottom',
sanitize: false,
content() {
return document.querySelector('#PopoverContent').innerHTML;
}
})
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<div id="PopoverContent" class="d-none">
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username"
aria-label="Recipient's username with two button addons" aria-describedby="button-addon1">
<button class="btn btn-outline-primary" type="button" data-toggle="popover" data-placement="bottom"
data-html="true" data-title="Search">
<i class="fas fa-search"></i>
</button>
</div>
</div>
<button type="button" class="btn btn-lg btn-danger callPopover" data-toggle="popover" title="Popover title">Click to toggle popover</button>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"></script>

Coming in late on this, but see https://github.com/twbs/bootstrap/issues/36692#issuecomment-1178261690
In short, newer Bootstrap versions more strictly enforce keeping focus inside the modal. By default, if there's a popover inside the modal, it will generate its own popover container outside of the modal itself - so because of the focus enforcement, it won't be reachable. The solution is to explicitly set the container for the popover not to be "body", but the modal (or an explicit container inside the modal).

I'm late to this thread but I am having the same problem using Bootstrap 5.
I copied the Bootstrap 5 code answer into my own files and it worked fine.
I then changed the html to include a cutdown version of my modal (minus the tabindex=1) and my popover and it still worked.
I then replaced the link to the beta version of Bootstrap 5 with a link to the latest full release and the original problem returned, it's not possible to type anything into the popover input field.
I'm including my code below in case anyone can spot an error but this fieels like a Bootstrap 5 bug.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
</head>
<body>
<section>
<div id="status-form" class="card col-md-6 offset-md-1 d-none mb-2">
<div class="card-header"><h5 id="statusHeader"> Add new status</h5></div>
<div class="card-body">
<input id='popoverStatusID' type='hidden' disabled>
<input id='popoverMode' type='hidden' value='add' disabled>
<div class="mb-2 ms-2">
<input id='popoverStatusEdit' type='text' maxlength='20' class='form-control' value=''>
</div>
<span id='status-message' class='text-danger' value=''></span>
</div>
<div class="card-footer text-muted">
<div class="mt-1 ms-2 mb-2">
<button id="close-status-form" class='btn btn-default btn-sm' type='button'>
Close
</button>
<button id="submit-status-form" class='btn btn-primary btn-sm float-end' type='button'>
Submit
</button>
</div>
</div>
</div>
</section>
<section>
<div id="location-maintenance" class="modal fade" role="dialog" data-bs-backdrop="static">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<form id="location-form"
" method="POST" action="#">
<div class="modal-header d-inline">
<h4 id="location-title" class="ms-2">Edit Location</h4>
<p id="edit-location-name" class="ms-2"></p>
</div>
<div class="col-md-6">
<div class="form-floating">
<select id="location-status-text" class="form-select mb-2" aria-label="Role" placeholder="xxx" name="RoomStatusText">
<option value="17" data-active="1">Active
</option>
<option value="18" data-active="0">Blocked
</option>
<option value="19" data-active="0">ISO
</option>
<option value="268" data-active="0" selected>Onboarding
</option>
</select>
<label class="text-muted">Status</label>
</div>
</div>
<div class="row mb-2">
<div class="col-md-2">
<button class="btn btn-primary status-maintenance" type="button" data-mode="add">Add</button>
</div>
</div>
<div class="modal-footer">
<a class="btn btn-danger btn-delete d-none" role="button" data-bs-toggle="modal" data-bs-target="#modal-delete" title="Delete location" href="#" data-type="location">Delete...<i class="fas fa-times-circle"></i>
</a>
<div>
<button id="cancel-location-edit" type="button" class="btn btn-secondary" data-bs-dismiss="modal">
Cancel
</button>
<button type="submit" class="btn btn-primary">Save</button>
</div>
</div>
<span id="add-message" class="text-success fw-bold"></span>
</form>
</div>
</div>
</div>
</section>
<div class="container">
<div class="row">
<div class="col mt-5">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#location-maintenance">
Launch demo modal
</button>
</div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"></script>
<script>
const popover = new bootstrap.Popover(document.querySelector('.status-maintenance'), {
container: 'body',
title: 'Search',
html: true,
placement: 'bottom',
sanitize: false,
content() {
return document.querySelector('#status-form').innerHTML;
}
})
</script>

Add hours and minutes from button in datatimepicker time picker

I'm using the bootstrap ready date time picker from http://eonasdan.github.io/bootstrap-datetimepicker/ .
$(function () {
$('#datetimepicker3').datetimepicker({
format: 'HH:mm'
});
});
And this:
<div class="row">
<div class='col-sm-1'>
<button type="button" class="btn btn-secondary btn-sm">00h:10m</button>
</div>
<div class='col-sm-1'>
<button type="button" class="btn btn-secondary btn-sm">00h:15m</button>
</div>
<div class='col-sm-1'>
<button type="button" class="btn btn-secondary btn-sm">00h:20m</button>
</div>
<div class='col-sm-1'>
<button type="button" class="btn btn-secondary btn-sm">00h:30m</button>
</div>
<div class='col-sm-1'>
<button type="button" class="btn btn-secondary btn-sm">00h:45m</button>
</div>
<div class='col-sm-1'>
<button type="button" class="btn btn-secondary btn-sm">01h:00m</button>
</div>
</div>
<div class="row">
<div class='col-sm'>
<div class="form-group">
<div class='input-group date' id='datetimepicker3' style="width: 40%">
<input id="timepicker" name="timepicker" type='text' class="form-control"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
</div>
I've 6 buttons that when I click on its time it automatically changes the time in the datapicker.
I can't do the function that updates the time, what an idea?

For setting as text value use $("#datetimepicker3").find("input").val(text); and for setting as time value use $('#datetimepicker3').data("DateTimePicker").date(text);
1. Bind the click event on each button by class.I used .btn as example.
2. Get button text by $(this).text() and replace/remove h and m to set the value as text on datetimepicker.
3. set the value using $("#datetimepicker3").find("input").val(text);
$(".btn").on('click', function(e) {
var text = $(this).text().replace("h","").replace("m","");
$("#datetimepicker3").find("input").val(text);
//$('#datetimepicker3').data("DateTimePicker").date(text);//select based on requirement
});
Working snippet for your code:
$(function () {
$('#datetimepicker3').datetimepicker({
format: 'hh:mm'
});
});
$(".btn").on('click', function(e) {
var text = $(this).text().replace("h","").replace("m","");
//$('#datetimepicker3').data("DateTimePicker").date(text);
$("#datetimepicker3").find("input").val(text);
});
<link rel="stylesheet" type="text/css" media="screen" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href="./css/prettify-1.0.css" rel="stylesheet">
<link href="./css/base.css" rel="stylesheet">
<link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<div class="row">
<div class='col-sm-1'>
<button type="button" id="button1" class="btn btn-secondary btn-sm">00h:10m</button>
</div>
<div class='col-sm-1'>
<button type="button" class="btn btn-secondary btn-sm">00h:15m</button>
</div>
<div class='col-sm-1'>
<button type="button" class="btn btn-secondary btn-sm">00h:20m</button>
</div>
<div class='col-sm-1'>
<button type="button" class="btn btn-secondary btn-sm">00h:30m</button>
</div>
<div class='col-sm-1'>
<button type="button" class="btn btn-secondary btn-sm">00h:45m</button>
</div>
<div class='col-sm-1'>
<button type="button" class="btn btn-secondary btn-sm">01h:00m</button>
</div>
</div>
<div class="row">
<div class='col-sm'>
<div class="form-group">
<div class='input-group date' id='datetimepicker3' style="width: 40%">
<input id="timepicker" name="timepicker" type='text' class="form-control"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
</div>

You can set time with date function:
$('#datetimepicker3').data("DateTimePicker").date("00:25");

Hide elements based on radio buttons

I have this very basic modal.
Basically the modal would change the input (maybe hide the others and show the one selected) so I can search by the desired filter.
How can I change the input based on the option selected? And how do I selected by default the option already in place?
I'm using angularjs.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
<label><b>Account ID </b><a data-toggle="modal" href="#filterModal"><i class="glyphicon glyphicon-filter"></i></a></label>
<div class="row">
<div class="col-xs-7">
<input type="number" placeholder="Search by ID" id="accountID" ng-model="accountID" min="1">
<input type="hidden" ng-model="ticket.ACCOUNT_ID" />
</div>
<div class="col-xs-5">
<button class="btn btn-default w100" type="button">Search</button>
</div>
</div>
</div>
<div id="filterModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<label class="radio">
<input type="radio" value="accountID"> Account ID
</label>
<label class="radio">
<input type="radio" value="customerID"> Customer ID
</label>
<label class="radio">
<input type="radio" value="name"> Name
</label>
<label class="radio">
<input type="radio" value="taxID"> TAX ID
</label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Append a radio button with JQuery with label and have it work?

I have appended a radio button with JQuery, but for some reason it won't let me select the button when clicking the label. It works in HTML if you don't use jquery, so what am I missing:
$(document).on("shown.bs.modal", "#signmein", function(e) {
var html = '<input type="radio" name="colour" value="red" id="colour_red"><label for="colour_red">Red</label><br>';
$('#modalload').append(html);
e.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#signmein">Open Modal</button>
<div class="modal" id="signmein">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header ">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
<h4 class="modal-title">Login</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<div>
<label>The Field Label</label>
<div class="input-append">
<div class="btn-group pull-left" data-toggle="buttons">
<div id="modalload"></div>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer"></div>
</div>
</div>
</div>
https://www.bootply.com/yy3eAGjgGG

There is an event handler somewhere that is preventing the default behavior of your label, I couldn't actually find it but stopping the propagation of the event fised it.
$(document).on("click","#modalload label", function (e) {
e.stopPropagation();
});
$(document).on("shown.bs.modal","#signmein", function (e) {
var html = '<input type="radio" name="colour" value="red" id="colour_red"><label onclick="/*event.stopPropagation();*/" for="colour_red">Red</label><br>';
$('#modalload').html(html);
e.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#signmein">Open Modal</button>
<div class="modal" id="signmein">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header ">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
<h4 class="modal-title">Login</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<div>
<label>The Field Label</label>
<div class="input-append">
<div class="btn-group pull-left" data-toggle="buttons">
<div id="modalload"></div>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>

Bootstrap JS not working on JSP for multiple deleteButtons

Sometimes only Jquery 2.2 works. if I comment it the delete confirmation button wont pop up. 3.1.1 not working it seems for this code.
w3schools and getBootstrap codes has been refered for this
The delete confirmation modal is popping up for only the first entry in the table i.e foreach loop.
Dont know why..
Please help..
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<!--<script src="js/manageBooks.js"></script>-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$("#deleteButton").click(function () {
$("#deleteModal").modal();
});
});
</script>
<title>Manage Books</title>
</head>
<body>
<p style="color:white; font-weight:bold; text-align:right;">pmahend1</p>
<h4>Add book from Google Books</h4>
<form action="manageBooks" method="POST">
<input type="hidden" name="action" value="searchGoogleBook" />
<input type="search" placeholder="Enter Title or Author" name="query" style="width: 450px"/>
<input type="submit" name="Search" value="Search"/>
<p style="color:red;"></p>
</form>
<div id="results"></div>
<br>
<div><a class="btn btn-default btn-info" href="manageBooks?action=addBookPage">Add Books Manually</a></div>
<br>
<h4 class="container">Book Details </h4>
<br>
<div class="container">
<table class="form-group" border="1">
<tr>
<th>Title</th>
<th>Author</th>
<th>Edition</th>
<th>Genre</th>
<th>ISBN10</th>
<th>ISBN13</th>
<th>Update</th>
<th>Delete</th>
</tr>
<tr>
<td>Adultery</td>
<td>Paulo Coelho</td>
<td></td>
<td>Fiction</td>
<td>1101874090</td>
<td>9781101874097</td>
<td>Edit</td>
<!--<td>Delete</td>-->
<td>
<!--<div class="container">-->
<button type="button" class="btn btn-default" id="deleteButton">Delete</button>
<div class="modal fade" id="deleteModal" role="dialog">
<div class="modal-body" style="padding:40px 50px;">
<form role="form" action="manageBooks" method="POST">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Delete Parmanently</h4>
</div>
<div class="modal-body">
<p>Are you sure about this ?</p>
</div>
<div class="modal-footer">
<input type="hidden" name="action" value="deleteBook">
<input type="hidden" name="bookId" value="6" />
<button type="submit" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-danger" id="confirm">Delete</button>
</div>
</form>
</div>
</div>
</div>
<!--</div>-->
</td>
</tr>
<tr>
<td>Twilight's Wrath</td>
<td>SnÃÂÃÂÃÂæbjÃÂÃÂÃÂörn</td>
<td></td>
<td>Fiction</td>
<td>1490735372</td>
<td>9781490735375</td>
<td>Edit</td>
<!--<td>Delete</td>-->
<td>
<!--<div class="container">-->
<button type="button" class="btn btn-default" id="deleteButton">Delete</button>
<div class="modal fade" id="deleteModal" role="dialog">
<div class="modal-body" style="padding:40px 50px;">
<form role="form" action="manageBooks" method="POST">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Delete Parmanently</h4>
</div>
<div class="modal-body">
<p>Are you sure about this ?</p>
</div>
<div class="modal-footer">
<input type="hidden" name="action" value="deleteBook">
<input type="hidden" name="bookId" value="7" />
<button type="submit" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-danger" id="confirm">Delete</button>
</div>
</form>
</div>
</div>
</div>
<!--</div>-->
</td>
</tr>
</table>
</div>
<br>
</body>
</html>

It got fixed automatically. May be I had to restart TomCat server.

Categories