We Keep Coding

Display image thumbnail in modal form

I want to display an image thumbnail in a modal form based on the specific user ID tied it, and then have the image thumbnail update if the user re-uploads a new picture. How would I go about doing this?
I tried using a query to do it but unfortunately with no luck. The query below brings back all the images in the database as I'm unsure how to attach the unique ID to filter the results.
The Modal:
<div class="modal fade" id="updatePostModal" 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">Update Post</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<input type="text" id="themeContent" class="form-control" placeholder = "Enter theme"/>
</div>
<div class="form-group">
<input type="text" id="visualIdeaContent" class="form-control" placeholder = "Enter idea"/>
</div>
<div class="form-group">
<input type="text" id="captionContent" class="form-control" placeholder = "Insert caption"/>
</div>
<div class="form-group">
<input type="date" id="dateContent" class="form-control" placeholder = "Select date"/>
</div>
<div class="form-group">
<input type="text" id="linkContent" class="form-control" placeholder = "Insert URL"/>
</div>
<div class="form-group">
<?php
$imagefetch = mysqli_query($conn ,'SELECT * FROM content');
while($row = mysqli_fetch_array($imagefetch)){ ?>
<input type="file" id="visualContent" class="custom-file" placeholder = "Upload picture"/>
<img src="<?php echo $row['visualContent']; ?>" width="50" class="img-thumbnail">
</div>
<?php }
?>
<input type="hidden" id="uidContent" class="custom-file"/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
<button href="" id="savechanges" name="update" class="btn btn-primary">Update Post</button>
</div>
</div>
</div>
</div>
</div>
Also not sure if this may be useful, but here's the table where all the images along with the other contents are displayed. Each table row has the unique ID attached to it
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>Theme</th>
<th>Visual Idea</th>
<th>Caption</th>
<th>Date</th>
<th>Visual</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<?php
$table = mysqli_query($conn ,'SELECT * FROM content');
while($row = mysqli_fetch_array($table)){ ?>
<tr id="<?php echo $row['uidContent']; ?>"> // Contains unique ID
<td width="200" data-target="themeContent"><?php echo $row['themeContent']; ?></td>
<td width="300" data-target="visualIdeaContent"><?php echo $row['visualIdeaContent']; ?></td>
<td width="600" data-target="captionContent"><?php echo $row['captionContent']; ?></td>
<td width="100" data-target="dateContent"><?php echo $row['dateContent']; ?></td>
<td width="200" data-target="visualContent"><img src="<?php echo $row['visualContent']; ?>"width="200"/></td>
<td style = "display:none" width="100" data-target="linkContent"><?php echo $row['linkContent']; ?></td>
<td width="170">
<a class="badge badge-primary p-2" role="button" href="<?php echo $row['linkContent']; ?>" target="_blank">Link</a>
<a class="badge badge-success p-2" href="#" data-role="update" data-id="<?php echo $row['uidContent'] ;?>">Edit</a>
<a class="badge badge-danger p-2" role="button" href="action.inc.php?delete=<?php echo $row['uidContent'] ;?>" onclick="return confirm('Are you sure you want to delete this post? This process cannot be undone.');">Delete</a>
</td>
</tr>
<?php }
?>
</tbody>
</table>
Looking forward to your suggestions on how to execute this.

Delete element from table by id with button php

I have this table:
Here's code of this page:
<?php
include('footer.php');
include('../models/fetchQuotes.php');
$content = file_get_contents("http://test/MY_API/getAllTopics");
$arrayId = array();
$arrayName = array();
$arrayImg = array();
foreach (json_decode($content, true) as $eventrType => $events) {
array_push($arrayId, $events[id]);
array_push($arrayName, $events[name]);
array_push($arrayImg, $events[img]);
}
?>
<div class="container">
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Img</th>
<th>Option 1</th>
</tr>
</thead>
<tbody>
<?php for ($i=0;$i<count($arrayId);$i++) { ?>
<tr>
<td><?php echo ($arrayId[$i])." "; ?></td>
<td><?php echo ($arrayName[$i])." "; ?></td>
<td><img src="<?php echo ($arrayImg[$i])." ";?>" alt="" width="75", heigth="75"></td>
<td> <button class="btn btn-danger" id="deleteById" value=<?= ($arrayId[$i]); ?> onclick="myFunction()">DELETE</button>
<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" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Ошибка</h4>
</div>
<div class="modal-body" id ="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
</div>
</div>
</div>
</div></td>
</tr><?php } ?>
</tbody>
</table>
</div>
<script>
function myFunction(){
var deleteById = document.getElementById('deleteById').value;
alert(deleteById);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
I parse my own API and then fill it into a table. Now when I click on any button DELETE, every time I have the same alert "12". I understand why its happen, but i can't figure out how make it correct.
How do I associate each button with the corresponding cell ID?
Sorry for language mistakes and thanks for helping.

The problem is that you can only have only one id in a page, but as you are giving that button an id inside a loop different elements are getting same id.
To fix this, you can always use class. But your according to your approach use something like this.
<button class="btn btn-danger" onclick="myFunction(<?= ($arrayId[$i]); ?>)">DELETE</button>
And in javascript
function myFunction(id){
alert(id);
}
I hope this helps you.
Cheers :)

