We Keep Coding

Problem with XML HttpRequest and bootstrap modal

I'm filling bootstrap cards with an external json file via XML HttpRequest. This works, all information is shown in the cards.
Now I would like to press "More info" to open a bootstrap modal with more information about the item.
The problem is when I press "More info" the data of the first item1 is always taken.
I know that the solution is that I have to pass the id of the elements to the modal, so that the correct data of the elements can be retrieved.
But I don't understand how I can pass the id of an item to the modal?
JSON File
[{
"id": 1,
"name": "item1",
"price": "€5",
"size": "XS",
"color": "Green"
}, {
"id": 2,
"name": "item2",
"price": "€10",
"size": "S",
"color": "Yellow"
}, {
"id": 3,
"name": "item3",
"price": "€15",
"size": "M",
"color": "Blue"
}, {
"id": 4,
"name": "item4",
"price": "€20",
"size": "L",
"color": "Red"
}, {
"id": 5,
"name": "item5",
"price": "€25",
"size": "XL",
"color": "Gray"
}, {
"id": 6,
"name": "item6",
"price": "€30",
"size": "XXL",
"color": "Black"
}]
JS script of my program
<script>
const divRes = document.querySelector('#divResult');
myRequest = () => {
let xhr = new XMLHttpRequest();
xhr.open('GET', 'files/elements.json', true);
xhr.send();
xhr.onload = function() {
if (xhr.readyState === xhr.DONE) {
if (xhr.status != 200) {
divRes.innerHTML = `Error ${xhr.status}: ${xhr.statusText}`;
} else {
const arrResponse = JSON.parse(xhr.responseText);
divRes.innerHTML = createHTMLCard(arrResponse);
}
}
};
xhr.onerror = function() {
divRes.innerHTML = "Request failed";
};
}
createHTMLCard = (arrObj) => {
let res = '';
for (let i = 0; i < arrObj.length; i++) {
res +=
`<div class="col-lg-4 col-md-6 col-sm-12">
<div class="card m-2">
<div class="card-body">
<h5 class="card-title">${arrObj[i].name}</h5>
<p><strong>Prijs:</strong> ${arrObj[i].price}</p>
<button id="moreInfo" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">More info</button>
</div>
</div>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">${arrObj[i].name}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p><strong>Price:</strong> ${arrObj[i].price}</p>
<p><strong>Size:</strong> ${arrObj[i].size}</p>
<p><strong>Color:</strong> ${arrObj[i].color}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>`;
}
return res;
}
window.addEventListener('load', myRequest);
</script>
Bootstrap cards
Bootstrap modal

