每次模态打开同一个文件

时间:2017-05-02 08:03:32

标签: javascript jquery wordpress twitter-bootstrap bootstrap-modal

我有问题。我希望我的数据以模态动态查看。当我单击第一个模态按钮时,它会动态打开并显示数据,然后当我点击第二个按钮时,它会显示相同的预览第一次打开的数据。重新加载页面后,当我点击第一个按钮时再次点击它再次动态打开它显示第二个模态数据。 它的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');
      });

1 个答案:

答案 0 :(得分:0)

因为你重复部分对话框而不是所有对话框 试试这个

     <?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
            }
        ?>