I have a small problem, I have to use the modal for 24 different cases, I have to get an id before going into the modal to test this id with the modal id and display the result in the modal. I do not know if I expressed well! but here is the code
<!-- Modal -->
<?php
$x=7;
$case = $fun -> getCaseByIde($x);
?>
<div id="myModal-<?php echo $x; ?>" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content" style="text-align: center;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h1><?php echo $x; $case['titre']; ?></h1>
</div>
</div>
</div>
</div>
<!-- #END# Modal -->
<!-- Modal -->
<?php
$x=8;
$case = $fun -> getCaseByIde($x);
?>
<div id="myModal-<?php echo $x; ?>" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content" style="text-align: center;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h1><?php echo $x; $case['titre']; ?></h1>
</div>
</div>
</div>
</div>
<!-- #END# Modal -->
<!-- Modal -->
<?php
$x=9;
$case = $fun -> getCaseByIde($x);
?>
<div id="myModal-<?php echo $x; ?>" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content" style="text-align: center;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h1><?php echo $x; $case['titre']; ?></h1>
</div>
</div>
</div>
</div>
<!-- #END# Modal -->
It seems that you're manually creating all your 24 modals?
Try using a for loop:
<?php
$modalCount = 24; // Number of modals you want to create. (Nombre de modals à créer)
// Create a modal from 0 to 23. (Créer un modal de 0 à 23)
// Use "$x = 1" and "$x <= $modalCount" if you want from 1 to 24. (Utilise ... si tu veux de 1 à 24)
for ($x = 0 ; $x < $modalCount ; $x++): ?>
<!-- Modal -->
<?php $case = $fun->getCaseByIde($x); ?>
<div id="myModal-<?php echo $x; ?>" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content" style="text-align: center;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h1><?php echo $x; $case['titre']; ?></h1>
</div>
</div>
</div>
</div>
<!-- #END# Modal -->
<?php endfor; ?>
If it is not your problem, please, be more precise.
Related
I have an array of locations that when a users clicks on that card it should show a modal with that specific locations data
How do I pass the data to the modal?
<!-- Card -->
<div class="locationCard" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#exampleModal" >
<div class="locationText">
<?php echo $slide['title']; ?>
</div>
<?php echo '<img class="cardImage" >' . wp_get_attachment_image( $slide['image'], $size = 'medium',["class" => "cardImage","alt"=>"some"]) . '</img>'; ?>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"><?php echo $slide['title']; ?></h5>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
After searching a lot, doing lots of debugging, and I figured out that inside slick carousel div, the bootstrap modal is not displaying. Only showing a gray dropback.
Here is code: In this code, we are getting details from the database and with slick showing images and when someone clicks on those images it will open a modal for that image. But everything is fine except this. How to call the modal inside slick div.
Thank you in advance
<?php
$ush = $mysqli->prepare("SELECT company_id, img, name from list");
$ush->execute();
$ush->store_result();
$ush->bind_result($u_bid, $u_bimg,$u_bname);
?>
<div class="company-logo">
<?php
while($ush->fetch()){
?>
<div>
<a href="#<?php echo $u_bid;?>" data-toggle="modal" data-target="#<?php echo $u_bid;?>"><img
src="data:image/png;base64,<?php echo base64_encode($u_bimg); ?>" height="80px" width="80px"></a>
<!-- Modal -->
<div class="modal" id="<?php echo $u_bid;?>" tabindex="-1" role="dialog" aria-labelledby="<?php echo $u_bid;?>" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-md" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="container text-center">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><h3><b>X</b></h3></span>
</button>
<h3><?php echo $u_bname;?></h3>
</div>
</div>
</div>
</div>
</div>
</div>
<?php
}
$ush->close();
?>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.company-logo').slick({
dots:true,
infinite:false,
speed:300,
slidesToShow:14,
slidesToScroll:14,
arrows:false,
responsive:[{
breakpoint:768,
settings:{
slidesToShow:4,
slidesToScroll:4
}
}]
})
});
</script>
I think you should move the modal code parts outside of your carousel parts like this:
<?php
$ush = $mysqli->prepare("SELECT company_id, img, name from list");
$ush->execute();
$ush->store_result();
$ush->bind_result($u_bid, $u_bimg,$u_bname);
$carousel_content = '';
$modal_content = '';
while($ush->fetch()){
$carousel_content .= '<div>
<a href="#'.$u_bid.'" data-toggle="modal" data-target="#'.$u_bid.'"><img
src="data:image/png;base64,'.base64_encode($u_bimg).'" height="80px" width="80px"></a>
</div>';
$modal_content .= '<!-- Modal -->
<div class="modal" id="'.$u_bid.'" tabindex="-1" role="dialog" aria-labelledby="'.$u_bid.'" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-md" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="container text-center">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><h3><b>X</b></h3></span>
</button>
<h3>'.$u_bname.'</h3>
</div>
</div>
</div>
</div>
</div>';
?>
<?php
}
$ush->close();
?>
<div class="company-logo"><?=$carousel_content?></div>
<div id="modal_contents"><?=$modal_content?></div>
<script type="text/javascript">
$(document).ready(function(){
$('.company-logo').slick({
dots:true,
infinite:false,
speed:300,
slidesToShow:14,
slidesToScroll:14,
arrows:false,
responsive:[{
breakpoint:768,
settings:{
slidesToShow:4,
slidesToScroll:4
}
}]
})
});
</script>
I've got a modal in an blade file and want to set the id tag from another blade file.
My modal blade:
<!-- Modal -->
<div class="modal fade" id="modal{{title}}" tabindex="-1" role="dialog" aria-labelledby="modal{{title}}Title" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
#yield('modal-content')
</div>
</div>
</div>
</div>
How do I set those arguments correctly?
I have tried:
#section('title', 'Test')
But it translates to the following and give an 500:
id="modal{<?php echo title; ?>}"
I've found a workaround to get it working:
#section('title')
{{ $title = 'test' }}
#endsection
using template text: id="modal{{$title}}"
#section('modalTitle', 'YOUR_TITLE')
<!-- Modal -->
<div class="modal fade" id="modal{{ #yield('title') }}" tabindex="-1" role="dialog" aria-labelledby="modal{{title}}Title" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
#yield('modal-content')
</div>
</div>
</div>
</div>
I implemented bs4, but on the modal I have a problem. In bs4 the code work but the data is not inserted. it's like a blank page.
In this case, the value of $cInfo->configuration_title, does'nt appear.
<a data-toggle="modal" data-refresh="true" href="configuration_popup.php?<?php echo 'gID='. $_GET['gID'] . '&cID=' . $Qconfiguration->valueInt('configuration_id'); ?>" data-target="#myModal_<?php echo $Qconfiguration->valueInt('configuration_id'); ?>"><?php echo HTML::image (DIR_WS_ICONS . 'edit.gif', ICON_EDIT) ?></a>
<div class="modal fade" id="myModal_<?php echo $Qconfiguration->valueInt('configuration_id'); ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="dialog">
<div class="modal-content" style="padding:10px 10px 10px 10px;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel"><?php echo $cInfo->configuration_title; ?></h4>
</div>
<div class="modal-body">
<div class="te"></div>
</div>
</div> <!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
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?
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);
}
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
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.
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>