Develop Reference

Display entire dictionary in modal from grid-table in Razor view with Jquery

I have a pop-up modal (in a partial) that I need to display the contents of a dictionary in a grid-table. It currently works fine, but only if the dictionary is being returned with one {key, val} pair. I cannot seem to make it work for more than one key/val pairs properly. If there is more than one, it is concatenating them all together in the same cols. I also need the function to remove the previous vals when the modal is re-opened. It does this part fine, but I think the Jquery manipulations to add & remove them may be hindering my attempt to add the values.
To clarify, this works with a returned Dictionary that has one {key, value} pair, but I need for it to work with more than one as well without concatenating them together. For example if returned:
{valName1, val1}
{valName2, val2}
{valName3, val3}
Below is my Modal and the Jquery I am using:
<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">
<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">
<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: </div>
<div class="col-md-6 font-weight-bold"> Value: </div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$("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];
//Remove previous rows
$("div[name='params']").remove();
//Adding parameters as rows
$('<div class="col-md-6 text-break" name="params"> ' + name + '</div>' + '<div class="col-md-6 text-break" name="params">' + value + '</div>').insertAfter($('#modalGridHeader'));
}
}
}
});
});
</script>
Here is a screenshot of the modal pop-up. In this screen shot, a dictionary with 3 key/val pairs was returned, however you can see that they are all concatenated together.

I was able to achieve what was needed by changing name and value from strings to arrays, and looping through them with another nested for loop:
//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'));
}
}
}

Capture the click event of dynamic Buttons in Bootstrap Modal using jquery [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 3 years ago.
I hava Bootstrap model as below
<div class="modal fade" id="PQModel" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title " id="exampleModalLongTitle"><strong>Priority Queue Selection</strong></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body justify-content-center">
<div id="modal-text"></div>
</div>
<div class="modal-footer justify-content-center">
<button type="button" class="btn btn-danger cancel">Cancel</button>
</div>
</div>
</div>
</div>
In this modal I am writing some dynamic buttons accoridng to the JSON response from server as below.
var scrn = '';
$.each(pqueueList, function(index, val)
{
scrn += ' <div class="row justify-content-center top-buffer">';
scrn += ' <div class="col-6">';
scrn += ' <div class="btn btn-block';
if (val["fieldType"] == "EVEN"){
scrn += ' btn-primary ';
}
else{
scrn += ' btn-success ';
}
scrn += '" value="'+val["pqId"]+'"><h2>'+val["pqName"]+'</h2></div>'
scrn += ' </div>';
scrn += '</div>';
});
$('#modal-text').html(scrn);
$("#PQModel").modal('show');
}
I am driving to capture the click event on each of the button as below.
$("#PQModel #modal-text div.btn").on('click',function(){
var value = $(this).attr('value');
alert("value "+ value);
});
The modal is coming as expected and buttons are coming as expected. But the click I am not able to capture button click event.I am not sure, where am I going wrong. Please help me solve it out.

I suspect that binding of the objects for the click function is happening before you complete the generation and display of the objects. To make sure, replace your third code block with something simple like
console.log($("#PQModel #modal-text div.btn")),
and verify that at the time where this is called that objects are actually being selected

You're attaching a click event before the DOM elements exist. This means the event listener is attaching to nothing.
You would want to use event delegation to properly handle this situation. This attaches an event listener to the parent container, and whenever there is a click inside of it, it determines if the element matches the secondary selector provided (div.btn)
$("#PQModel #modal-text").on('click','div.btn', function(){
var value = $(this).attr('value');
alert("value "+ value);
});
Event Delegation JQuery Docs

Angular function 'modalinstance.modal' is not a function

