CODEWITHSUNDEEP
loopslaravel
sad beginner
sad beginner

Reputation: 79

How do I show different modal data on each subjects displayed?

How do I show different modal data on each subjects displayed? My Problem: Showing same modal data on each subjects displayed.

My blade view

@section('content')
<!-- Main content -->
<section class="content" style="background-color:#fff; padding-bottom:50px;" id="subjects">

 <div class="subjects-content">
   <h3>List of Subjects</h3>
   <div class="box-body box-self-evaluation" v-show="subjects.length > 0">
    <table id="example2" class="table table-hover table-striped sortable">
      <thead>
        <tr>
          <th>Subject Area</th>
          <th>Course Title</th>
          <th>Failed</th>
          <th>View more</th>
   </tr>
</thead>
@foreach ($all_subjects as $subject)
<tbody>
    <tr>
      <td>
        <span> {{ $subject->subject_code }}</span>
 </td>
 <td>
        <span> {{ $subject->description }} </span>
 </td>
 <td>
        <span> {{ $subject->grade()->where('grade','F')->count() }}  </span>
 </td>
 <td><span> <div class="btn btn-crimson btn-inline-block" data-toggle="modal" data-target="#myModal"><a href="#" class="btn-view-more">View more info</a></div> </span></td>
</tr>       
</tbody>

@endforeach
</table>             
</div>
<div class="confirmation-buttons-self-evaluation">
    <div class="btn btn-blueviolet btn-inline-block btn-create">Go to Self-Evaluation Page</div>
</div>             

@foreach ($all_subjects as $subject)
<!--MODAL -->
<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
      <!-- MODAL content -->
      <div class="modal-content" style="width:70%; margin:0 auto; margin-top:100px; max-height: calc(100vh - 210px); overflow-y: auto;">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">×</button>
          <h4 class="modal-title">Subject: {{ $subject->subject_code }}</h4>
   </div>

   <div class="modal-body" style="padding-top:0">
          <center>
            <table class="table">      
              <thead>
                <th colspan="3" style="text-align:center">List of Disgraceful Students</th>
         </thead>


         <thead class="failed-header">
                <th>Section: <span style="color:#000"> CS <!-- SECTION --> </span></th>
                <th>Professor: <span style="color:#000"> John Doe <!-- PROF --> </span></th>
                <th>Failed: <span style="color:#000"> 2 <!-- NUMBER OF FAILED SA SECTION --> </span></th>
         </thead>
         <tbody>
                <tr>
                  <td><img src="{{ asset('dist/img/default.png')}}" class="img-square" alt="User Image" style="height:50px; width:50px"></td>
                  <td style="padding-top: 20px" colspan="2"> John Jashuel  </td>
           </tr>
           <tr>
                  <td><img src="{{ asset('dist/img/default.png')}}" class="img-square" alt="User Image" style="height:50px; width:50px"></td>
                  <td style="padding-top: 20px" colspan="2"> John Caezar  </td>
           </tr>                                
    </tbody>
</center>
</table>
</div>

<div class="modal-footer">
   <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
<!-- /. modal content-->
@endforeach
</section>

@endsection

what is wrong with my code? how do I solve this? help me please... any suggestion or comments are well appreciated thank you!

Upvotes: 2

Views: 183

Answers (1)

Achraf Khouadja
Achraf Khouadja

Reputation: 6279

try to change

 data-target="#myModal"

to 

data-target="#{{$subject->id}}"

and id in <--modal--> From 

 id="myModal"

to 

id="{{$subject->id}}"

Upvotes: 2

Related Questions