Add maphilight in image inside Bootstrap modal - javascript

I have a 7446x1800 image that I need to map. I used maphilight jQuery plugin to achieve this. I was able to make it work(see here ) but what I want to achieve is to make it work inside a Bootstrap modal. I'm guessing it has something to do with z-index but I can't make it work.
The process is, when the user clicks on the smaller version of the image, a bootstrap modal will pop up where he/she could view the whole image and choose a 'lot' to make a reservation. Different colors are used to indicate whether a lot is already taken, reserved, or still available.
Here's my whole code:
<style type="text/css">
.modal.modal-wide .modal-dialog {
width: 90%;
}
.modal-wide .modal-body {
overflow-y: auto;
}
#tallModal .modal-body p { margin-bottom: 900px }
</style>
<div class="row">
<div class="zoomTarget" data-debug="true">
<img src ="../../assets/images/uploads/map-1.png" alt="map 1" width="755px" height="200px" data-toggle="modal" data-target="#showmapModal-1">
<div class="modal modal-wide fade" id="showmapModal-1" tabindex="-1" role="dialog" aria-labelledby="showmapModal-1">
<div class="modal-dialog" role="document">
<div class="modal-content">
<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="showmapModal-1">Reserve Lot</h4>
</div>
<div class="modal-body">
<div id="veg_demo">
<img class="map" id="map-<?php echo $_GET['map']; ?>" src="../../assets/images/uploads/map-1.png" usemap="#map-1" >
<div style="clear:both; height:8px;"></div>
<div id="selections" style="clear:both;"></div>
</div>
<map pid="map-1" name="map-1">
<?php
$plot_map = SelectAll('pmp_lot_map');
if($plot_map){
$counter = 1;
if(mysqli_num_rows($plot_map) > 0) {
while($row = mysqli_fetch_assoc($plot_map)) {
$lot_map_uuid = $row['uuid'];
$block_no = $row['block_no'];
$lot_no = $row['lot_no'];
$coordinates = $row['coords'];
$lot_status = $row['status'];
if($lot_status == 'available') {
$fillColor = '87D37C';
$message = "This lot is available. Do you really want to reserve this Block # ".$block_no.", Lot # ".$lot_no.".";
} else if($lot_status == 'reserved') {
$fillColor = 'F4D03F';
$message = "This lot is already reserved.";
} else if($lot_status == 'taken') {
$fillColor = '96281B';
$message = "This lot is not available.";
}
?>
<area data-toggle="modal" data-target="#mapModal_<?php echo $counter; ?>" data-maphilight='{"strokeColor":"000000","strokeWidth":3,"fillColor":"<?php echo $fillColor; ?>","fillOpacity":1}' href="#" shape="poly" coords="<?php echo $coordinates; ?>" data-alt="Block <?php echo $block_no; ?> Lot <?php echo $lost_no; ?>" data-title="Block <?php echo $block_no; ?> Lot <?php echo $lot_no; ?>">
<div class="modal fade" id="mapModal_<?php echo $counter; ?>" tabindex="-1" role="dialog" aria-labelledby="mapModalLabel-<?php echo $counter; ?>">
<div class="modal-dialog" role="document">
<div class="modal-content">
<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="mapModalLabel-<?php echo $counter; ?>">Reserve Lot</h4>
</div>
<div class="modal-body">
<p style="text-indent:0;">
<?php echo $message; ?>
</p>
</div>
<div class="modal-footer">
<?php if($lot_status == 'available') {?><button type="button" class="btn btn-success" onclick="saveMapModal('<?php echo $lot_map_uuid; ?>','mapModal_<?php echo $counter; ?>','<?php echo $uuid; ?>');">Continue</button><?php } ?>
<?php if($lot_status == 'available') {?><button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button><?php } ?>
<?php if($lot_status != 'available') {?><button type="button" class="btn btn-default" data-dismiss="modal">Ok</button><?php } ?>
</div>
</div>
</div>
</div>
<?php
$counter++;
}
}
}
?>
</map>
</div>
<div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('.map').maphilight();
});
$(".modal-wide").on("show.bs.modal", function() {
var height = $(window).height() - 100;
$(this).find(".modal-body").css("max-height", height);
});
</script>
Or if it's not possible, are there any other ways to achieve it?
Any help is highly appreciated.
P.S. I can't tag "maphilight" plugin because it says it needs to have 1500 reputation.


style="position:absolute;"
is the culprit. I removed it when I use the maphilight in modal and everything seems to work!


solved
//id or class where you click to activate the modal
$('.the_modal_click').on('click', function() {
//after activating the modal, activate maphilight
setTimeout(function () {
$('.modal img').maphilight();
}, 300);
});

