I have a list of movies with their infos and what I want to do is to fetch available days with javascript and then add those infos to the div in modal. This is my code:
<div>
{% for movie in movies %}
<div class="movie">
{{ movie.title.value }}
<img src="{{ file_url(movie.field_image.entity.uri.value) }}">
<p>{{ movie.field_description.value }}</p>
<h3> 'This movie is available on:' </h3>
<div class="days">
{% for day in movie.field_days %}
{{day.entity.label}}
{% endfor %}
</div>
<br>
<button id="b" class="bclass" style="visibility:hidden"> Reserve</button>
</div>
{% endfor %}
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Available days for this movie are:</h4>
<div class= "modal-body">
<div class=days></div>
</div>
</div>
</div>
I want to fetch {{day.entity.label}} and then add that to the div in modal. Can someone help? Thanks in advance.
Here is a demo, i didn't include the modal library, but it doesn't matter, you just need to uncomment that last line, you can see the modal content at the bottom when you click reserve
$(".bclass").click(function (e) {
var movie = e.target.closest(".movie");
var days = movie.querySelector(".days");
$(".modal .days").html(days.innerHTML);
// $(".modal").modal("show");
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="movie">
{{ movie.title.value }}
<img src="{{ file_url(movie.field_image.entity.uri.value) }}">
<p>{{ movie.field_description.value }}</p>
<h3> 'This movie is available on:' </h3>
<div class="days">1 2 3</div>
<br>
<button id="b" class="bclass" style=""> Reserve</button>
</div>
</div>
<div>
<div class="movie">
{{ movie.title.value }}
<img src="{{ file_url(movie.field_image.entity.uri.value) }}">
<p>{{ movie.field_description.value }}</p>
<h3> 'This movie is available on:' </h3>
<div class="days">4 56 6</div>
<br>
<button id="b" class="bclass" style=""> Reserve</button>
</div>
</div>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Available days for this movie are:</h4>
<div class="modal-body">
<div class=days></div>
</div>
</div>
</div>