pass php variable in modal bootstrap - 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">×</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">×</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">×</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>