Related

How to pass data for Bootstraps modal

Trying to pass the value of my button to my bootstrap modal and modal is not receiving any data. The button has its data inside but using the same variable for the modal is not working. Here is my code.
<?PHP
$query = "SELECT * FROM tbl_posts INNER JOIN tbl_user ON tbl_posts.userID = tbl_user.userID WHERE postStatus = 'Show' ORDER BY postDateTime DESC;";
$result = mysqli_query($conn, $query);
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
?>
<div class="container post" style="border: 1px solid black;">
<h4><?PHP echo $row['userFirstname'] . " " . $row['userLastname']; ?></h4>
<p class="time"><?PHP echo time_elapsed_string($row['postDateTime']); ?></p>
<p class="post"><?PHP echo $row['postDetail'];?></p>
<button data-toggle="modal" data-target="#myModal" type="submit" class="btn btn-lg btn-block" name="postDetail" value="<?PHP echo $row['postID'] ?>"><?PHP echo $row['postID']; ?></button>
<Br>
</div>
<?PHP
?>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><?PHP echo $row["postID"]; ?></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- Modal content-->
</div>
</div>
<!-- Modal -->
<?PHP
}
}
?>
The modal is showing but the <?PHP echo $row["postID"]; ?> is showing me only the last row of the database.

your $row is effective in while loop.
if yout want to use only one modal and reuse, you will need to use ajax when click the button.
or move modal section to inside while loop.
pair modal div's id and button's data-target.
each modal must has different id. in your case, postID will be good identifier.
<?PHP
$query = "SELECT * FROM tbl_posts INNER JOIN tbl_user ON tbl_posts.userID = tbl_user.userID WHERE postStatus = 'Show' ORDER BY postDateTime DESC;";
$result = mysqli_query($conn, $query);
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
?>
<div class="container post" style="border: 1px solid black;">
<h4><?PHP echo $row['userFirstname'] . " " . $row['userLastname']; ?></h4>
<p class="time"><?PHP echo time_elapsed_string($row['postDateTime']); ?></p>
<p class="post"><?PHP echo $row['postDetail'];?></p>
<button data-toggle="modal" data-target="#myModal_<?PHP echo $row['postID']; ?>" type="submit" class="btn btn-lg btn-block" name="postDetail" value="<?PHP echo $row['postID'] ?>"><?PHP echo $row['postID']; ?></button>
<Br>
</div>
<!-- Modal -->
<div id="myModal_<?PHP echo $row['postID']; ?>" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><?PHP echo $row["postID"]; ?></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- Modal content-->
</div>
</div>
<!-- Modal -->
<?PHP
}
}
?>

Try this code:
<?PHP
$query = "SELECT * FROM tbl_posts INNER JOIN tbl_user ON tbl_posts.userID = tbl_user.userID WHERE postStatus = 'Show' ORDER BY postDateTime DESC;";
$result = mysqli_query($conn, $query);
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
?>
<div class="container post" style="border: 1px solid black;">
<h4><?PHP echo $row['userFirstname'] . " " . $row['userLastname']; ?></h4>
<p class="time"><?PHP echo time_elapsed_string($row['postDateTime']); ?></p>
<p class="post"><?PHP echo $row['postDetail'];?></p>
<button data-toggle="modal" data-target="#myModal" type="submit" class="btn btn-lg btn-block" name="postDetail" value="<?PHP echo $row['postID'] ?>"><?PHP echo $row['postID']; ?></button>
<Br>
</div>
<?PHP
}
}
?>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><?PHP echo $_POST["postID"]; ?></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- Modal content-->
</div>
</div>
<!-- Modal -->

Try to change your button to this:
<button class="btn btn-lg btn-block btn-my-button" name="postDetail" data-title="<?php echo $row['postID']; ?>"><?php echo $row['postID']; ?></button>
just put the value that you need with the data-* in the button then add jquery with the class of your button.
jquery:
$('.btn-my-button').click(function(){
$('#myModal .modal-title').text($(this).data('title'));
$('#myModal').modal('show');
});

Edit function using modal dialog (JQuery)