I am working on a project with a .ejs file. The problem is that an Angular function which affects a modal doesn't work and doesn't open - for comparison: with .html file it worked fine and opened my modal.
I get this error:
TypeError: modalinstance.modal is not a function. (In 'modalinstance.modal('show')', 'modalinstance.modal' is undefined
Do I need an Angular Import for my .ejs file?
<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">
<h3 class="modal-title" id="exampleModalLabel">Torsperrung</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
Sie sind dabei ein Tor zu sperren. <br>Falls Sie sich sicher sind, verfassen Sie einen Grund.
</div>
<div class="form-group">
<label for="message-text" class="col-form-label ">Bemerkung:</label>
<textarea class="form-control torbemerkung" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary abbrechen" data-index="0" data-dismiss="modal">Abbrechen</button>
<button type="button" class="btn btn-primary torsperren" data-index="0">Tor sperren</button>
</div>
</div>
</div>
</div>
$(document).ready(function() {
$('#tore').DataTable({
searching: false,
bInfo: false,
paging: false,
ordering: false
});
$('.sperren').each(function() {
$(this).append('<label class="switch">' +
'<input type="checkbox" class="sperrung" name="disabled" value="true">' +
'<span class="slider round"></span>' +
'</label>'
);
});
$('.slider').change(function() {
if ($(this).is(':checked')) {
}
});
$('#tore').find('.status').text("in Betrieb");
// open modal on slide change
$('input[type="checkbox"]').on('change', function(e) {
// get index from `tr`
var index = $(this).parents('tr').data().index;
if (e.target.checked) {
var modalinstance = $('#exampleModal');
// assign index
modalinstance.find('.torsperren').attr('data-index', index);
modalinstance.find('.abbrechen').attr('data-index', index);
// open modal
modalinstance.modal('show');
// reset value
modalinstance.find('.torbemerkung').val('');
} else {
// clear data by selecting the row with the given index
$('#tore').find('tr[data-index="' + index + '"]').find('.bemerkung').text("");
$('#tore').find('tr[data-index="' + index + '"]').find('.status').text("in Betrieb");
}
});
// textarea example
$('.torsperren').click(function() {
var index = $(this).attr('data-index');
// find element by index and assign the given value
$('#tore').find('tr[data-index="' + index + '"]').find('.bemerkung').text($('.torbemerkung').val());
$('#tore').find('tr[data-index="' + index + '"]').find('.status').text("gesperrt");
$('#exampleModal').modal('hide');
});
$('.abbrechen').click(function() {
var index = $(this).attr('data-index');
$('#tore').find('tr[data-index="' + index + '"]').find('input[type="checkbox"]').prop('checked', false);
});
});

Pass Image ID - Array Index - to Modal from JSON

I have code that's dynamically creating a 3 column image grid from a mySQL database using a JSON array and jQuery .append. How would I pass the database $row ID (array index) of each image in the <div> created by the .append using an href to a modal? I'm calling/building the modal with an AJAX statement.
The line below is from the full $.getJSON statement further down. I believe I can pass the ID in the href but I'm not sure where or how?
// These lines generate the clickable grid images
<a href="equipment.php?id=' + data.Surfboards[row].Surfboard.id + '">
<img class="photog-headshot" src="images/' + data.Surfboards[row].Surfboard.imageName + '" alt="' + data.Surfboards[row].Surfboard.imageName + '">
JSON Parser - builds the image grid:
//gets the JSON from surfboards.php
$.getJSON("surfboards.php", function (data) {
//loop through each surfboard in the JSON file and append a <div> with the surfboard information
$.each(data.Surfboards, function (row) {
$("#board_table").append(
'<div class="photog-group clearfix"><figure class="cap-bot"><a href="equipment.php?id='
+ data.Surfboards[row].Surfboard.id
+ '"><a href="#dataModal" class="view_data"><img class="photog-headshot" src="images/'
+ data.Surfboards[row].Surfboard.imageName + '" alt="'
+ data.Surfboards[row].Surfboard.imageName
+ '"></a><figcaption><p>Board Name: '
+ data.Surfboards[row].Surfboard.boardName
+ '<br>Year Shaped: '
+ data.Surfboards[row].Surfboard.year + '</p></figcaption><figure></div>');
});
});
Modal for Images:
<!-- Ajax Database Modal Start -->
<div id="dataModal" class="modal fade">
<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">Surfboard Details</h4>
</div>
<div class="modal-body" id="surfboard_detail">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Link to page with working table example and blank modal on image click: Nalu.live/equipment
Link to github repo
Please let me know if any additional information is needed.
Please consider that I'm still a student and very new to web development.
Thanks for any help.

I solved this with the help of a classmate. Working code is in the GitHub repo at the link below. Please note, the code that builds the image grid from JSON database data is posted below and can also be found in scripts/surfboard.js
I'm happy to answer questions (if I can) or walk anyone though the code if needed.
Nalu Github Repo
//// From Dylan W. on Discord - Replace in the surfboard.js
$.getJSON("surfboards.php", function (data) {
//loop through each surfboard in the JSON file and append a <div> with the surfboard information
$.each(data.Surfboards, function (row) {
$("#board_table").append(
'<div class="equip-content">' + '<div class="photog-group custom-modal clearfix" data-title="'+ data.Surfboards[row].Surfboard.boardName +'" data-image="images/'
+ data.Surfboards[row].Surfboard.imageName +'" data-description="'+
data.Surfboards[row].Surfboard.caDescription +'"><figure><a href="equipment.php?id='
+ data.Surfboards[row].Surfboard.id
+ '"><a data-target="#surfboardModal" data-toggle="modal"><div class="equip-content-overlay"></div><img class="photog-headshot" src="images/'
+ data.Surfboards[row].Surfboard.imageName + '" alt="'
+ data.Surfboards[row].Surfboard.imageName
+ '"></a><figcaption class="fadeIn-bottom"><h1>'
+ data.Surfboards[row].Surfboard.boardName + '</h1>'
+ '<hr>'
+ '<p>Year Shaped: '
+ data.Surfboards[row].Surfboard.year + '</p></figcaption><figure></div>');
});
});
});

