Develop Reference

How to set an elements innerHTML as jinja2 code?

Is it possible to set the innerHTML of an element with HTML that includes jinja2?
...
codeBlock = codeBlock +
'<div class="col-lg-4 col-md-6">' +
'<div class="card text-dark bg-light mb-3">' +
'<div class="card-header">' +
'<h6 style="text-align:center;">' + title + '</h6>' +
'</div>' +
'<div class="card-body">' +
'<img src="' + image + '" style="object-fit:contain; width: 100%"; onerror="this.src = \'../static/food.png\'" >' +
'' +
'{% for i in range(1,6) %}' +
'{% if i <=' + stars + '%} <span class="fa fa-star checked star" style="color:orange ;"></span>' +
'{% else %}' +
'<span class="fa fa-star checked star"></span>' +
'{% endif %}' +
'{% endfor %}'+
'</div>' +
'</div>' +
'</div>'
}
document.getElementById("grid").innerHTML = codeBlock
I have seen one post asking the same thing but with no answers.

I asked myself why I have to uses jinja2 and instead just used javascript
codeBlock = codeBlock +
'<div class="col-lg-4 col-md-6">' +
'<div class="card text-dark bg-light mb-3">' +
'<div class="card-header">' +
'<h6 style="text-align:center;">' + title + '</h6>' +
'</div>' +
'<div class="card-body">' +
'<img src="' + image + '" style="object-fit:contain; width: 100%"; onerror="this.src = \'../static/food.png\'" >' +
''
for (let i = 1; i < 6; i++) {
if (i <= stars) {
codeBlock = codeBlock +
'<span class="fa fa-star checked star" style="color:orange ;"></span>'
} else {
codeBlock = codeBlock +
'<span class="fa fa-star checked star"></span>'
}
}
'</div>' +
'</div>' +
'</div>'
}

Generate modal with JS containing a Router - laravel