I advise you to pass current ID as a function parameter:
<button class="btn btn-danger" value=<?= ($arrayId[$i]); ?> onclick="myFunction(<?= ($arrayId[$i]); ?>)">DELETE</button>
And function signature will be:
function myFunction(idToDelete){
alert(idToDelete);
}
Also I delete id attribute from button as it's not required. And if you want to use same id for multiple elements in future - don't, as id must be unique on html-page.

please change your code as per image it will work

Bootstrap Modal not showing properly

Here is my screenshot of this modal, its showing but hiden

Could you please check the below line.where it append exactly(inside your modal content or outside).
actually it should be in outside of your modal content
<div class="modal-backdrop fade in"></div>

<div class="row-fluid sortable">
<div class="box span12">
<div class="box-header">
<h2><i class="halflings-icon align-justify"></i><span class="break"></span>Manage All Category</h2>
<div class="box-icon">
<i class="halflings-icon wrench"></i>
<i class="halflings-icon chevron-up"></i>
<i class="halflings-icon remove"></i>
</div>
</div>
<div class="box-content">
<div id="flash" style="display: none;">
<img style="margin: 15% 0 0 50%; position: absolute;" src="<?php echo base_url(); ?>admin/img/ajaxloader.gif"/>
</div>
<table class="table table-bordered table-striped table-condensed">
<thead>
<tr>
<th>Category ID</th>
<th>Category Name</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php if (isset($links)) {
foreach ($all_category as $category) { ?>
<tr>
<td><?php echo $category->category_id; ?></td>
<td class="center"><?php echo $category->category_name; ?></td>
<?php if ($category->status == 1) { ?>
<td class="center">
<a id="btnpublish" data-value="<?php echo $category->category_id; ?>" href="javascript:void(0);" class="label label-important">Unpublish</a>
</td>
<?php } else { ?>
<td class="center">
<a id="btnunpublish" data-value="<?php echo $category->category_id; ?>" href="javascript:void(0);" class="label label-success">Publish</a>
</td>
<?php } ?>
<td class="center">
<a class="btn btn-small btn-inverse" href="#" data-toggle="modal" data-target="#myModal<?php echo $category->category_id; ?>">View</a>
<a class="btn btn-small btn-info" href="#">Edit</a>
<a id="deleteCat" class="btn btn-small btn-danger" data-value="<?php echo $category->category_id; ?>" href="javascript:void(0);">Delete</a>
<!--Start View Modal-->
<div class="modal fade" id="myModal<?php echo $category->category_id; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel<?php echo $category->category_id; ?>">
<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 echo $category->category_id; ?>">Category View</h4>
</div>
<div class="modal-body">
<p><b>Category ID:</b> <?php echo $category->category_id; ?></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!--End View Modal-->
</td>
</tr>
<?php }
} ?>
</tbody>
</table>
<div class="pagination pagination-centered">
<?php echo $links; ?>
</div>
</div>
</div><!--/span-->
</div>

Which version of Bootstrap are you using?
There was a ticket for that on GH in an earlier version of Bootstrap.
https://github.com/twbs/bootstrap/issues/16148

Every thing is good just one thing...put modal div outside to the td of the table, keep it inside body but out side to the table.
Modal is not displaying because you are repeating modal with same id of the modal in for each loop(like buttons are repeating).
I have answered this the way you can achieve it at link below.
dynamically created bootstrap3 modals do not work

Bootstrap 3 open an Image in a modal?

