For my assignment I'm trying to create a calculator website and in the process of implementing the on and off button of that calculator. I'm working on trying to access the value of the input but keep getting the following error:
assignment_4.html:62 Uncaught TypeError: Cannot read property '0' of
null
at HTMLButtonElement.buttons.(anonymous function).onclick
<script>
let buttons=document.querySelectorAll(".col-6");
for(let i=0; i<buttons.length; i++){
buttons[i].onclick=function(){
console.log(buttons[i].innerHTML);
if(buttons[i].innerHTML=='ON / OFF'){
console.log(document.getElementById("#display").value);
if(document.getElementById("#display").value=='OFF'){
this.value="0";
}
}
else{
}
}
}
</script>
<body>
<div class="container">
<div class="row">
<h1 class="col-12 text-center mt-5">JS Calculator</h1>
</div> <!-- .row -->
<div class="row">
<div id="calculator" class="mt-4 col-12 col-md-6 ml-md-auto mr-md-auto col-lg-4">
<div class="row">
<input type="text" id="display" class="col-12 text-right form-control" value="OFF" disabled>
</div> <!-- .row -->
<div class="row">
<button class="col-6 btn btn-lg btn-outline-dark">ON / OFF</button>
<button class="col-6 btn btn-lg btn-outline-dark">AC</button>
</div> <!-- .row -->
<div class="row">
<button class="col-3 btn btn-lg btn-outline-dark">7</button>
<button class="col-3 btn btn-lg btn-outline-dark">8</button>
<button class="col-3 btn btn-lg btn-outline-dark">9</button>
<button class="col-3 btn btn-lg btn-outline-dark">/</button>
</div> <!-- .row -->
<div class="row">
<button class="col-3 btn btn-lg btn-outline-dark">4</button>
<button class="col-3 btn btn-lg btn-outline-dark">5</button>
<button class="col-3 btn btn-lg btn-outline-dark">6</button>
<button class="col-3 btn btn-lg btn-outline-dark">x</button>
</div> <!-- .row -->
<div class="row">
<button class="col-3 btn btn-lg btn-outline-dark">1</button>
<button class="col-3 btn btn-lg btn-outline-dark">2</button>
<button class="col-3 btn btn-lg btn-outline-dark">3</button>
<button class="col-3 btn btn-lg btn-outline-dark">-</button>
</div> <!-- .row -->
<div class="row">
<button class="col-3 btn btn-lg btn-outline-dark">0</button>
<button class="col-3 btn btn-lg btn-outline-dark">.</button>
<button class="col-3 btn btn-lg btn-outline-dark">=</button>
<button class="col-3 btn btn-lg btn-outline-dark">+</button>
</div> <!-- .row -->
</div> <!-- #calculator -->
</div> <!-- .row -->
</div> <!-- .container -->
You don't need the # when getting the element, since it already expects an ID. Change your call to:
document.getElementById("display")
It seems you be you're confusing jQuery with JS. There is no need to use # when using document.getElementById()
e.g. document.getElementById('display');
You need to change the reference of buttons[i] inside of the callback for the event onclick for "this". The reason is that by the time the event happens, the buttons variable is not defined and therefore its throwing an error.
buttons[i].onclick=function(){
console.log(this.innerHTML);
...
Related
Here is the keyboard I'd like to use:
<div id='key1' class="container my-3" id='first'>
<div class="row btn-group-lg mb-3" role='group'>
<button type="button" class="col-sm btn btn-primary py-3 mr-3" onclick="document.getElementById('empid').value=document.getElementById('empid').value + '1';">1</button>
<button type="button" class="col-sm btn btn-primary py-3 mr-3" onclick="document.getElementById('empid').value=document.getElementById('empid').value + '2';">2</button>
<button type="button" class="col-sm btn btn-primary py-3" onclick="document.getElementById('empid').value=document.getElementById('empid'). value + '3';">3</button>
</div>
<div class="row btn-group-lg mb-3">
<button type="button" class="col-sm btn btn-primary py-3 mr-3" onclick="document.getElementById('empid').value=document.getElementById('empid').value + '4';">4</button>
<button type="button" class="col-sm btn btn-primary py-3 mr-3" onclick="document.getElementById('empid').value=document.getElementById('empid').value + '5';">5</button>
<button type="button" class="col-sm btn btn-primary py-3 " onclick="document.getElementById('empid').value=document.getElementById('empid').value + '6';">6</button>
</div>
<div class="row btn-group-lg mb-3">
<button type="button" class="col-sm btn btn-primary py-3 mr-3" onclick="document.getElementById('empid').value=document.getElementById('empid').value + '7';">7</button>
<button type="button" class="col-sm btn btn-primary py-3 mr-3" onclick="document.getElementById('empid').value=document.getElementById('empid').value + '8';">8</button>
<button type="button" class="col-sm btn btn-primary py-3" onclick="document.getElementById('empid').value=document.getElementById('empid').value + '9';">9</button>
</div>
<div class="row btn-group-lg mb-3">
<button type="button" class="col-sm btn btn-danger py-3 mr-3" onclick="document.getElementById('empid').value=document.getElementById('empid').value.slice(0, -1);">Delete</button>
<button type="button" class="col-sm btn btn-primary py-3 mr-3" onclick="document.getElementById('empid').value=document.getElementById('empid').value + '0';">0</button>
</div>
</div>
As you can see, right now, the inputs get directed to empid only. I'd like to be able to switch to another input field (id='input2') after 6 characters have been typed into empid.
I'm open to using jQuery/Javascript but have no experience with them. Any and all help is appreciated.
Change data-target-input to target your element #input-id or .form-control
i.e. <div data-target-input="#my_input_id"> or <div data-target-input=".my_input_class">
$('[data-toggle="keybrd"]').each(function(){
var btn = $(this).find('.btn'), input = $($(this).data('target-input'));
btn.on('click',function(e){
e.preventDefault();
var val = $(this).text();
if(val=='Delete'){
input.val(input.val().slice(0,-1));
}else{
input.val(input.val()+val);
}
});
});
#import url('https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm p-0 pt-3">
<input class="form-control form-control-lg" type="text" id="empid">
</div>
</div>
</div>
<div class="container my-3" id='first' data-toggle="keybrd" data-target-input="#empid">
<div class="row btn-group-lg mb-3" role='group'>
<button type="button" class="col-sm btn btn-primary py-3 mr-3">1</button>
<button type="button" class="col-sm btn btn-primary py-3 mr-3">2</button>
<button type="button" class="col-sm btn btn-primary py-3">3</button>
</div>
<div class="row btn-group-lg mb-3">
<button type="button" class="col-sm btn btn-primary py-3 mr-3">4</button>
<button type="button" class="col-sm btn btn-primary py-3 mr-3">5</button>
<button type="button" class="col-sm btn btn-primary py-3">6</button>
</div>
<div class="row btn-group-lg mb-3">
<button type="button" class="col-sm btn btn-primary py-3 mr-3">7</button>
<button type="button" class="col-sm btn btn-primary py-3 mr-3">8</button>
<button type="button" class="col-sm btn btn-primary py-3">9</button>
</div>
<div class="row btn-group-lg mb-3">
<button type="button" class="col-sm btn btn-danger py-3 mr-3">Delete</button>
<button type="button" class="col-sm btn btn-primary py-3 mr-3">0</button>
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-sm p-0 pt-3">
<input class="form-control form-control-lg my-input" type="text">
</div>
</div>
</div>
<div class="container my-3" id='second' data-toggle="keybrd" data-target-input=".my-input">
<div class="row btn-group-lg mb-3" role='group'>
<button type="button" class="col-sm btn btn-primary py-3 mr-3">1</button>
<button type="button" class="col-sm btn btn-primary py-3 mr-3">2</button>
<button type="button" class="col-sm btn btn-primary py-3">3</button>
</div>
<div class="row btn-group-lg mb-3">
<button type="button" class="col-sm btn btn-primary py-3 mr-3">4</button>
<button type="button" class="col-sm btn btn-primary py-3 mr-3">5</button>
<button type="button" class="col-sm btn btn-primary py-3">6</button>
</div>
<div class="row btn-group-lg mb-3">
<button type="button" class="col-sm btn btn-primary py-3 mr-3">7</button>
<button type="button" class="col-sm btn btn-primary py-3 mr-3">8</button>
<button type="button" class="col-sm btn btn-primary py-3">9</button>
</div>
<div class="row btn-group-lg mb-3">
<button type="button" class="col-sm btn btn-danger py-3 mr-3">Delete</button>
<button type="button" class="col-sm btn btn-primary py-3 mr-3">0</button>
</div>
</div>
For what you are trying to do I would recommend against JQuery and consider using a simple Javascript framework like Vue to bind data to your inputs. If you are going to use Jquery I would do something like the following.
$(document).ready(function(){
var currentInput = 0;
var totalInputs = 2
$('.number-input')[currentInput].focus();
function nextInput(){
console.log(`currentInput: ${currentInput}`);
if(currentInput < totalInputs - 1){
currentInput++;
$('.number-input')[currentInput].focus();
console.log(`newinput: ${currentInput}`);
} else if(currentInput >= totalInputs -1){
currentInput = 0;
$('.number-input')[currentInput].focus();
console.log(`newinput: ${currentInput}`);
}
}
$('.enter-input').click(nextInput);
})
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class='container'>
<div class='form-inputs row'>
<div class="input-group mb-3">
<span class='input-group-prepend bg-primary p-2'>First</span>
<input class='number-input' type='number'>
</div>
<div class="input-group mb-3">
<span class='input-group-prepend bg-primary p-2'>Second</span>
<input class='number-input' type='number'>
</div>
</div>
<div id='key1' class="my-3" id='first'>
<div class="row btn-group-lg mb-3" role='group'>
<button type="button" class="col-sm btn btn-primary py-3 mr-3" >1</button>
<button type="button" class="col-sm btn btn-primary py-3 mr-3" >2</button>
<button type="button" class="col-sm btn btn-primary py-3 mr-3" >3</button>
</div>
<div class="row btn-group-lg mb-3">
<button type="button" class="col-sm btn btn-primary py-3 mr-3" >4</button>
<button type="button" class="col-sm btn btn-primary py-3 mr-3" >5</button>
<button type="button" class="col-sm btn btn-primary py-3 mr-3" >6</button>
</div>
<div class="row btn-group-lg mb-3">
<button type="button" class="col-sm btn btn-primary py-3 mr-3" >7</button>
<button type="button" class="col-sm btn btn-primary py-3 mr-3" >8</button>
<button type="button" class="col-sm btn btn-primary py-3 mr-3" >9</button>
</div>
<div class="row btn-group-lg mb-3">
<button type="button" class="col-sm btn btn-danger py-3 mr-3" >Delete</button>
<button type="button" class="col-sm btn btn-primary py-3 mr-3" >0</button>
<button type="button" class="col-sm btn btn-success py-3 mr-3 enter-input" >Enter</button>
</div>
</div>
</div>
JQuery can retrieve a collection of tags which can allow you to iterate over them. I gave a common class name to the number inputs I want to iterate over and use that class name to grab a list of the elements so I can simply call .focus on the element.
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>
I tried some of the ways in other questions given for bootstrap modal but I am using bootstrap 3.3.7 this shouldn't be the issue ,but I have no idea why this is happening every time I click on button my jumbotron shrinks !!Any help would be appreciated.
My html code:
<div class="jumbotron">
<div id="post"></div>
<div id="erase" type="submit" data-toggle="modal" data-target="#myModal1" onclick="erase()">
<button class="btn btn-default btn-lg" style="border-radius:100%;width:80px;height:80px;padding:15px">
<img src="/uploads/text.png" style="height:40px;width:40px" />
</button>
</div>
</div>
My javascript function:
function erase(){
$('#post').empty();
$('#post').html('<div class="modal fade" id="myModal1" role="dialog">'+'<div class="modal-dialog">'+'<div class="modal-content">'+
'<div class="modal-header">'+'<button type="button" class="close" data-dismiss="modal">×</button>'+
'<h4 class="modal-title" style="font-family:Pangolin">Post your text</h4>'+' </div>'+'<div class="modal-body">'+
'<div class="media "><div class="media-left"> <form action="porthome_.php" method="post" id="usrform" >'+
'<div class="form-group"><strong><span class="glyphicon glyphicon-pencil" style="font-size:13px" ></span> Write your post:</strong> <input form="usrform" id="textarea1" type="text" class="form-control" name="image" placeholder="Write something" data-toggle="tooltip" data-placement="top" title="Add the image link from any site,if in doubt check out our videos on how to upload images in post.">'+
'</div>'+
'<div class="text-right">'+
'<button type="submit" id="sub"class="btn btn-primary">POST</button>'+
'</div>'+
'</form><div class="media-body"> <h5 class="media-heading" style="color:#3369e8"></h5>'+
'</div>'+
'</div>'+
'</div>'+'<div class="modal-footer">'+
'<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>'+'</div>'+
'</div>'+'</div>'+'</div>');
}
Here you go with a solution https://jsfiddle.net/qc9dgefg/2/
erase = function(){
$('#post').empty();
$('#post').html(
`<div class="modal fade" id="myModal1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="font-family:Pangolin">Post your text</h4>
</div>
<div class="modal-body">
<div class="media">
<div class="media-left">
<form action="porthome_.php" method="post" id="usrform" >
<div class="form-group">
<strong>
<span class="glyphicon glyphicon-pencil" style="font-size:13px" ></span>
Write your post:
</strong>
<input form="usrform" id="textarea1" type="text" class="form-control" name="image" placeholder="Write something" data-toggle="tooltip" data-placement="top" title="Add the image link from any site,if in doubt check out our videos on how to upload images in post.">
</div>
<div class="text-right">
<button type="submit" id="sub"class="btn btn-primary">POST</button>
</div>
</form>
<div class="media-body">
<h5 class="media-heading" style="color:#3369e8"></h5>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>`);
}
<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>
<div class="container">
<div class="jumbotron">
<div id="post"></div>
<div id="erase" type="submit" data-toggle="modal" data-target="#myModal1" onclick="erase()">
<button class="btn btn-default btn-lg" style="border-radius:100%;width:80px;height:80px;padding:15px">
<img src="http://via.placeholder.com/350x150" style="height:40px;width:40px">
</button>
</div>
</div>
</div>
You were missing one of the closing div tag.
I have added the closing div tag along with that I also formatted the dynamic HTML in JavaScript.
I'm making a checkin app for my soccer team. I think I got the buttons programmed properly but I'm having problems storing the value and retrieving the value from mySQL database. Can someone please tell me what piece of code I'm missing? thanks in advance.
<style>
.height {
height: 100px;
}
.height2 {
height: 50px;
text-align: center;
}
.fc {
display: block;
margin-left: auto;
margin-right: auto;
}
body {
font-family: monospace;
font-size: 4em;
font-weight: bold;
}
.btn-xl {
padding: 15px 24px;
font-size: 24px;
line-height: 1.4;
border-radius: 8px;
text-transform: uppercase;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
(function($, window, document) {
$(function() {
// bind to the click event of the checkin button
$('.btn-player-checkin').on('click', function() {
// if the button has the success class - assume the user is checked in
var isCheckedIn = $(this).hasClass('btn-success');
// get the player id from the data attribute
var playerId = $(this).data('player-id');
// call the send function
// sendDataToServer(!isCheckedIn, playerId, $(this)); // send the status we want the player to save (ie. opposite of current);
// if you would like to test the success function without the ajax call, comment out above and uncomment below
if (!isCheckedIn) { // trying to check out
$(this).text('IN');
} else { // checking in
$(this).text('OUT');
}
// cycle classes
$(this).toggleClass('btn-success btn-danger');
});
function sendDataToServer(newStatus, playerId, button) {
$.ajax({
url: 'http://labombafootball.com/checkin', // replace this with the url of the server end point
method: 'POST',
data: {
playerId: playerId,
status: newStatus
} // send this data, on the server you could also record the timestamp of when this occurred
}).done(function() { // if we successfully complete the post
if (newStatus) { // checking in
button.text('OUT');
} else { // trying to check out
button.text('IN');
}
// cycle classes
button.toggleClass('btn-success btn-danger');
}).fail(function() {
// do something if the post fails
});
}
});
}(window.jQuery, window, document));
</script>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 height"><img class="fc" src="images/la-bomba-fc-sm.jpg"></div>
</div>
<div class="row">
<div class="col-xs-8 height2">#2 STEVE B</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="2">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#1 INDER JHOOTY</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="1">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#21 CHRIS NAKATSU</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="21">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#88 NICK MARSHALL</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="88">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#99 TONY YUN</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="99">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#6 DANIELE BORRELLI</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="6">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#11 NITESH SHETTY</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="11">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#45 UDAYA MADANAYAKE</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="45">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#9 ADRIAN PARTYKA</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="9">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#5 PATRICK REGAN</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="5">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#13 RAMEZ ALAM</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="13">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#8 FAIZAN ALAM</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="8">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#33 DAVID CLEBAN</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="33">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#14 VICTOR JIMENEZ</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="14">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#7 HARRY SANDHU</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="7">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#77 JOHN PINEDA</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="77">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#44 DEVON CARNEY</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="44">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#17 JUSTIN CONSTANTINEAU</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="17">OUT</button>
</div>
</div>
</div>
one for add and the other for remove
<div class="to-follow col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
<button id="follow" class="btn btn-default btn-block" data-toggle="button">Follow Activities</button>
<button id="unfollow" class=" hidden btn btn-danger btn-block">Unfollow Activities</button>
</div>
$(".to-follow").click(function() {
$(this).find('button').toggle();
});
how to make the button follow got hide when click, and then the unfollow will show up. the function of button unfollow is same like that
You can do it like below.
$("#follow, #unfollow").click(function () {
$("#follow, #unfollow").toggleClass('hidden');
});
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="to-follow col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
<button id="follow" class="btn btn-default btn-block" data-toggle="button">Follow Activities</button>
<button id="unfollow" class=" hidden btn btn-danger btn-block hidden">Unfollow Activities</button>
</div>
take 2 classes one for showing and another for hiding. Assign show class for the one you want to show by default and another will get hide class.
then your code will do rest of the work.
check the working example below
$(".to-follow").click(function() {
$(this).find('button').toggle();
});
.show{
display:block;
}
.hide{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="to-follow col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
<button id="follow" class="btn btn-default btn-block show" data-toggle="button">Follow Activities</button>
<button id="unfollow" class=" hidden btn btn-danger btn-block hide">Unfollow Activities</button>
</div>
Maybe this is better for you
$("#follow").click(function(){
$(this).html() == "Follow Activities" ? $(this).html("Unfollow Activities") : $(this).html("Follow Activities");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="to-follow col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
<button id="follow" class="btn btn-default btn-block" data-toggle="button">Follow Activities</button>
</div>
The jQuery.toggle()-method changes the style="display:none;"-property of an element adding it or removing it if it exists, I think you just want to change the hidden-class you've added in your second button, then -to do this- you can use:
.toggleClass('hidden'); // instead of .toggle()
Hope it helps.
I used this code to make it so that, when you click Follow Activities that button is disabled and Unfollow Activities is enabled, and vice versa.
$("#unfollow").click(function() {
$("#unfollow").hide()
$("#follow").show();
});
$("#follow").click(function() {
$("#follow").hide()
$("#unfollow").show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="to-follow col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
<button id="follow" class="btn btn-default btn-block" data-toggle="button">Follow Activities</button>
<button id="unfollow" class=" hidden btn btn-danger btn-block">Unfollow Activities</button>
</div>
If you wanted, you could also make it so that the Unfollow Activities button is disabled by default with $("#unfollow").hide() before both of those functions.