function confirmDelete(ruta, id){
alert(ruta +","+ id);
document.getElementById('confirmDeleteModal').innerHTML = '<div class="modal-dialog max-w-2xl">'
+ '<div class="modal-content mx-auto">'
+ '<div class="modal-header">'
+ '<button type="button" class="close la la-times" data-dismiss="modal"></button>'
+ '</div>'
+ '<div class="modal-body">'
+ '<h2>¿Está seguro que desea eliminar el registro?</h2>'
+ '</div>'
+ '<div class="modal-footer">'
+ '<div class="flex flex-wrap gap-2">'
+ '<a href="{{route('+ ruta +', '+ id +'}}"'
+ 'class="btn btn_primary">'
+ 'Aceptar'
+ '</a>'
+ '<button type="button" data-dismiss="modal"'
+ 'class="btn btn_outlined btn_secondary uppercase">Cancelar</button>'
+ '</div>'
+ '</div>'
+ '</div>'
+'</div>';
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<a onclick="confirmDelete('method.tables.bank-entities.delete','1')" class="btn btn-icon btn_outlined btn_secondary">
eliminar
</a>
<div id="createModal" class="modal" data-animations="fadeInDown, fadeOutUp">
</div>
I have an anchor that executes a function to remove
<a onclick="confirmDelete('method.tables.bank-entities.delete','1')"
class="btn btn-icon btn_outlined btn_secondary">
<span class="la la-trash"></span>
</a>
This function adds the content to a modal
The function needs 2 parameters the route and the id to delete
function confirmDelete(ruta, id){
alert(ruta +","+ id);
}
The problem is that it doesn't add the content to the div of the modal and I don't know how to use the "{{route('+ route +', '+ id +'}}" in js

If I'm not mistaken, what you want is to use a Laravel function (route) but passing the values through javascript, however that is not possible. First the laravel code is executed on the server and the generated result (html and JS) is sent to the client, so you can't call laravel functions directly from javascript.
One way to solve this would be to create your route string using javascript from the received data, without using Laravel code.
+ '<a href="http:/example.com/'+ ruta +'/'+ id +'"'
+ 'class="btn btn_primary">'
+ 'Aceptar'
+ '</a>'

CSS & JS - Remove modal when clicked on background

Currently I am making my own modal for my system. When you click on the name of a package the modal popups up and displays. I added some JQuery that is supposed to remove the modal when clicked on the background. It does that but also when I click on the modal itself it hides.
I tried adding z-index 3 to the parent and z-index 4 to the modal but that does not work. How can I make it so that if clicked on the background, the modal disappears but when clicked on the modal itself it does nothing and people can just interact normally with the modal?
I have a small illustration
The popups are appended to a parent using Ajax (See below)
<div class="container-fluid pt-5 ">
<div class="row">
<div class="col-md-6">
<h3>{{ __('Packages') }}</h3>
</div>
</div>
<div class="row my-5">
<div class="col-md-4">
<div id="package-loading" class="text-center">
<i class="fas fa-spinner fa-pulse fa-2x color-primary"></i>
</div>
<p id="package-error" class="text-danger" style="display: none"></p>
<div id="packages-wrapper"></div>
</div>
</div>
</div>
<div class="popup-list">
</div>
<script>
$.ajax({
headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'), 'X-Requested-With': 'XMLHttpRequest'},
url: 'https://www.rainierlaansite.test/api/packages/get',
type: 'GET',
data: {},
success: function(data) {
$('#package-loading').fadeOut();
let wrapper = $("#packages-wrapper");
let popup_list = $('.popup-list');
let popup = 'popup-id';
if(data == null) {
console.log('lol')
}
$.each(data, function(index, value) {
let el = data[index];
wrapper.append(
'<div class="row my-4" data-id='+ el.id +'>' +
'<div class="col-2 d-flex justify-content-center"><i class="far fa-archive fa-2x"></i></div>' +
'<div class="col-6">' +
'<h6 class="m-0">'+ el.name +'</h6>' +
'<p class="m-0 sub-text">'+ el.description +'</p>' +
'</div>' +
'<div class="col-4 d-flex justify-content-end align-items-center">' +
'' + (el.price == 0 ? 'Download': '$ ' + el.price) +'' +
'</div>' +
'</div>' + '<hr>'
);
popup_list.append(
'<div class="package-popup shadow popup-'+ el.id +'">' +
'<div class="package-popup-dialog">' +
'<div class="package-popup-content">' +
'<div class="row">' +
'<div class="col-2">' +
'<div class="row">' +
'<div class="col-12 d-flex justify-content-center">' +
'<i class="far fa-archive fa-3x"></i>' +
'</div>' +
'</div>' +
'</div>' +
'<div class="col-7">' +
'<div class="row">' +
'<div class="col-12">' +
'<h4 class="m-0">' + el.name + '</h4>' +
'<p class="sub-text">' + el.creator + '</p>' +
'</div>' +
'</div>' +
'</div>' +
'<div class="col-3 text-center">' +
'<h4><a href="#" id="download_package" class="badge badge-pill '+ (el.price == 0 ? 'badge-primary': 'badge-light') +'">' +
(el.price == 0 ? 'Download': '$ ' + el.price) +
'</a></h4>' +
'</div>' +
'<div class="offset-2 col-7">\n' +
'<div class="rating">\n' +
'<span><i class="fas fa-star yellow"></i></span>' +
'<span><i class="fas fa-star yellow"></i></span>' +
'<span><i class="fas fa-star yellow"></i></span>' +
'<span><i class="fas fa-star yellow"></i></span>' +
'<span><i class="fas fa-star grey"></i></span>' +
'<small>· Uit 300 beoordelingen</small>' +
'</div>' +
'<small>Nog geen beoordelingen</small>' +
'</div>' +
'<div class="col-3 text-center">'+
'<i class="far fa-download"></i> ' + el.downloads +
'</div>' +
'</div>' +
'<div class="row my-5">' +
'<div class="col-12">' +
'<nav>' +
'<div class="nav nav-tabs" id="nav-tab" role="tablist">' +
'<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Details</a>' +
'<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Reviews</a>' +
'<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Version history</a>' +
'</div>' +
'</nav>' +
'<div class="tab-content" id="nav-tabContent">' +
'<div class="tab-pane fade show active py-4" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">' +
'<p>' + el.description + '</p>' +
'</div>' +
'<div class="tab-pane fade py-4" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">' +
'Dit is twee tekst' +
'</div>' +
'<div class="tab-pane fade py-4" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">' +
'Dit is tekst 3' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>'
);
});
$('.popup').on('click', function () {
if($(this).data(popup)) {
let item = $('.popup-' + $(this).data(popup));
item.addClass('show');
$(item).on('click', function() {
item.removeClass('show');
console.log('ik klik op de achtergrond');
})
}
});
},
error: function(e) {
$('#package-error').fadeIn().text("Unfortunately there was an error retrieving the packages");
}
});
</script>
HTML
SASS
.package-popup
position: fixed
top: 0
left: 0
height: 100%
width: 100%
display: none
overflow: hidden
background-color: $primary_background_transparent
z-index: 3
.package-popup-dialog
max-width: 960px
position: relative
margin: auto
top: 100px
background-color: $color-white
border-radius: 16px
padding: 3rem
z-index: 4
pointer-events: none
.package-popup-content
position: relative
pointer-events: auto
display: flex
flex-direction: column

Just check the click event target:
$(item).on('click', function(event) {
if (event.target.classList.contains("shadow")) {
// Close dialog
}
}
Remove the pointer-events: none from the css to make it work

How to append 3 elements from ajax/json on every click

I have problem with json response and part appending data to html.
My json have now 15 elements, but will have more in future.
Now, I'm appending every elements with ajax from json file.
I want to append 3 elements from JSON on click.
I tried to use for loop instead $.each onclick, but I haven't good effect.
My code:
$(document).ready(function() {
var $itemsList = $("#items-list");
$.ajax({
url: 'items.json',
type: 'GET',
dataType: 'json',
success: function(items){
$("#more-items").on('click', function() {
$.each(items, function(i, item) {
/*INCLDE ITEM BOXES*/
$itemsList.append(
'<div class="col-md-4 col-sm-6 item">' +
'<a href="#'+ item.id +'" class="item-link" data-toggle="modal">' +
'<div class="item-hover">' +
'<div class="item-hover-content">' +
'<i class="fa fa-search-plus fa-3x"></i>' +
'</div>' +
'</div>' +
'<img src="'+ item.thumbnailUrl +'" class="img-responsive" alt="">' +
'</a>' +
'<div class="item-caption">' +
'<p class="text-muted">'+item.caption+'</p>' +
'</div>' +
'</div>'
);
/*INCLUDE ITEM MODALS*/
$('body').after().append(
'<div class="item-modal modal fade" id="'+item.id+'" tabindex="-1" role="dialog" aria-hidden="true">'+
'<div class="modal-content">'+
'<div class="close-modal" data-dismiss="modal">'+
'<div class="lr">'+
'<div class="rl">'+
'</div>'+
'</div>'+
'</div>'+
'<div class="container">'+
'<div class="row">'+
'<div class="col-lg-8 col-lg-offset-2">'+
'<div class="modal-body">'+
'<h3>'+item.title+'</h3>'+
'<p class="item-intro text-muted">'+item.subtitle+'</p>'+
'<img class="img-responsive img-centered" src="'+item.imgUrl+'" alt="">'+
'<a class="btn btn-info item-link" target="_blank" rel="nofollow" href="'+item.link+'"><i class="fa fa-arrow-right"></i> Zobacz online</a>'+
'<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Zamknij</button>'+
'</div>'+
'</div>'+
'</div>'+
'</div>'+
'</div>'+
'</div>'
);
});
});
}
})
.done(function() {
console.log('items import done!');
})
.fail(function() {
console.log("error");
});
});
Thanks everyone for any advice and examples.

HTML won't append using javascript and AJAX

I am trying to grab data from my database and post it in an unordered list. I am using JavaScript and PHP.
I have a button that will execute a function in JavaScript. This function will grab some data from the database and append the HTML code after the query in the database has been executed.
I checked to make sure the code is grabbing data from the database. When I do not use the .html().append() function and hard code the data, it will work as it is not using the hidden class. When I put the function inside the variable itself as shown below, it will show as [Object Object], however the actual data will not append on the list.
Here is the HTML and JavaScript code:
function inventoryMenu(){
var confirmModal = $(
'<div class="modal fade">' +
'<div class="modal-dialog">' +
'<div class="modal-content">' +
'<div class="modal-header bg-default">' +
'<div class="container-fluid bodycontent">'+
'<h1>Inventory</h1>'+
'<h4><u> Product Control </u></h4>'+
'<ul>'+
'<div class="container-fluid bodycontent">'+
// '<div class="col-xs-12 col-sm-12 col-md-2 bg-menu mainmenu"></div>'+
// '<div class="col-xs-12 col-sm-12 col-md-3 dashMain">'+
'<br>'+
'<br>'+
'<ul id="mainDHMenu">'+
'</ul>'+
'</div>'+
'</div>'+
'<div class="row subDH">'+
// '<div class="col-xs-12 col-sm-12 col-md-2 bg-menu mainmenu"></div>'+
'<div class="col-xs-12 col-sm-12 col-md-2 bg-menu procategory">'+
'<ul class="procategory">'+
$.post('controllers/pc_productcontrol_c.php', {action: "loadProCategory"}, function (e) {
console.log("In the loadProCategory function");
console.log("loadProCategory function post data: " + e);
if (e === undefined || e.length === 0 || e === null) {
console.log("No meny items in the loadProCategory function");
menudata += '<li> No Menu Item Found </li>';
} else {
$.each(e, function (index, qd) {
console.log("In the each post function");
console.log("Each post function data: pcat_id: " + qd.pcat_id + " pcat_name: " + qd.pcat_name);
'<li class="pctrlmenuitem" id="pc_' + qd.pcat_id + '">' + qd.pcat_name + '<pcat_id class="">' + qd.pcat_id + '</pcat_id><pcat_name class="">' + qd.pcat_name + '</pcat_name><i class="fa fa-arrow-right pull-right"></i></li>';
// menudata += '<li class="pctrlmenuitem" id="pc_' + qd.pcat_id + '">' + qd.pcat_name + '<pcat_id class="">' + qd.pcat_id + '</pcat_id><pcat_name class="">' + qd.pcat_name + '</pcat_name><i class="fa fa-arrow-right pull-right"></i></li>';
// $('.procategory').html('').append(menudata);
});
}
// menudata += '<li class="pull-right" id="addProCategory"><i class="fa fa-lg fa-plus"></i></li>';
// menudata += '</ul>';
// console.log("Menudata: \n" + menudata);
// console.log($('.procategory').html('').append(menudata));
}, "json")+
// '<li class="pctrlmenuitem" id="pc_44">Category 1<pcat_id class="hidden">44</pcat_id><pcat_name class="hidden">Category 1</pcat_name><i class="fa fa-arrow-right pull-right"></i></li>'+
'</ul>'+
'</div>'+
'<div class="col-xs-12 col-sm-12 col-md-5">'+
'<div class="col-xs-12 col-sm-12 col-md-3 bg-menu items"></div>'+
'<div class="col-xs-12 col-sm-12 col-md-3 bg-menu subItems1 hidden"></div>'+
'<div class="col-xs-12 col-sm-12 col-md-3 bg-menu subItems2 hidden"></div>'+
'<div class="col-xs-12 col-sm-12 col-md-3 bg-menu subItems3 hidden"></div>'+
'<div class="col-xs-12 col-sm-12 col-md-3 bg-menu subItems4 hidden"></div>'+
'<div class="col-xs-12 col-sm-12 col-md-3 bg-menu subItems5 hidden"></div>'+
'</div>'+
'<div class="col-xs-12 col-sm-12 col-md-4 bg-menuitemdesc itemdesc"></div>'+
// '</div>'+
'</div>'+
'<div class="row mainDH hidden">'+
'<div class="col-xs-12 col-sm-12 col-md-2 bg-menu mainmenu"></div>'+
'<div class="col-xs-12 col-sm-12 col-md-3 dashMain">'+
'</div>'+
'</div>'+
'<button class="btn btn-success" id="sendfpassreq">Submit</button> ' +
'<button class="btn btn-danger" data-dismiss="modal" aria-hidden="true">Cancel</button>' +
'</div>' +
'</div>' +
// '</div>' +
'</div>'
);
confirmModal.modal("show");
var menudata = '';
menudata += '<h4><u> Product Control</u></h4>';
menudata += '<ul>';
$.post('controllers/pc_productcontrol_c.php', {action: "loadProCategory"}, function (e) {
if (e === undefined || e.length === 0 || e === null) {
menudata += '<li> No Menu Item Found </li>';
} else {
$.each(e, function (index, qd) {
console.log("In the each post function");
console.log("Each post function data: pcat_id: " + qd.pcat_id + " pcat_name: " + qd.pcat_name);
menudata += '<li class="pctrlmenuitem" id="pc_' + qd.pcat_id + '">' + qd.pcat_name + '<pcat_id class="">' + qd.pcat_id + '</pcat_id><pcat_name class="">' + qd.pcat_name + '</pcat_name><i class="fa fa-arrow-right pull-right"></i></li>';
$('.procategory').html('').append(menudata);
});
}
}, "json");
$('.pctrlmenuitem').click(function () {
$('.itemdesc').html('');
$('.procategory li').css('background-color', '#333333');
$(this).css('background-color', '#cc0000');
$('.items').removeClass('hidden');
if ($('.items').hasClass('hidden')) {
$('.items').removeClass('hidden');
}
if (!$('.subItems1').hasClass('hidden')) {
$('.subItems1').addClass('hidden');
}
if (!$('.subItems2').hasClass('hidden')) {
$('.subItems2').addClass('hidden');
}
if (!$('.subItems3').hasClass('hidden')) {
$('.subItems3').addClass('hidden');
}
if (!$('.subItems4').hasClass('hidden')) {
$('.subItems4').addClass('hidden');
}
if (!$('.subItems5').hasClass('hidden')) {
$('.subItems5').addClass('hidden');
}
var pcat_id = $(this).find('pcat_id').html();
var pcat_name = $(this).find('pcat_name').html();
loadItems(pcat_id, pcat_name);
$.post('controllers/session-store.php', {sessionstore: 'store', pcat_id: pcat_id, pcat_name: pcat_name}, function (e) {
console.log(e);
}, "json");
});
<button onclick="inventoryMenu()" class="inventoryButton">Inventory</button>

I found the problem.. The data retrieved from the post function cannot be referenced outside of the post function with the original data. 'menudata' variable is null outside of the post function, therefore the .append() function did not append anything.
I moved my code inside the post function and now it is working.