I am making a table where a user has to click the image to view it in a modal, I am following the instructions here Bootstrap open image in modal because we have the same case, and on JSFiddle, his code works fine, but to me, it doesnt work, My code is like this:
<div class="box">
<div class="box-header">
<h3 class="box-title">Products Table</h3>
</div><!-- /.box-header -->
<div class="box-body table-responsive">
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>Name</th>
<th>Brand Name</th>
<th>Description</th>
<th>Amount</th>
<th>Stocks</th>
<th>Expiry Date</th>
<th>Image</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
$query = mysql_query("select * from product,product_brand where product_brand.product_brand_id = product.product_brand_id") or die(mysql_error());
while ($row = mysql_fetch_array($query)) {
$user_id = $row['product_id'];
?>
<tr class="warning">
<td><?php echo $row['product_name']; ?></td>
<td><?php echo $row['product_brand_name']; ?></td>
<td><?php echo $row['product_description']; ?></td>
<td><?php echo $row['product_price']; ?></td>
<td><?php echo $row['product_stock']; ?></td>
<td><?php echo $row['product_exdate']; ?></td>
<td><a href="#" id="pop">
<img id="imageresource" src="<?php echo $row['prod_image']; ?>" style="width: 400px; height: 264px;">
Click to Enlarge </a>
On the image I decided to put the modal, so when it's click, the image is inlarge in the modal, I also wanted the image to be hidden, how should i do it?
now, this code is for the modal and the script,which is sad to say, it doesnt seem to appear?:
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" 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"><i class="fa fa-plus"></i> View</h4>
</div>
<div class="modal-body">
<img src="" id="imagepreview" style="width: 400px; height: 264px;" >
</div>
<div class="modal-footer clearfix">
<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-times"></i> Discard</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
<script>
$("#pop").on("click", function() {
$('#imagepreview').attr('src', $('#imageresource').attr('src')); // here asign the image to the modal when the user click the enlarge link
$('#imagemodal').modal('show'); // imagemodal is the id attribute assigned to the bootstrap modal, then i use the show function <img src="" id="imagepreview" style="width: 400px; height: 264px;" >
});
</script>

Passing data using jquery or javascript in modal bootstrap

I have a table that represented from SQL Table that looping all data with PHP.
HTML
<tbody>
<?php
$no = 1;
foreach($data_request as $data) {
?>
<tr>
<td class="center"><?php echo $no++.". ";?> </td>
<td class="sorting1"><?php echo $data['id_request'];?> </td>
<td class="center"><?php echo "$nama"; ?></td>
<td class="right">
<a class="btn btn-danger" href="#">
<i class="halflings-icon white trash"></i> Close</a>
<a class="btn btn-success" href="#" id="print"?>">
<i class="halflings-icon pencil"></i> Preview </a>
</td>
</tr>
<?php } ?>
</tbody>
</table>
<div class="modal hide fade" id="myModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Print Preview</h3>
</div>
<div class="modal-body">
/*This would be a preview*/
</div>
<div class="modal-footer">
Make it to PDF
Close
</div>
</div>
My problem is, I wanna display a row data to modal bootstrap if users clicked the preview button.
So, if user click the button in row 1, modal would be displaying all field/data in first row of table.
Untill now, I have success passing data using jquery like this :
<script>
$('.btn-success').click(function(){
var address = [];
$(this).closest('tr').find('td').not(':last').each(function() {
var textval = $(this).text(); // this will be the text of each <td>
address.push(textval);
});
alert(address.join('\n'));
});
</script>
I am confusing to pass the data from script to modal, anyone can help ?

Better to give unique ids to the rows while rendering it from SQL DB.
<tbody>
<?php
$no = 1;
foreach($data_request as $data) {
?>
<tr id="row_<?php echo $data['id_request']; ?>">
<td class="center"><?php echo $no++.". ";?> </td>
<td class="sorting1"><?php echo $data['id_request'];?> </td>
<td class="center"><?php echo "$nama"; ?></td>
<td class="right">
<a class="btn btn-danger" href="#">
<i class="halflings-icon white trash"></i> Close</a>
<a class="btn btn-success" href="#" id="print_<?php echo $data['id_request']; ?>"">
<i class="halflings-icon pencil"></i> Preview </a>
</td>
</tr>
<?php } ?>
</tbody>
</table>
<div class="modal hide fade" id="myModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Print Preview</h3>
</div>
<div class="modal-body">
/*This would be a preview*/
</div>
<div class="modal-footer">
Make it to PDF
Close
</div>
</div>
Script:
<script>
$('.btn-success').click(function(){
var address = [];
var trId = $(this).attr('id').split('_')[1];
$('#row_'+trId).find('td').each (function() {
address.push($(this).text());
});
alert(address.join('\n'));
$('#myModal > .modal-body').html(address.join('\n'));
$('#myModal').modal('show');
});
</script>