We Keep Coding

How to add interactive modal dynamically into html with Javascript

let http = new XMLHttpRequest();
http.open('get', 'recipe.json', true);
http.send();
http.onload = function () {
if (this.readyState == 4 && this.status == 200) {
let products = JSON.parse(this.responseText);
let output = "";
for (let item of products) {
output += `
<div class="product">
<img src="${item.imageURL}" alt="${item.imageURL}">
<p class="title">${item.name}</p>
</p>
<button type="button" name="${item.name}" class="btn btn-primary modaltrigger" id="btn${item.name}" data-bs-toggle="modal" data-bs-target="#${item.name}">
Get Recipe
</button>
</div>
<div class="modal fade" id="${item.name}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
${item.data}
</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>
`;
}
document.querySelector(".products").innerHTML = output;
}
}
$(document).ready(function () {
$(".modaltrigger").click(function () {
var id = $(this).attr('name');
$('#' + id).modal();
});
});
I want to make a dynamic modal for all the products in my json file with help of javascript.
When i click on "Get recipe" Button the modal doesn't pops up and i get an error "ARIA hidden element must not contain focusable elements" in Dev tools.

You are not calling your modal function with your modals id.
$("#myModal").modal();
Jquery selector must match modal elements id to modal to show up.
And you dont have to create a modal clone for each product you can just change contents of the modal.This will speed up your page loading time.
let http = new XMLHttpRequest();
http.open('get', 'recipe.json', true);
http.send();
http.onload = function () {
if (this.readyState == 4 && this.status == 200) {
let products = JSON.parse(this.responseText);
let output = "";
for (let item of products) {
output += `
<div class="product">
<img src="${item.imageURL}" alt="${item.imageURL}">
<p class="title">${item.name}</p>
</p>
<button type="button" name="${item.name}" class="btn btn-primary modaltrigger" data-bs-toggle="modal" data-bs-target="#${item.name}">
Get Recipe
</button>
</div>
<div class="modal fade" id="${item.name}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
</div>
<div class="modal-body">
${item.data}
</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>
`;
}
document.querySelector(".products").innerHTML = output;
}
}
$(document).ready(function () {
$(".modaltrigger").click(function () {
var id = $(this).attr('name');
$('#'+id).modal();
});
});
Try this.

Increasing space between rows in table dynamically created from js function

I have a JS function in a modal that is creating a table in a grid from data being returned from a controller action. It works fine, however I wish there was a little more space between the rows. I have tried adding &nbsp and it doesn't seem to do the trick.
Can anyone give me a solution to this? Below is a picture of the modal, my JS function and the markup for the modal.
modal:
JS function:
$("button[name='paramsBtn']").click(function () {
/* Grabs ID from col selected */
var $col = $(this).closest('.row').find('.requestId');
var jobRequestId = $col.data('id');
var nameType = $col.data('name');
$.ajax({
url: '#Url.Action("JobPollerParameters", "Tools")',
data: { "jobRequestId": jobRequestId, "name" : nameType},
success: function (results) {
$modal = $('#paramsModal');
$modal.modal("show");
var name = [];
var value = [];
var arr = results;
//loop through arr created from dictionary to grab key(s) and value(s)
for (var key in arr) {
if (arr.hasOwnProperty(key)) {
//name += key;
//value += results[key];
name.push(key);
value.push(results[key])
//Remove previous rows
$("div[name='params']").remove();
for (var i in name) {
//Adding parameters as rows
$('<div class="col-md-6 text-break" name="params"> ' + name[i] + '</div>'+ '<div class="col-md-6 text-break" name="params">' + value[i] + '</div>').insertAfter($('#modalGridHeader'));
}
}
}
}
});
});
markup for modal:
<div class="modal fade" id="paramsModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header modal-header-primary" style="margin-bottom:-16px;">
<a class="btn btn-xs btn-primary pull-right" data-dismiss="modal" aria-label="Close"><span class="glyphicon glyphicon-remove"></span></a>
<h4 class="modal-title" id="modalTitleText">Job Parameters</h4>
</div>
<div class="modal-body" style="height:250px;">
<div class="list-group">
<div class="row list-group-item list-group-item-heading container divTableHeading" style="width:inherit; margin-bottom:0px;" id="modalGridHeader">
<div class="col-md-6 font-weight-bold"> Parameter(s): </div>
<div class="col-md-6 font-weight-bold"> Value(s): </div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
The line that is adding the rows is:
$('<div class="col-md-6 text-break" name="params"> ' + name[i] + '</div>'+ '<div class="col-md-6 text-break" name="params">' + value[i] + '</div>').insertAfter($('#modalGridHeader'));
Here is where I have tried adding &nbsp. I have also tried adding margin-bottom:5px, but it looked very odd.
Thanks

Quick and dirty
In <div class="col-md-6 text-break" name="params"> add style="height:20px;".

Linking a modal to an entry field and validating using JavaScript