I have the following code in my application/view/userlist.php
<script type="text/javascript">
$(document).ready(function(){
$('.edit-row').live('click',function(){
var me = $(this);
var editModal = $('#myModalEdit');
editModal.find('#userFullName').val(me.attr('data-userFullName'));
editModal.find('#userID').val(me.attr('data-userID'));
editModal.find('#userName').val(me.attr('data-userName'));
editModal.find('#userPass').val(me.attr('data-userPass'));
editModal.find('#userEmail').val(me.attr('data-userEmail'));
$('#myModalEdit').modal('show');
});
});
</script>
<div class="modal fade" id="myModalEdit" 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">Edit System User <label id="userFullName"></label></h4>
</div>
<form role="form" id="userForm" action="<?php echo base_url().'admin/updateUser'; ?>" method= "POST">
<!-- #myModalEdit codes here-->
</form>
<!-- some html codes -->
<a class="edit-row" href="javascript:"
data-userID="<?php echo $row->userID; ?>"
data-userFullName="<?php echo $row->userFullName; ?>"
data-userName="<?php echo $row->userName; ?>"
data-userEmail="<?php echo $row->userEmail; ?>"
data-userPass="<?php echo $row->userPass; ?>"
>
<button type="button" data-hover="tooltip" title="Edit User <?php echo $row->userName; ?>" class="btn btn-default">
<i class="fa fa-pencil"></i>
</button>
</a>
I got error
Uncaught TypeError: $(...).live is not a function
What does it mean?

User .on() instead of .live()
try
$(parentDiv).live('click', '.edit-row', function(){
// write you code here
});

Bootstrap Modal in a While Loop

I'm using Advanced Custom Fields plugin with Wordpress and Bootstrap for style.
I'm having problems with a while loop to show some custom posts.
Just the first post content modal-body "
<?php the_field('desc_completa_aula'); ?>
" is showing. I want show all modal-bodies separate, only when click each one.
I tried clean the jquery but no sucess. Could you guys help me?
<?php
// args
$args = array(
'posts_per_page' => 10,
'post_type' => 'post',
'category_name' => 'aula-avulsa',
'orderby' => 'date',
'order' => 'DESC'
);
// query
$the_query = new WP_Query($args);
?>
<?php if ($the_query->have_posts()): ?>
<div class="row" style="text-align: center;">
<?php while ($the_query->have_posts()) : $the_query->the_post(); ?>
<div class="col-lg-4 col-md-4 col-xs-6">
<p class="subtitle-lession"><?php the_field('aula_ou_curso'); ?></p>
<h1 class="w-blog-entry-title-h" style=""><?php the_field('titulo_aula'); ?></h1>
<p><strong><i class="fa fa-calendar"></i> Data</strong><br/> <?php the_field('data_aula'); ?></p>
<p><strong><i class="fa fa-clock-o"></i> Horário</strong><br/> <?php the_field('horário_aula'); ?></p>
<p class="description-lession"><strong><i class="fa fa-pencil-square-o"></i> Descrição</strong><br/>
<?php the_field('desc_pequena_aula'); ?>
</p>
<a href="#contato">
<button class="btn-lession">Fazer Inscrição</button>
</a>
<!-- Button trigger modal -->
<button type="button" class="btn-lession-info" data-toggle="modal" data-target="#myModal" title="<?php the_field('desc_completa_aula'); ?>">
Saiba mais
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<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 the_field('titulo_aula'); ?></h4>
</div>
<div class="modal-body">
<p style="color: #000"> <?php the_field('desc_completa_aula'); ?></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
<?php wp_reset_query(); // Restore global post data stomped by the_post(). ?>
I was using this javascript code:
<script type="text/javascript">
$(document).ready(function() {
$('.modal').on('hidden.bs.modal', function(e)
{
$(this).removeData();
}) ;
});
</script>

I think that your problem is that you have the same modal myModal for all your posts. You need to introduce a variable i that increases with each loop. This way you can distinguish between each modal.

Show data based of selected id on modal popup window after click a button php mysql

