在模式引导程序中传递php变量

Question

I have this while loop..

while($list = $cars->fetch(PDO::FETCH_ASSOC)) {
<div class="car-box modalButton" id="tbinfo" data-title="<?php echo $list['title'] ?>" data-toggle="modal" data-src="http://url.com/car.php?q=<?php echo $list['rand_num']; ?>" data-height="<?php echo $height; ?>" data-width="<?php echo $size[0]; ?>" data-target="#preview">

<div class="modal fade" id="preview" tabindex="-1" role="dialog"  aria-labelledby="myModalLabel" aria-hidden="true">
              <div class="modal-dialog">
                 <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel"><?php echo $list['title']; ?></h4>
                   </div>
                 <div class="modal-body">
                      <iframe style="display:block;" frameborder="0"></iframe>
                 </div>
                 <div class="modal-footer">

                         </div>
                </div><!-- /.modal-content -->
             </div><!-- /.modal-dialog -->
          </div><!-- /.modal -->
}

So when i click in the first car of the list my modal popup opens and shows the title normal as it is. When i click on the second car and the modal popup opens it shows me again the title of the first car instead of second car that i clicked on. I tried with jquery to take the title on #tbinfo click with no success:

$('#tbinfo').on('click',function(){
var title = $(this).attr('data-title');
$('.modal-title').html(title);
});

What can i do to fix it? any ideas?

Answer 1

In my project I'm using data- attributes.

Example. Look, how do I pass code to modal.

Link:

<a href="#modal-info" class="text-muted" data-toggle="modal" data-code="{{ code }}">

Modal:

<div class="modal fade" id="modal-info">
    <dd name="code"></dd>
</div>

Event listener:

$('#modal-info').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget); // Button that triggered the modal
    var code   = button.data('code');
    var modal  = $(this);

    modal.find('[name="code"]').text(code);
}

Answer 2

hello you update your code like:

 <?php 
$i=1;
        while($list = $cars->fetch(PDO::FETCH_ASSOC)) {?>
        <div class="car-box modalButton tbinfo" data-title="<?php echo $list['title'] ?>" data-toggle="modal" data-src="http://url.com/car.php?q=<?php echo $list['rand_num']; ?>" data-height="<?php echo $height; ?>" data-width="<?php echo $size[0]; ?>" data-target="#preview_<?php echo $i; ?>">

        <div class="modal fade" id="preview_<?php echo $i; ?>" tabindex="-1" role="dialog"  aria-labelledby="myModalLabel" aria-hidden="true">
                      <div class="modal-dialog">
                         <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                <h4 class="modal-title" id="myModalLabel"><?php echo $list['title']; ?></h4>
                           </div>
                         <div class="modal-body">
                              <iframe style="display:block;" frameborder="0"></iframe>
                         </div>
                         <div class="modal-footer">

                                 </div>
                        </div><!-- /.modal-content -->
                     </div><!-- /.modal-dialog -->
                  </div><!-- /.modal -->
    <?php $i++;    }?>

assign each modal unique id

Answer 3

You just need to increment your html id attributes as its currently always going to reference the first modal created. All id 's must be unique in html.

I would just add in a simple counter and append it to your id. So create a new variable, in this example $i and assign it the value of 0 . In your loop, increment the value either at the beginning or end of the loop. Then append the value of $i to your modal id attribute and the modalButton 's data-target attribute. So preview becomes something like preview-<?=$i;?> in all instances.

Here, something like this:

<?php

$i = 0;

while($list = $cars->fetch(PDO::FETCH_ASSOC)) {

    ++$i;
?>

    <div class="car-box modalButton" id="tbinfo" data-title="<?php echo $list['title'] ?>" data-toggle="modal" data-src="http://url.com/car.php?q=<?php echo $list['rand_num']; ?>" data-height="<?php echo $height; ?>" data-width="<?php echo $size[0]; ?>" data-target="#preview-<?=$i;?>">

    <div class="modal fade" id="preview-<?=$i;?>" tabindex="-1" role="dialog"  aria-labelledby="myModalLabel" aria-hidden="true">

    ... modal markup ...

Make sure your PHP installation supports the shorthand echo <?=$VAR;?> , if that isn't working then you can just echo the variable out as normal, like you've done else where <?php echo ... ?> .

That will make sure that every time you click the button, it opens a new, unique, modal instead of just the first one.

Answer 4

Don't use id . Use class name .

<?php 
while($list = $cars->fetch(PDO::FETCH_ASSOC)) {?>

    <div class="car-box modalButton" id="tbinfo" data-title="<?php echo $list['title'] ?>" data-toggle="modal" data-src="http://url.com/car.php?q=<?php echo $list['rand_num']; ?>" data-height="<?php echo $height; ?>" data-width="<?php echo $size[0]; ?>" data-target="#preview"></div>

}?>

Place this code in footer or in same page in down.

<div class="modal fade" id="preview" tabindex="-1" role="dialog"  aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
       <div class="modal-content">

      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

JS

<script>
    $('.modalButton').click(function(){
        var title = $(this).attr('data-title');
        $.ajax({url:"ajax_modalTitle.php?title="+title,cache:false,success:function(result){
            $(".modal-content").html(result);
        }});
    });
</script>

Create a page name ajax_modalTitle.php (If you are looking to change this page name. Change in <script></script> tag too. Both are related.)

<?php
$title = $_GET['title'];
?>

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title" id="myModalLabel"><?php echo $title;?></h4>
</div>
<div class="modal-body">
    <iframe style="display:block;" frameborder="0"></iframe>
</div>
<div class="modal-footer">

</div>