Append HTML to row if condition true, make sure there's still 3 columns to a row

I want to add the HTML of a column into a row, and have 3 columns per row. I do not wish to display all of the images in my array, and if they are not supposed to be displayed, I do not wish for the column number to tick over.
This should be really easy, but I'm getting really confused. My current code is just giving me an infinite loop getting stuck on an image where it is not supposed to display.
function loadImages()
{
var data = <?php echo json_encode($data); ?>;
data = $.map(data, function(value, index) {
return [value];
});
console.log(data);
for(var i = 0; i < data.length; i++)
{
data[i] = $.map(data[i], function(value, index) {
return [value];
});
}
var div = document.getElementById('imageBox');
var img = 0;
var row = 0;
while(img < data.length)
{
div.innerHTML += '<div class="row gallery-row" id="row' + row + '"></div>';
var col = 0;
while(SOMETHING OR OTHER)
{
if(!!data[img])
{
var html = [
'<div class="col-sm-4">',
' <a data-toggle="modal" data-target="#imageModal" onclick="" href="#" id=a' + img + '>',
' <img class="img-responsive img-gallery" src="" id=img' + img + '>',
' </a>',
'</div>'
].join('');
var valid = data[img][1][4].split(": ")[1];
if(valid == "True")
{
var imgName = data[img][0];
var name = data[img][1][0];
var location = data[img][1][1];
var desc = data[img][1][2];
document.getElementById('row'+ String(row)).innerHTML += html;
document.getElementById('img' + String(img)).setAttribute('src', imgName);
document.getElementById('a' + String(img)).setAttribute('onclick', "javascript:loadModalImage('" + imgName + "', '" + name + "', '" + location + "', '" + desc + "')");
col++;
}
img++;
}
}
row++;
}
}
function loadImageData(imageName, imageLocation, imageDesc)
{
var imgName = document.getElementById('img-name');
var imgDesc = document.getElementById('img-desc');
imgName.innerHTML = "Taken by <b>" + imageName + "</b> at <b>" + imageLocation + "</b>.<br>";
imgDesc.innerHTML = imageDesc;
}
function loadModalImage(image, imageName, imageLocation, imageDesc)
{
var modalImage = document.getElementById('imageModalImage');
modalImage.setAttribute("src", image);
loadImageData(imageName, imageLocation, imageDesc);
}
And the HTML:
<div class="box" name="box" id="imageBox">
<!-- Modal -->
<div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-img">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
</div>
<!-- Modal Body -->
<div class="modal-body">
<img class="img-responsive imageModalImage" id="imageModalImage" src="">
<p id="img-name"></p>
<p id="img-desc"></p>
</div>
<!-- Modal Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
As I said, I'm sure this should be an easy fix. Any help is still greatly appreciated, as I've just completely confused myself trying to solve this.