CODEWITHSUNDEEP
javascriptphphtmllaravellaravel-5
treb
treb

Reputation: 548

Can modals be inside foreach?

this table is a list of recommended students, and when "View details" is clicked, The "Recommendation Details(in text format)" should show in a form of modal... I have no problem at the first row of Recommendation detail, my problem is the next following Recommendation details is showing only the FIRST Recommendation details.. 

<table class="table no-margin">
   @foreach($faculty->recommendations as $student)
     <tr>
       <td class="text-muted" valign="middle"><a href="{{ URL::to('/', $faculty->user->id) }}"> Name </a></td>

     <td align="right"><button type="button" class="btn btn-primary btn-view" data-toggle="modal" data-target="#dialog-box" >View Details</button>
          <div class="modal fade" id="dialog-box" role="dialog" aria-hidden="true">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h2>Recommendation Details</h2>
                </div>
                <div class="modal-body">
                  <div class="form-group">           
                    <p class="jobpost-p">{{ $faculty->pivot->recommendation_details }}</p>
                  </div>
                </div>
             </div>
           </div>
        </div> <!--Modal close-->
   @endforeach
</table>

Upvotes: 1

Views: 866

Answers (2)

Eduardo Pacios
Eduardo Pacios

Reputation: 1865

You can, but it's not a best practice. If you have a list of 25 items, you'll have 25 modals. Tons of useless html. I think a good way to go is to create a single modal with all the fields you need, and when you click on an item, populate the modal with it's data with javascript. You can do it in a few minutes with vuejs

Upvotes: 0

Mike Hamilton
Mike Hamilton

Reputation: 1567

Yes they can. You will however want to make sure that each modal's trigger element has a unique data-target attribute and each modal's id attribute shares that same unique value.

An easy solution could be to use a unique value that exists in each array that you are iterating through. For example, if the value of $student has a unique id, you could append that to each modal id.

Upvotes: 2

Related Questions