Cannot pass data to modal

Hi there,

I am trying to pass data to a modal but right now it isnt working.

My Button to open the modal:

<button class="btn btn-info" data-toggle="modal" data-target="#edit" data-mytitle="Hello">Edit</button>

My modal window

<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog" role="document">
                          <div class="modal-content">
                            <div class="modal-header">
                              <h5 class="modal-title" id="exampleModalLabel">New message</h5>
                              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                              </button>
                            </div>
                            <div class="modal-body">
                              <form>
                                <div class="form-group">
                                  <label for="title" class="col-form-label">Title: </label>
                                  <input type="text" class="form-control" id="title" name="title">
                                </div>
                              </form>
                            </div>
                            <div class="modal-footer">
                              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                              <button type="button" class="btn btn-primary">Send message</button>
                            </div>
                          </div>
                        </div>
                      </div>

My script attached to that blade template below the modal window:

                <script>
                    $('#edit').on('show.bs.modal', function (event) {

                    var button = $(event.relatedTarget)
                    var title = button.data('mytitle')
                    var modal = $(this)

                    modal.find('.modal-body #title').val(title);
                    })
                </script>

Also, I included jquery in the main layout file (so jquery i included on all pages - reference is working):

<script src="{{ asset('js/jquery-3.5.1.min.js') }}"></script>

Can anyone help me here? Right now, the modal shows no data.

frankielee

5 years ago

Level 29

Please make sure the event is triggered, and change the modal.find

         <script>
                    $('#edit').on('show.bs.modal', function (event) {
	console.log("event is trigger"); //<==== here
                    var button = $(event.relatedTarget)
                    var title = button.data('mytitle')
                    var modal = $(this)

                    modal.find('#title').val(title);
                    })
                </script>

acrm

5 years ago

Level 1

HI @frankielee,

thanks for your reply. Having a look at the console, I think this might be my problem, right?

Uncaught ReferenceError: $ is not defined
    <anonymous> http://localhost/dev/projects/w1/public/mgmt/entites:550
processes:550:21
    <anonym> http://localhost/dev/projects/w1/public/mgmt/entities:550
    suspend moz-extension://aa60cc57-70e3-4690-b892-b1239f8df5a9/lib/SyncMessage.js:238
    domSuspender moz-extension://aa60cc57-70e3-4690-b892-b1239f8df5a9/lib/SyncMessage.js:245

Other than that, the modal still does not take any data from the button. It opens but shows no data.

frankielee

5 years ago

Best Answer

Level 29

@acrm The error is due to the jquery script is not loaded, so any jquery feature is not usable. You have to make sure the jquery is added correctly.

Embed your jquery script into below function, reference: https://stackoverflow.com/questions/2194992/jquery-is-not-defined

$(document).ready(function () {
  //your code here
});

acrm

5 years ago

Level 1

Cheers! Thanks, now it's working.

Hello Google, just follow @frankielee and do it like this: :-)


                <script>
                    $(document).ready(function () {
                        $('#edit').on('show.bs.modal', function (event) {
                        console.log("event is triggerd"); //<==== here
                        var button = $(event.relatedTarget)
                        var title = button.data('mytitle')
                        var modal = $(this)

                        modal.find('#title').val(title);
                        })
                    });
                </script>

Please or to participate in this conversation.