With the following code I'm trying to validate an entry field in JavaScript. The validation requires only 10 characters. When you authenticate, it is supposed to display a modal with a confirmation message:
function myFunction() {
var con_code, text;
//getting the field
con_code = document.getElementById("con_code").value;
if ($.trim($('con_code').val()).length == 0) {
text = "Authentication code is not valid";
}
//trigger to the modal if it meets the condition
$(document).ready(function() {
$("#con_code").click(function() {
$("#myModal").modal();
});
});
document.getElementById("error_con_code").innerHTML = text;
}
<div class="container">
<h2>Activate Modal with JavaScript</h2>
<!-- Trigger the modal with a button -->
<div class="form-group">
<label>Confirmation Code.</label>
<input type="text" name="con_code" id="con_code" class="form-control" required="required" placeholder="Enter your Confirmation Code" />
<br> //the error code display
<span id="error_con_code" class="text-danger"></span>
<br> //the authenticate button
<button type="button" class="btn btn-success btn-sm" id="con_code" onclick="myFunction()">Authenticate</button>
</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> //the modal
<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>
</div>
However, it is not authenticating the confirm code. How can I fix it?

You have an error at:
if($.trim($('con_code').val()).length ==0){...}.
It should be $('#con_code')
Also you have 2 elements with the same id="con_code".
Please check with the following codes.
I am assuming you want to show the modal when there is 10 chars in the input field. If the rule changes, then please edit at: 'if ($.trim(con_code.val()).length != 10) {}' in the below codes.
$(document).ready(function() {
myFunction();
});
function myFunction() {
$("#con_code_btn").click(function() {
var con_code = $('#con_code');
var error_con_code = $('#error_con_code');
error_con_code.html('');// Remove Previous Error Message(if any);
if ($.trim(con_code.val()).length != 10) {
error_con_code.html("entication code is not valid");
}
else {
$("#myModal").modal();
}
});
}
Also please change the id of the button to "con_code_btn" in the form:
<button type="button" class="btn btn-success btn-sm" id="con_code_btn" onclick="myFunction()">Authenticate</button>

How to append html content in bootstrap modal

I want to append html code in bootstrap modal
HTML content:
<div class="modal fade" id="share12" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content get_direction_modal_bg">
<div class="text-right"><a class="fa fa-times white normal12" data-dismiss="modal"> close</a></div>
<div class="modal-body">
<p class="white text-center">Share this Event</p>
<div class="share_list_popup">
<ul>
<li></li>
<li><a href="http://www.linkedin.com/shareArticle?mini=true&utm_campaign=201308&url=http://10times.com/"+eventname+"&title=Come join me at "+eventname+" on "+eventstartdate+","+eventcityname+".&utm_source=LinkedIn&source=LinkedIn
Come join me at "+eventname+" on "+eventstartdate+","+eventcityname+". Find event details at 10times.com/"+eventname+""></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<img src="images/share.png">
Javascript code:
var modal_event_name=document.getElementById("modal_event_name");
var modal_event_startdate=document.getElementById("modal_event_name");
var modal_city_name=document.getElementById("modal_event_name");
$('#share12').modal('show');
The problem I'm getting:
modal is now working
guide how to show HTML content in bootstrap modal
JSFiddle: http://jsfiddle.net/4gW4y/115/

Bootstrap comes with methods for showing & hiding modals.
With bootstrap 3 you can do:
$("#pop").on("click", function() {
$('#imagemodal').modal('show');
$('#imagemodal').on('shown.bs.modal', function() {
$('#imagemodal').find('.modal-body').append('<p>append some html here</p>');
});
});

It looks like you're trying to use Javascript variables (eventname, eventstartdatae, eventcityname) directly in the HTML. Instead, you could try building the URL with Javascript, and set the <li> (list items) and <a href=""> (links) with jQuery:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div id="modal_event_name">My Event Name</div>
<div id="modal_event_startdate">My Event Start Date</div>
<div id="modal_city_name">My Event City Name</div>
<div class="modal fade" id="share12" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content get_direction_modal_bg">
<div class="text-right"><a class="fa fa-times white normal12" data-dismiss="modal">close</a></div>
<div class="modal-body">
<p class="white text-center">Share this Event</p>
<div class="share_list_popup">
<ul>
</ul>
</div>
</div>
</div>
</div>
</div>
<button onclick="showModal()">Show Modal</button>
Show Modal From Link
<script src="https://code.jquery.com/jquery-1.11.2.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
var eventname = document.getElementById("modal_event_name").textContent;
var eventstartdate = document.getElementById("modal_event_startdate").textContent;
var eventcityname = document.getElementById("modal_city_name").textContent;
var facebookLink = "https://www.facebook.com/?" + eventname + "&" + eventstartdate + "&" + eventcityname
var linkedinLink = "http://www.linkedin.com/?" + eventname + " & " + eventstartdate + "&" + eventcityname
$('.share_list_popup ul').append('<li>Facebook</li>');
$('.share_list_popup ul').append('<li>LinkedIn</li>');
function showModal() {
$('#share12').modal('show');
}
</script>
</body>
</html>
Working fiddle

