CODEWITHSUNDEEP
javascripthtml
testCode
testCode

Reputation: 117

Show value in modal

I want to pass information to a modal but it is not working. my link is inside a foreach.

$('#myModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget) // Button that triggered the modal
        var title = button.data('title')
        var recipientOverview = button.data('overview')
        var recipientImage = button.data('image')
        var modal = $(this)
        modal.find('#title').val(title)
    })
    <a role="button" data-id="{{$item['id']}}" data-title="1" data-image="{{$item['imagem']}}" data-overview="{{$item['overview']}}" data-toggle="modal" data-target="#myModal">

    <div class="modal fade bd-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle"><div id="title"></div></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <p><img src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/.{{$item['imagem']}}" width="200" height="200">{{$item['overview']}}</p>
            </div>
        </div>
    </div>

There is no value in place of the div title.

Upvotes: 0

Views: 80

Answers (1)

gaetanoM
gaetanoM

Reputation: 42054

Instead of .val() you need to use .text():

$(function () {
  $('#myModal').on('show.bs.modal', function (event) {
      var button = $(event.relatedTarget) // Button that triggered the modal
      var title = button.data('title')
      var recipientOverview = button.data('overview')
      var recipientImage = button.data('image')
      var modal = $(this)
      modal.find('#title').text(title)
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<a role="button" data-id="{{$item['id']}}" data-title="this is title n. 1" data-image="{{$item['imagem']}}" data-overview="{{$item['overview']}}" data-toggle="modal" data-target="#myModal">Open Modal</a>

    <div class="modal fade bd-example-modal-lg" id="myModal" tabindex="-1" role="dialog"
         aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">
                        <div id="title"></div>
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <p><img src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/.{{$item['imagem']}}" width="200"
                        height="200">{{$item['overview']}}</p>
            </div>
        </div>
    </div>

Upvotes: 1

Related Questions