毎回モーダルで同じファイルを開く

Question

私は問題があります。自分のデータをモーダルで動的に表示したい。最初のモーダル・ボタンをクリックすると、そのデータが動的に表示され、データが表示されます。次に、2番目のボタンをクリックすると、同じプレビュー・データが最初に表示されます。ページをリロードした後、最初のボタンをクリックしたときに2回目のクリックを動的に開くと、再び2番目のモーダルデータが表示されます。 そのWordPressサイト。

<a class="book-it-link" href="http://localhost/abc/modal/?id=<?=$row->id?>" data-toggle="modal" data-target="#myModal">Book IT</a> 


     <div class="modal booking-modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
      <div class="modal-dialog" role="document"> 
       <div class="modal-content"> 
        <div class="modal-body"> 
         <?php 
      foreach ($query as $row) 
       { 
       //var_dump($row); 
       ?> 


         <div class="modal-header"> 
         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
         </div> 
         <div class="row"> 
          <div class="col-md-12"> 
           <div class="booking-modal-form"> 
            <form action=""> 
             <div class="form-group"> 
              <label>Check-in/Out</label> 
              <input type="text" class="form-control datepicker" id="datepicker" name="datefilter" placeholder="Check-in/Out"> 

             </div> 

             <div class="info-text"> 
              <?php echo $row->description ?> 
             </div> 

             <div class="book-it-btn"> 
              <button type="submit" class="btn btn-default">Apply</button> 
             </div> 
            </form> 
           </div> 
          </div> 
         </div> 


        <?php 
       } 
      ?> 

        </div> 
       </div> 
      </div> 
     </div> 

jqueryのモーダルデータは、コード破壊：あなただけではないすべてのダイアログのダイアログの一部を繰り返しているので、

jQuery('body').on('hidden.bs.modal', '.modal', function() { 
     jQuery(this).removeData('bs.modal'); 
     }); 

Answer 1

を この

 <?php 
       foreach ($query as $row) 
        { 
        //var_dump($row); 
        ?> 

<a class="book-it-link" href="http://localhost/abc/modal/?id=<?=$row->id?>" data-toggle="modal" data-target="#myModal<?=$row->id?>">Book IT</a> 


    <div class="modal booking-modal fade" id="myModal<?=$row->id?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
     <div class="modal-dialog" role="document"> 
      <div class="modal-content"> 
       <div class="modal-body"> 



        <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
        </div> 
        <div class="row"> 
         <div class="col-md-12"> 
          <div class="booking-modal-form"> 
           <form action=""> 
            <div class="form-group"> 
             <label>Check-in/Out</label> 
             <input type="text" class="form-control datepicker" id="datepicker" name="datefilter" placeholder="Check-in/Out"> 

            </div> 

            <div class="info-text"> 
             <?php echo $row->description ?> 
            </div> 

            <div class="book-it-btn"> 
             <button type="submit" class="btn btn-default">Apply</button> 
            </div> 
           </form> 
          </div> 
         </div> 
        </div> 




       </div> 
      </div> 
     </div> 
    </div> 
    <?php 
      } 
     ?>