There are several ways to manipulate the data of a modal (or anything else really). Bootstrap provides some, and you can read more about them there.
If you want to use jQuery below are some examples:
$("#pop").on("click", function() {
//ref. to the modal
var imgModal = $('#imagemodal');
//Shows the modal
imgModal.modal('show');
//ref. to the body of the modal
var imgModalBody = imgModal.find('.modal-body');
//Changes the entire content of the body, in the modal, to this
imgModalBody.html('<span style="color:red">This is appended directly from a string or variable</span><br/>');
//Appends a button to the modal body
imgModalBody.append(' <button id="clickMe">Load content from hidden div</button><br/>');
//Adds a click event on the button just appended
imgModal.on("click", "#clickMe", function() {
//Appends text from the hidden div, myHiddenContent, on the page
imgModalBody.append(' ' + $('#myHiddenContent').html());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
Open my modal
<div id="myHiddenContent" style="display:none;">This is appended from html already on the page (hidden or not)</div>
<!-- Modal -->
<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-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Image preview</h4>
</div>
<div class="modal-body">
<img src="" id="imagepreview" style="width: 400px; height: 264px;" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Could you use a function to generate the hyperlinks?
E.g:
Link
function doSomething()
{
var modal_event_name=document.getElementById("modal_event_name");
var modal_event_startdate=document.getElementById("modal_event_name");
var modal_city_name=document.getElementById("modal_event_name");
var url="path?modal_event_name="+modal_event_name+"&modal_event_startdate="+modal_event_startdate + "&modal_city_name="+modal_city_name;
window.open(url,""."");
}
Something like this?

The modal is working with the code. Check if bootstrap js is included.
You can use the shown event of modal to add the variables.
var modal_event_name = "Event Name";
var modal_event_startdate = "10th july";
var modal_city_name = "SF"
$('#share12').modal('show');
$('#share12').on('shown.bs.modal', function () {
if (!$(this).hasClass('social-links-added')) {
$(this).addClass('social-links-added');
var linkedin_url = "http://www.linkedin.com/shareArticle?mini=true&utm_campaign=201308&url=http://10times.com/" + modal_event_name + "&title=Come join me at " + modal_event_name + " on " + modal_event_startdate + "," + modal_city_name + ".&utm_source=LinkedIn&source=LinkedIn Come join me at " + modal_event_name + " on " + modal_event_startdate + "," + modal_city_name + ". Find event details at 10times.com/" + modal_event_name;
var facebook_url = "https://www.facebook.com/sharer/sharer.php?u=www.10times.com&title=Come join me at" + modal_event_name + "on " + modal_event_startdate + ", " + modal_city_name;
$('.share_list_popup ul li:eq(0)').find('a').attr('href', facebook_url);
$('.share_list_popup ul li:eq(1)').find('a').attr('href', linkedin_url);
console.log(facebook_url);
console.log(linkedin_url);
}
});
Fiddle

How to load image into Bootstrap Modal from JSON Flickr API

Below is the code I am working with as an example.
When I click each image from the Flickr feed I want to be able to load the Bootstrap Modal (which it does) but display that particular photo in the Modal (which it currently doesnt).
I've tried numerous different things. But I am unable to get it to work.
Example at http://jahax.com/ins/
<div class="container">
<h2 style="text-align: center;">Demonstration</h2>
<p class="text-center">Demo of Bootstrap, jQuery & JSON API</p>
<div class="row text-center">
</div>
<div id="images" class="row text-center"> </div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="nyModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Demo of Modal</h4>
</div>
<div class="modal-body">
<img id="mimg" src="">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
// Start jQuery Function
$(document).ready(function(){
// JSON API to access Flickr
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=winter&format=json&jsoncallback=?", displayImages);
function displayImages(data) {
var iCount = 0;
var htmlString = "<div class=row>";
$.each(data.items, function(i,item){
if (iCount < 18) {
var sourceSquare = (item.media.m).replace("_m.jpg", "_q.jpg");
htmlString += '<a class="btn" data-toggle="modal" data-target="#myModal">';
htmlString += '<img src="' + sourceSquare + '">';
htmlString += '</a>';
}
iCount++;
});
// HTML into #images DIV
$('#images').html(htmlString + "</div>");
// Close down the JSON function call
}
// End jQuery function
});
</script>
<script type="text/javascript">
// Send Content to Bootstrap Modal
$('img').on('click',function()
{
var sr=$(this).attr('src');
$('#mimg').attr('src',sr);
$('#myModal').modal('show');
});
</script>

Change your 2nd script to this:
<script type="text/javascript">
// Send Content to Bootstrap Modal
$(document).on('click', 'img', function(){
var sr=$(this).attr('src');
$('#mimg').attr('src',sr);
$('#myModal').modal('show');
});
</script>