On my website, when the button is clicked, it will prompt to a popup window. Im using the modal popup window. My problem is, I cant get the right data that being retrieved based on the id of the button. Below is my code:
The html table:
<tbody>
<?php
$counter = 1;
$data = "SELECT * FROM family";
$result = $conn->query($data);
while($ser=mysqli_fetch_array($result))
{
?>
<tr>
<td><center><?php echo $counter;
$counter++; ?></center></td>
<td><center><?php echo $ser['fam_id'];?></center></td>
<td><center><?php echo $ser['fam_name']; ?></center></td>
<td><center><button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" data-id=<?php echo $ser['fam_id'];?>>Edit Attendance Status</button></center>
The fam_id is the primary key.
Then, below is the code for modal popup window
<!-- Modal -->
<form id="form1" method="post">
<div class="modal fade" id="myModal" 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"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="fam_id">Name <?php echo $ser['fam_name'];?></h4>
</div>
<div class="modal-body">
<b>Details</b>
<hr></hr>
Address: <?php echo $ser['fam_add']; ?><p></p>
Phone_num: <?php echo $ser['fam_phone']; ?><p></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</form>
Moreover, Im doing them in one file. In conclusion, it is like below:
<tbody>
<?php
$counter = 1;
$data = "SELECT * FROM family";
$result = $conn->query($data);
while($ser=mysqli_fetch_array($result))
{
?>
<tr>
<td><center><?php echo $counter;
$counter++; ?></center></td>
<td><center><?php echo $ser['fam_id'];?></center></td>
<td><center><?php echo $ser['fam_name']; ?></center></td>
<td><center><button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" data-id=<?php echo $ser['fam_id'];?>>Edit Attendance Status</button></center>
<!-- Modal -->
<form id="form1" method="post">
<div class="modal fade" id="myModal" 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"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="fam_id">Name <?php echo $ser['fam_name'];?></h4>
</div>
<div class="modal-body">
<b>Details</b>
<hr></hr>
Address: <?php echo $ser['fam_add']; ?><p></p>
Phone_num: <?php echo $ser['fam_phone']; ?><p></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</form>
</td>
</tr>
<?php
}
?>
</tbody>

<tbody>
<?php
$counter = 1;
$data = "SELECT * FROM family";
$result = $conn->query($data);
while($ser=mysqli_fetch_array($result))
{
?>
<tr>
<td><center><?php echo $counter; $counter++; ?></center></td>
<td><center><?php echo $ser['fam_id'];?></center></td>
<td><center><?php echo $ser['fam_name']; ?></center></td>
<td>
<center>
<a class="modalLink" href="#myModal" data-toggle="modal" data-target="#myModal" data-id="<?php echo $ser["fam_id"]; ?>" data-addr="<?php echo $ser['fam_add']; ?>" data-phone="<?php echo $ser['fam_phone']; ?>" data-name="<?php echo $ser['fam_name']; ?>">
<button class="btn btn-primary btn-sm">
Edit Attendance Status
</button>
</a>
</center>
Place this code in footer.php or end of this page.
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
Call your 'somepage.php' (Separate page.Where modal-body is present) through ajax. Place this <script></script> in your JS file.
<script>
$('.modalLink').click(function(){
var famID=$(this).attr('data-id');
var famAddr=$(this).attr('data-addr');
var famPhone=$(this).attr('data-phone');
var famName=$(this).attr('data-name');
$.ajax({url:"somepage.php?famID="+famID+"&famAddr="+famAddr+"&famPhone="+famPhone+"&famName="+famName,cache:false,success:function(result){
$(".modal-content").html(result);
}});
});
</script>
somepage.php
Create somepage.php (If you want to change this page name. Change in <script></script> too. Both are related.)
<?
$famID=$_GET['famID'];
$famAddr=$_GET['famAddr'];
$famPhone=$_GET['famPhone'];
$famName=$_GET['famName'];
?>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="fam_id">Name <?php echo $famName;?></h4>
</div>
<div class="modal-body">
<form id="form1" method="post">
<b>Details</b>
<hr></hr>
Address: <p><?php echo $famAddr;?></p>
Phone_num: <p><?php echo $famPhone;?></p>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>

Bootstrap modal and passing value

When I click edit, 'id' should pass to own page and modal should pop up. But it doesn't work. Please help me
PHP and Bootstrap
<tr>
<td><?php echo $row['name']; ?></td>
<td><a data-toggle="modal" data-target="#myModal" href='?id=<?php echo $row['id']; ?>'>Edit</a> </td>
</tr>
Modal
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
------
-----
-----
</div>
</div>

Create a class Edit in <a></a> tag. Use this class to call modal. And, add data-Id="<?echo $row['id'];?>"
<tr>
<td><?php echo $row['name']; ?></td>
<td>
<a class='Edit' data-toggle="modal" href="#form_modal" data-target="#myModal" data-Id="<?php echo $row['id'];?>">Edit</a>
</td>
</tr>
Place this code in footer
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
</div>
</div>
</div>
JS
<script>
$('.Edit').click(function(){
var Id=$(this).attr('data-Id');
$.ajax({url:"SomePage.php?Id="+Id,cache:false,success:function(result){
$(".modal-content").html(result);
}});
});
</script>
Create somepage.php (If you want to change this page name. Change in <script></script> too. Both are related.)
SomePage.php
<?php
$Id=$_GET['Id'];
?>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="fam_id"></h4>
</div>
<div class="modal-body">
<?php echo $Id;?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
For more info, click Show data based of selected id on modal popup

Categories