the problem is that the button refers to a html id. In this case every Button has the target exampleModal
<button [..] data-bs-target="#exampleModal">More info</button>
So you need to create for every button a diffrent target and add something like #exampleModal-"+${arrObj[i].id}+"
Same you need to do on the modal class where the button refers.
<div class="modal fade" id="exampleModal-"+${arrObj[i].id}+" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">`

Bootstrap modal not showing when click on pie chart slice

<script>
$(document).ready(function(){
//get the pie chart canvas
var cData = JSON.parse(`<?php echo $chart_data; ?>`);
var data = {
// labels: cData.label,
datasets: [{
label: "Users Count",
data: cData.data,
backgroundColor: [
"#FF0000",
"#FFFF00",
"#008000",
],
borderColor: [
"#FF0000",
"#FFFF00",
"#008000",
],
borderWidth: [1, 1, 1]
}]
};
var options = {
responsive: true,
title: {
display: true,
position: "top",
text: "All Subject Progress",
fontSize: 18,
fontColor: "#111"
},
legend: {
display: true,
position: "bottom"
// labels: {
// fontColor: "#333",
// fontSize: 16
// }
}
};
var canvas = document.getElementById("pie-chart");
var ctx = canvas.getContext("2d");
var myNewChart = new Chart(ctx, {
type: 'pie',
data: data
});
canvas.onclick = function(evt) {
var activePoints = myNewChart.getElementsAtEvent(evt);
if (activePoints[0]) {
var chartData = activePoints[0]['_chart'].config.data;
var idx = activePoints[0]['_index'];
var label = chartData.labels[idx];
var value = chartData.datasets[0].data[idx];
var url = "http://example.com/?label=" + label + "&value=" + value;
//console.log(url);
//alert(url);
$("#myChartmodal").modal("show");
}
};
});
</script>
<div id="myChartmodal" class="modal fade" 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">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
In this code I am creating pie-chart where it working perfectly. Now, I want to show bootstrap modal when I canvas.onclick. Here, What happen when I click on canvas.onclick only alert message are showing right now but $("#myChartmodal").modal("show"); is not working I don't know why. So, How can I open bootstrap modal after click on every slice of pie-chart? Please help me.
Thank You

Your show modal code should work as shown below, just need to include the bootstrap libraries as shown below
$(function(){
$('show').on('click', function(){
$('#myChartmodal').modal('show');
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div id="myChartmodal" class="modal fade" 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">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<input type="button" value="Show Popup" id="show" data-toggle="modal" data-target="#myChartmodal">

How to clear an input field in Javascript / Jquery

I am using Typeahead Jquery plugin. Each time I click on the button a Bootstrap modal will be shown and I can select multiple options inside my input.
my problem is :
When I close the modal and reopen it the previous selected values are still shown inside the input. I need to empty cache each time and reload my page so that next time the input will be empty.
I used different ideas when the modal is closed it will reset the input to empty but still not working.
here my ideas :
$('.typeahead').typeahead().bind('typeahead:closed', function () {
$(this).val("");
});
or
$("#myinput").val('');
Any suggestions please ? Here is my code. Thank you for your help.
$(document).ready(function() {
var dataDefaultColumns = [{
"name": "country",
"id": "country",
"type": "Shipment"
}, {
"name": "customer name",
"id": "customer name",
"type": "Shipment"
}, {
"name": "order number",
"id": "order number",
"type": "Serial"
}, {
"name": "line number",
"id": "line number",
"type": "Serial"
}];
typeof $.typeahead === 'function' && $.typeahead({
input: ".js-typeahead-input",
minLength: 0,
maxItem: false,
hint: true,
highlight: true,
searchOnFocus: true,
cancelButton: true,
mustSelectItem: true,
backdropOnFocus: true,
group: {
key: "type",
template: function(item) {
var type = item.type;
return type;
}
},
emptyTemplate: 'no result for {{query}}',
groupOrder: ["Shipment", "Serial"],
display: ["name"],
correlativeTemplate: true,
dropdownFilter: [{
key: 'type',
template: '<strong>{{type}}</strong> Report',
all: 'All Reports'
}],
multiselect: {
matchOn: ["id"],
data: function() {
var deferred = $.Deferred();
return deferred;
}
},
template: '<span>' +
'<span class="name">{{name}}</span>' +
'</span>',
source: {
groupName: {
data: dataDefaultColumns
}
}
});
$("#mybutton").click(function(){
$("#myModal").modal('show'); });
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-typeahead/2.10.2/jquery.typeahead.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-typeahead/2.10.6/jquery.typeahead.js"></script>
<button type="button" id="mybutton" class="btn btn-primary" data-target="#myModal">Click Me
</button>
<div class="modal fade" id="myModal" role="dialog" tabindex="-1">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times </button>
<h4 class="modal-title">Default</h4>
</div>
<div class="modal-body">
<div class="typeahead__container">
<div class="typeahead__field">
<div class="typeahead__query">
<input id="myinput"
class="js-typeahead-input"
name="input[query]"
type="search"
placeholder="Search"
autofocus
autocomplete="on">
</div>          
</div>
</div>
</div>
</div>
</div>
</div>

Displaying images when user clicks?

I have created a model for viewing images when a user clicks on the images. The problem is I when I try to access the images from the gallery image inside the modal content it doesn't work. Only a blank popup shows. I want the pictures from the image gallery to be displayed.
I need to know which code I can use to access the gallery image inside the modal content.
<body>
<script type="text/javascript">
var gallery = [
{
"img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
"text": "Add a description of the image heree",
},
{
"img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
"text": "Add a description of the image heree",
},
{
"img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
"text": "Add a description of the image heree",
},
{
"img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
"text": "Add a description of the image heree",
},{
"img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
"text": "Add a description of the image heree",
},{
"img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
"text": "Add a description of the image heree",
},{
"img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
"text": "Add a description of the image heree",
},{
"img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
"text": "Add a description of the image heree",
},{
"img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
"text": "Add a description of the image heree",
},{
"img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
"text": "Add a description of the image heree",
},{
"img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
"text": "Add a description of the image heree",
},{
"img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
"text": "Add a description of the image heree",
},
]
function view(imgsrc) {
vieww = window.open(imgsrc, 'viewwin', 'width=600,height=300');
}
function RenderHtml() {
var output = "";
for (i = 0; i < gallery.length; ++i) {
output += '<div class="gallery"><a target="_blank" rel="noopener
noreferrer">';
output += ' <a target="_blank" rel="noopener noreferrer">';
output += ' <img src="' + gallery[i].img + '"
onclick="view("' + gallery[i].img + '")" data-toggle="modal" data-
target="#myModal" alt="Forest" width="600" height="400" /';
output += ' </a>';
output += ' <div class="desc">' + gallery[i].text + '</div>';
output += '</div>';
}
document.getElementById('output').innerHTML = output;
}
window.onload = function () {
RenderHtml();
}
</script>
<div id="output">
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" 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">
<!-- I want images from gallery array to be shown here when
user clicks on any of the images -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-
dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>

Hi this link helps you.Just change this (window.open (imgsrc, 'viewwin', 'width = 600, height = 300')) because bootstrap is a nice solution for this :))

<div id="output">
</div>
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<img src="" class="imagepreview" style="width: 100%;" >
</div>
</div>
</div>
</div>
<script>
var gallery = [
{
"img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
"text": "Add a description of the image heree",
} //, ....
]
function RenderHtml() {
var output = "";
for (i = 0; i < gallery.length; ++i) {
output += '<a href="#" class="pop">'+
'<img src="http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg" style="width: 400px; height: 264px;">'+
'</a>';
}
document.getElementById('output').innerHTML = output;
}
$( document ).ready(function() {
RenderHtml();
$('.pop').on( "click", function() {
$('.imagepreview').attr('src', $(this).find('img').attr('src'));
$('#imagemodal').modal('show');
});
});
</script>

How can I show Bootstrap modal when on click in individual bars in chart.js

I am working on a project using chart.js. I am trying to show a bootstrap modal when clicking individual bars instead of tooltip in chart js. Right now I am using chart id's onclick function for showing a bootstrap modal. Is there any way to make it possible.?
Here is my code:
HTML:
<div class="chart1">
<canvas id="barchart5"></canvas>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
JAVASCRIPT :
<script type="text/javascript">
var data5 ={
labels: ["Label1", "Label2", "Label3", "Label4", "Label5", "Label6", "Label7", "Label8"],
datasets : [
{
fillColor : "#F64747",
strokeColor : "#F64747",
highlightFill: "#F64747",
highlightStroke: "#F64747",
data: [4, 6, 3, 2, 10, 5, 5, 7]
},
{
fillColor : "#19B5FE",
strokeColor : "#19B5FE",
highlightFill : "#19B5FE",
highlightStroke : "#19B5FE",
data: [3, 6, 4, 3, 10, 10, 5, 8]
},
{
fillColor : "#F7CA18",
strokeColor : "#F7CA18",
highlightFill : "#F7CA18",
highlightStroke : "#F7CA18",
data: [4, 6, 10, 4, 7, 6, 2, 4]
}
]
};
var ctx = document.getElementById("barchart5").getContext("2d");
var barchart5 = new Chart(ctx).Bar(data5, {
responsive : true,
showTooltips: false,
onAnimationComplete: function () {
var ctx = this.chart.ctx;
alert(ctx);
ctx.font = this.scale.font;
ctx.fillStyle = this.scale.textColor
ctx.textAlign = "center";
ctx.textBaseline = "bottom";
this.datasets.forEach(function (dataset) {
dataset.bars.forEach(function (bar) {
ctx.fillText(bar.value, bar.x, bar.y);
});
})
}
});
$( "#barchart5" ).click(function() {
$('#myModal').modal('show');
});
</script>

canvas.onclick = function(evt) {
var points = chart.getBarsAtEvent(evt);
var value = chart.datasets[0].points.indexOf(points[0]);
if(value == 5){
$('#myModal').modal('show');
} else if(value == 4){
$('#myModal1').modal('show');
}
};

see this,
Click events on Pie Charts in Chart.js
don't know much about chart.js but I'm sure this library has some method to do this easily, no need to use jquery.