How do i make a modal accept data when button is clicked?

Question

I have a bootstrap modal. i call it using the #data-target. Problem i have is I'd like to populate the modal with the details from item on a list of feedbacks which i fetch from the database. I want it dynamic, so it shows data of any item clicked from the loop. I'm really new to js and dont know ho to handle it. here's my laravel code for the feedbacks:

<div class="body">
                        @if(count($feedbacks) > 0)
                        <ul class="basic-list">
                            @forelse($feedbacks as $feedback)
                            <li>{{ $feedback->subject }} <a href="javascript:void(0);" data-toggle="modal" data-target="#defaultModal"><span class="pull-right label-info label">View</span></a></li>
                            @empty
                            <p class="text-danger">No Feedbacks Yet</p>
                            @endforelse
                        @endif
                        </ul>
                    </div>

and this is the modal:

<div class="modal fade" id="defaultModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="defaultModalLabel">{{ $feedback->subject }}</h4>
            </div>
            <div class="modal-body">{{ $feedback->content }}</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-link waves-effect">SAVE CHANGES</button>
                <button type="button" class="btn btn-link waves-effect" data-dismiss="modal">CLOSE</button>
            </div>
        </div>
    </div>
</div>

The modal shows right now, but doesn't pass data when clicked.

Answer 1

if you want to avoid multiple modals, and still get data from your database, perform an ajax call to retrieve the $feedback->content by its id

1. Remove the data-target and data-toggle attribute from your link
2. Add a class attribute and a unique id = {{$feedback->id}} to the link

<div class="body">
@if(count($feedbacks) > 0)
    <ul class="basic-list">
    @forelse($feedbacks as $feedback)
        <li>{{ $feedback->subject }} <a href="#defaultModal" id="{{$feedback->id}}" class="feedback-open"><span class="pull-right label-info label">View</span></a></li>
    @empty
        <p class="text-danger">No Feedbacks Yet</p>
    @endforelse
    </ul
 @endif
 </div>

3. create a route that accepts the feedback id as a url parameter

Route::get('/get-feedback-content/{feedback}', 'YourController@getFeedbackContent');

4. Add this to YourController:

public function getFeedbackContent($feedback){
    //this assumes you have a feedback model, change as appropriate
    $fb = FeedbackModel::find($feedback);

    //return an feedback object as an array
    return response()->json(array('feedback'=> $fb), 200);
}

5. Using jQuery your script should look something like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {

  $(".feedback-open").click(function(){
      id = $(this).attr('id');
      getMessage(id);
  })
  function getMessage(id){
      $.ajax({
         type:'GET',
         url:'/getmsg/'+id,
         data:'_token = <?php echo csrf_token() ?>',
         success:function(data){
            $("#defaultModal .modal-title").html(data.feedback.subject);
            $("#defaultModal .modal-body").html(data.feedback.content);
           $('#defaultModal').modal('show');
         }  
      });
   }
});
</script>

Answer 2

I think you have not displayed both fields i.e. $feedback->subject and $feedback->content into modal popup.

Please try below code to display the subject and content fields into model as per [Laravel]:

1) {{ $feedback->subject }}

2) {{ $feedback->content }}

<div class="body">
    @if(count($feedbacks) > 0)
    <ul class="basic-list">
        @forelse($feedbacks as $feedback)
        <li>{{ $feedback->subject }} <a href="javascript:void(0);" data-toggle="modal" data-target="#defaultModal_{{ $feedback->id }}"><span class="pull-right label-info label">View</span></a></li>
        <div class="modal fade" id="defaultModal_{{ $feedback->id }}" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="defaultModalLabel">{{ $feedback->subject }}</h4>
                    </div>
                    <div class="modal-body">{{ $feedback->content }}</div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-link waves-effect">SAVE CHANGES</button>
                        <button type="button" class="btn btn-link waves-effect" data-dismiss="modal">CLOSE</button>
                    </div>
                </div>
            </div>
        </div>
        @empty
        <p class="text-danger">No Feedbacks Yet</p>
        @endforelse
    @endif
    </ul>
</div>

Hope this helps you.

Answer 3

Modal have to be unique for every data and you didn't use {{}} to echo data, Please have a look the following code:

<div class="body">
@if(count($feedbacks) > 0)
<ul class="basic-list">
    @foreach($feedbacks as $key => $feedback)
    <li>
        {{ $feedback->subject }} 
        <a href="javascript:void(0);" data-toggle="modal" data-
           target="#modal-{{$key}}"><span class="pull-right label-info label">View</span></a>

        <div class="modal fade" id="modal-{{$key}}" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="defaultModalLabel">{{$feedback->subject}} </h4>
                    </div>
                    <div class="modal-body"> {{$feedback->content}}</div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-link waves-effect">SAVE CHANGES</button>
                        <button type="button" class="btn btn-link waves-effect" data-dismiss="modal">CLOSE</button>
                    </div>
                </div>
            </div>
        </div>

    </li>
    @endforeach 
</ul>
@else 
<p class="text-danger">No Feedbacks Yet</p>
@endif