i am trying to create e-commerce website. neither it is showing error not providing coding result. trying to develop popup modal it is not showing results, modal popup is appearing but the echo codes which were put to retrieve database table value, for example this command is not working. how to find mistake?
<!-- The Modal -->
<?php
require_once '../core/init.php';
<!--this code is to retreive data from database thelewala and table products-->
$id = $_post['id'];
$id = (int)$id;
$sql = "SELECT * FROM products WHERE id = '$id'";
$result = $db->query($sql);
$product = mysqli_fetch_assoc($result);
<!-- this code is to retrieve data from database thelewala and table brand-->
$brand_id = $product['brand'];
$sql = "SELECT brand FROM brand WHERE id = '$brand_id'";
$brand_query = $db->query($sql);
$brand = mysqli_fetch_assoc($brand_query);
?>
<?php ob_start(); ?>
<div class="modal fade" id="details-modal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title"><?php echo $product['title']; ?></h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<div>
<img src="<?php echo $product['image']; ?>" alt="<?php echo $product['title']; ?>'" class="details img.responsive" />
</div>
</div>
<div class="col-sm-6">
<h4>Details</h4>
<p><?php echo $product['discription']; ?></p>
<hr />
<p>Price : Rs. <?php echo $product['price']; ?></p>
<p>Brand : <?php echo $brand['brand']; ?></p>
<form action="add_card.php" method="post">
<div class="form-group">
<div class="col-xs-3">
<lable for="quantity">Quantity</lable>
<input type="text" class="form-control" id="quantity" name="quantity" />
</div>
</div>
<div class="form-group">
<lable for="size">Size</lable>
<select name="size" id="size" class="form-control">
<option value=""></option>
<option value="32">32</option>
<option value="36">36</option>
<option value="XL">XL</option>
</select>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-warning" <span class="glyphicon glyphicon-shopping-cart"></spa>Add to Cart</button>
</div>
</div>
</div>
</div>
<?php echo ob_get_clean(); ?>
Related
First and foremost, the code is a mess because I had gotten some outside help from a person who did not take his coding seriously, right now I need to meet a deadline and am focusing on functionality, so I apologize beforehand, I'll get to cleaning it up in time.
We are creating a simple shopping page that includes PHP, bootstrap. We store the product information the in a mysqli database. We have multiple modals for each item where you can choose the size, and then add them to the cart.
The problem is that while the bootstrap modals cannot be seen, they are still "clickable" as if they were active when they are not. This does not apply to the cart modal, at least as far as I can tell.
I tried to fix this by changing the z index of the class of modals, however, that did not work.
the html (and PHP):
<section class="products">
<?php
$db = new Database();
$db->connect();
$db->select('tbl_items','productid,Product_Name,Product_Price,Product_Quantity,Category,Product_Picture',NULL,'Category!="Beverage" and Product_Quantity > 0','productid ASC'); // Table name, Column Names, JOIN, WHERE conditions, ORDER BY conditions
$res = $db->getResult();
$rows = array();
foreach ($res as $row)
{?>
<div class="product-card">
<form method="post" class="product-form card-form">
<div class="product-image">
<?php echo '<img class="gallery-pic responsive" src="data:image/jpeg;base64,'.base64_encode( $row['Product_Picture'] ).'"/>';?>
</div>
<div class="product-info-container">
<div class="product-info">
<h3 id="prod-name" class="prod-info"><?php echo $row['Product_Name']; ?><h3>
</div>
<div class="product-info">
<span class="prod-info">
<h4>R<?php echo $row['Product_Price']; ?></h4>
</span>
</div>
</div>
<div class="product-info add-btn-container">
<div class="customn-btn btn-lg btn-block add-cart-btn" title="Add to FOGo"
data-toggle="modal" data-target="#product<?php echo $row['productid'];?>modal"
onclick="resetSize()">
Add to cart<i class="fa fa-cart-plus" aria-hidden="true"></i>
</div>
</div>
</form>
</div>
I assign the product ID to the id of the modal to so that it can be referenced in the add to cart button above
Continue in the loop:
<div class="modal fade product-modal" id="product<?php echo $row['productid'];?>modal"
role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header color-gradient">
<button type="button" title="Close Plate" class="close"
data-dismiss="modal">×</button>
<h4 id="item-title" class="modal-title"><?php echo $row['Product_Name'];?></h4>
</div>
<div class="display-pic-container">
<?php echo '<img class=" responsive" src="data:image/jpeg;base64,'.base64_encode( $row['Product_Picture'] ).'"/>';?>
</div>
<div class="modal-footer">
<div class="form-group">
<label class="size-lbl" for="size">Size</label>
<select class="form-control" name="size" onchange="changeSize(event)">
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Large">Large</option>
</select>
</div>
<button type="button" title="Close Plate"
class="close-btn btn-lg btn-block cart-btn" id="close_cart"
data-dismiss="modal"><i class="fa fa-times" aria-hidden="true"></i>
Close</button>
<span onclick="addToCart(<?php echo $row['productid'];?>, event )"
title="Add to cart" class="btn-lg btn-block cart-btn check-out-btn"><i
class="fa fa-credit-card" aria-hidden="true"></i>
Add to cart</span>
</div>
</div>
</div>
</div>
<?php
}
?>
</section>
I'm trying to get the button to open up a modal on click of the button with label "Select Quantity and Sizes*:" but for some reason I can't get this working, I'll appreciate a heads up, Please note that I included additional jQuery for the updateSizes() function found in the modal in the footer.php file already.
I believe your expertise will help me solve this, i'm kinda stuck here, I copied the modal on getbootstrap . com,
The modal on my page is found just below the comment:
<-- Modal for Select Quantity and Sizes -->
PS: this is just a personal test project to sharpen up my skills, so security is undermined though a very important aspect.
<?php
require_once $_SERVER['DOCUMENT_ROOT'] . '/eCommerce/core/init.php';
include 'includes/head.php';
include 'includes/navigation.php';
if (isset($_GET['add'])) {
$brandQuery = $db->query("SELECT * FROM brand ORDER BY brand");
/* making query and putting in alphabetical order */
$parentQuery = $db->query("SELECT * FROM categories WHERE parent=0 ORDER BY Category");
?>
<h2 class="text-center">Add a New Product</h2>
<!-- Product upload form -->
<form action="products.php?add=1" method="POST" enctype="multipart/form-data">
<div class="form-group col-sm-3">
<label for="title">Title*:</label>
<input type="text" class="form-control" name="title" id="title" value="<?= ((isset($_POST['title'])) ? sanitize($_POST['title']) : ''); ?>">
</div><!-- end div Title -->
<div class="form-group col-sm-3">
<label for="brand">Brand*:</label>
<select class="form-control" id="brand" name="brand">
<option value=""<?= ((isset($_POST['brand']) && $_POST['brand'] == '') ? ' selected' : ''); ?>></option>
<?php while ($brand = mysqli_fetch_assoc($brandQuery)): ?>
<option value="<?= $brand['id'] ?>"<?= ((isset($_POST['brand']) && $_POST['brand'] == $brand['id']) ? ' selected' : ''); ?>><?= $brand['brand']; ?></option>
<?php endwhile; ?>
</select>
</div> <!-- end div Select Brand -->
<div class="form-group col-sm-3">
<label for="parent">Main Category*:</label>
<select class="form-control" id="parent" name="parent">
<option value=""<?= ((isset($_POST['parent']) && $_POST['parent'] == '') ? ' selected' : ''); ?>></option>
<?php while ($parent = mysqli_fetch_assoc($parentQuery)): ?>
<option value="<?= $parent['id'] ?>"<?= ((isset($_POST['parent']) && $_POST['parent'] == $parent['id']) ? ' selected' : ''); ?>><?= $parent['category']; ?></option>
<?php endwhile; ?>
</select>
</div> <!-- end div Select Main Category -->
<div class="form-group col-sm-3">
<label for="child">Child Category*:</label>
<select class="form-control" id="child" name="child">
</select>
</div> <!-- end div Select child Category -->
<div class="form-group col-sm-3">
<label for="price">Price*:</label>
<input type="text" id="price" name="price" class="form-control" value="<?= ((isset($_POST['price'])) ? $_POST['price'] : ''); ?>">
</div> <!-- end div Price -->
<div class="form-group col-sm-3">
<label for="list_price">List Price*:</label>
<input type="text" id="list_price" name="list_price" class="form-control" value="<?= ((isset($_POST['list_price'])) ? $_POST['list_price'] : ''); ?>">
</div> <!-- end div List Price -->
<div class="form-group col-sm-3">
<label for="price">Select Quantity and Sizes*:</label>
<button type="button" class="btn btn-success form-control" onclick="jQuery('#sizesModal').modal('toggle');return true;">Quantity $ Sizes</button>
</div> <!-- end div Select Quantity and Prices -->
<div class="form-group col-sm-3">
<label for="sizes">Sizes and Quantity Preview*:</label>
<input type="text" id="sizes" name="sizes" class="form-control" value="<?= ((isset($_POST['sizes'])) ? $_POST['sizes'] : ''); ?>" readonly>
</div> <!-- end div Select Sizes and Qty Preview -->
<div class="form-group col-sm-6">
<label for="photo">Product Photo: </label>
<input type="file" name="photo" id="photo" class="form-control">
</div> <!-- end div Product Photo -->
<div class="form-group col-sm-6">
<label for="description">Product Description: </label>
<textarea id="description" name="description" class="form-control" rows="6"><?= ((isset($_POST['description'])) ? sanitize($_POST['description']) : ''); ?></textarea>
</div> <!-- end div Product Description-->
<div class="form-group pull-right">
<input type="submit" value="Add Product" class="form-control btn btn-success pull-right">
</div>
<div class="clearfix"></div>
</form>
<!-- Modal for Select Quantity and Sizes -->
<div class="modal fade details-1" id="sizesModal" tabindex="-1" role="dialog" aria-labelledby="ModalSizesQuantityLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" onclick="closeModal()" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title text-center">Select quantity & Sizes</h4>
</div> <!-- end modal-header -->
<div class="modal-body">
<div class="container-fluid">
<div class="row">
...
</div>
</div> <!-- end container-fluid -->
</div> <!-- end modal-body -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onclick="updateSizes();jQuery('#sizesModal').modal('toggle');return false;">Save changes</button>
</div>
</div><!-- end modal content -->
</div> <!-- end modal-dialog modal lg -->
</div> <!-- End Modal for Size & Quantity -- >
<?php
}else {
$sql = "SELECT*FROM products WHERE deleted = 0";
$product_results = $db->query($sql);
if (isset($_GET['featured'])) {
$id = (int) $_GET['id'];
$featured = (int) $_GET['featured'];
$sql_feature = "UPDATE products SET feature = '$featured' WHERE id='$id' ";
$db->query($sql_feature);
header('Location:products.php');
}
?>
<h2 class="text-center">Products</h2>
Add Product <div class="clearfix"></div>
<hr>
<!-- Table for products -->
<table class="table table-bordered table-condensed table-striped">
<thead>
<th></th>
<th>Product</th>
<th>Price</th>
<th>Category</th>
<th>Featured</th>
<th>Sold</th>
</thead>
<tbody>
<?php
while ($product = mysqli_fetch_assoc($product_results)):
/* setting category of child element */
$childID = $product['categories'];
$category_sql = "SELECT * FROM categories WHERE id = '$childID' ";
$category_result = $db->query($category_sql);
$category_child = mysqli_fetch_assoc($category_result);
$parentID = $category_child['parent'];
$parent_sql = "SELECT * FROM categories WHERE id ='$parentID' ";
$parent_results = $db->query($parent_sql);
$parent_fetch = mysqli_fetch_assoc($parent_results);
$category = $parent_fetch['category'] . '-' . $category_child['category'];
?>
<tr>
<td>
<span class="glyphicon glyphicon-pencil"></span>
<a href="products.php?delete=<?= $product['id']; ?>" class="btn btn-xs btn-default"><span class="glyphicon glyphicon-trash">
</span></a>
</td>
<td><?= $product['title']; ?></td>
<td><?= money($product['price']); ?></td>
<td><?= $category; ?></td>
<td> <span class="glyphicon glyphicon-<?= (($product['feature'] == 1) ? 'minus' : 'plus'); ?>"></span>  <?= (($product['feature'] == 1) ? 'Featured Product' : ''); ?>
</td>
<td>0</td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
<?php } include 'includes/footer.php'; ?>
Use bootstrap's data-toggle attribute instead on onclick attribute.
<button type="button" class="btn btn-success form-control"
onclick="jQuery('#sizesModal').modal('toggle');return true;">
Quantity $ Sizes
</button>
<button type="button" class="btn btn-success form-control"
data-toggle="modal" data-target="#sizesModal">
Quantity $ Sizes
</button>
Check out this link for detail explanation
Bootstrap Modal
So as per title, im trying to pass show multiple data from database using sql on the bootstrap modal. The ID will be pass down from the link, how is it done? been finding multiple way but I still can't show the selected data;
So here is the trigger for the modal:
<?php while($row = mysqli_fetch_array($adm_query)){
$id = $row['admin_id']; ?>
<tr>
<td style="text-align:center"><?php echo $row['adm_name']; ?></td>
<td width="150" style="text-align:center"><?php echo $row['staff_no']; ?></td>
<td width="120" style="text-align:center"><?php echo $row['department']; ?></td>
<td width="138" style="text-align:center;">
<a data-toggle="modal" data-target="#myModal" data-id="<?php echo $row['admin_id']?>" class="btn btn-outline btn-info"><i class="fa fa-search-plus"></i></a>
</td>
<?php }?>
Then this is the modal content:
<!-- Modal -->
<div style="margin-top:5%;" class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<?php $sel_query=mysqli_query($conn, "select * from admin where admin_id='$idmodal'")or die(mysql_error($conn)); $selrow=mysqli_fetch_array($sel_query);?>
<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">Modal title</h4>
</div>
<div class="modal-body">
<div class="panel panel-info" style="text-align:center;">
<div class="panel-heading">
<h4>Staff Details</h4>
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label>Staff ID</label>
<p>
<?php echo $selrow[ 'staff_no']?>
</p>
</div>
<div class="form-group">
<label>Name</label>
<p>
<?php echo $selrow[ 'adm_name']?>
</p>
</div>
<div class="form-group">
<label>Services | Department</label>
<p>
<?php echo $selrow[ 'department']?>
</p>
</div>
</div>
<!-- /.col-lg-6 (nested) -->
<div class="col-lg-6">
<div class="form-group">
<label>Username</label>
<p>
<?php echo $selrow[ 'username']?>
</p>
</div>
<div class="form-group">
<label>Password</label>
<p>
<?php echo $selrow[ 'password']?>
</p>
</div>
<div class="form-group">
<label>Date</label>
<p>
<?php echo $selrow[ 'date_added']?>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
The problem is nothing works, and i don't know where to start.
Appreciate for the help.
Create one class openModal in <a></a>. Use this class in <script></script> to get data-id
<?php while($row = mysqli_fetch_array($adm_query,MYSQLI_ASSOC)){
$id = $row['admin_id']; ?>
<tr>
<td style="text-align:center"><?php echo $row['adm_name']; ?></td>
<td width="150" style="text-align:center"><?php echo $row['staff_no']; ?></td>
<td width="120" style="text-align:center"><?php echo $row['department']; ?></td>
<td width="138" style="text-align:center;">
<a class="btn btn-outline btn-info openModal" data-toggle="modal" data-target="#myModal" data-id="<?php echo $row['admin_id']?>">
<i class="fa fa-search-plus"></i>
</a>
</td>
</tr>
<?php }?>
Place this code in the same page below.
<div style="margin-top:5%;" 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>
JS (data-id=.. is passed here.)
<script>
$('.openModal').click(function(){
var id = $(this).attr('data-id');
$.ajax({url:"ajax_modal.php?id="+id,cache:false,success:function(result){
$(".modal-content").html(result);
}});
});
</script>
ajax_modal.php (Create one page in same directory ajax_modal.php. If you are looking to change this page name. Change in <script></script> tag too. Both are related.)
<?php
// Get `id` from `<script></script>`
$id = $_GET['id'];
$sel_query=mysqli_query($conn, "select * from admin where admin_id='$id'") or die(mysql_error($conn));
$selrow=mysqli_fetch_array($sel_query,MYSQLI_ASSOC);
?>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="panel panel-info" style="text-align:center;">
<div class="panel-heading">
<h4>Staff Details</h4>
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label>Staff ID</label>
<p>
<?php echo $selrow[ 'staff_no']?>
</p>
</div>
<div class="form-group">
<label>Name</label>
<p>
<?php echo $selrow[ 'adm_name']?>
</p>
</div>
<div class="form-group">
<label>Services | Department</label>
<p>
<?php echo $selrow[ 'department']?>
</p>
</div>
</div>
<!-- /.col-lg-6 (nested) -->
<div class="col-lg-6">
<div class="form-group">
<label>Username</label>
<p>
<?php echo $selrow[ 'username']?>
</p>
</div>
<div class="form-group">
<label>Password</label>
<p>
<?php echo $selrow[ 'password']?>
</p>
</div>
<div class="form-group">
<label>Date</label>
<p>
<?php echo $selrow[ 'date_added']?>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
For more info, click here
how-to-pass-current-row-value-in-modal
passing-data-via-modal-bootstrap-and-getting-php-variable
bootstrap-modal-and-passing-value
show-data-based-of-selected-id-on-modal-popup-window-after-click-a-button-php-my
Write below line in your code:-
$selrow=mysqli_fetch_assoc($sel_query);
OR
$selrow=mysqli_fetch_array($sel_query,MYSQLI_ASSOC);
instead of
$selrow=mysqli_fetch_array($sel_query);
Also it is bad practice to write query directly into modal.
You should use AJAX on click event. Also you should fill form data via jQuery OR javascript.
I am using bootstrap 3 and I am making a social networking site, this code here is a part of a panel which shows the posts.The problem is it is showing the comments on toggle but the comments are not appearing within the footer it is crossing it...So what is wrong in my or how can I extend the panel footer?
Here's the code:
<div class="panel-footer">
Like <span class="glyphicon glyphicon-thumbs-up"></span>
Comments
<div id='toggleComment<?php echo $idp;?>' style="display:none;">
<form action="" method="POST"><!--FORM COMMENT-->
<div class="form-group">
<div class="rows" >
<div class="col-sm-1" style="padding-right:2px;">
<div class="compic">
<img src="<?php echo $profilepic; ?>" style="width:100%;height:100%;" />
</div>
</div>
<div class="col-sm-11" style="padding-left:3px; padding-bottom:7px">
<textarea class="form-control expandable pull-left" name="comment<?php echo $idp;?>" id="comment" placeholder="Write a comment..." required>
</textarea>
</div>
</div>
<hr>
<button type="submit" class="btn btn-primary pull-right" name="subcom<?php echo $idp;?>"><b>Comment</b></button>
<div class="clearfix"></div>
</div></form>
<div class="rows" >
<?php
$postid=$idp;
$postby=$id;
$postto=$uid;
if(isset($_POST['subcom'.$postid]))
{ $postbody=$_POST['comment'.$postid];
if($postbody!="")
{$res=mysqli_query($con,"INSERT INTO comment VALUES('','$postby','$postto','$postbody','$postid')");}
}
$show=mysqli_query($con,"SELECT * FROM comment WHERE postid='$idp' ORDER by id");
while($show_row=mysqli_fetch_array($show))
{
$commentbyid=$show_row['cby'];
$combody=$show_row['cbody'];
$cbyquery=mysqli_query($con,"SELECT * FROM user WHERE id='$commentbyid'") or die(mysqli_error($con));
$cby=mysqli_fetch_array($cbyquery);
$cpic=$cby['profpic'];
if ($cpic== "" || !file_exists("userdata/profile_pics/$cpic"))
{
$cpic = "images/default_pic.jpg";
}
else
{
$cpic = "userdata/profile_pics/".$cpic;
}
$cname=ucfirst(strtolower($cby[1]));
$csname=ucfirst(strtolower($cby[2]));
?>
<div class="col-sm-1" style="padding-right:2px;">
<div class="compic">
<img src="<?php echo $cpic; ?>" style="width:100%;height:100%;" />
</div>
</div>
<div class="col-sm-11" style="padding-left:3px;">
<?php echo $cname." ".$csname;?><br>
<?php echo $combody;?>
</div>
<?php
}
?></div>
</div><!--Toggle Ends here-->
</div>
finally got it it was because of the <div class="clearfix"></div> and it got solved when I used it just after </div><!--Toggle Ends here-->
The following shows my HTML & PHP for most of the tags on the page including the while loop. It loops out all the rows in a sql table, the user should be able to click on the image and it opens up a modal to be able to crop that image. This works perfectly fine in the first item on the page (first sql row), but for all subsequent sql rows the modal does not open after clicking. How can I correct this or troubleshoot it?
I'm using Twit BS 3.2.0
<?php
ob_start();
session_start();
require_once ('verify.php');
?>
<head>
<title>Edit Listings</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="../css/cropper.min.css" rel="stylesheet">
<link href="../css/crop-avatar.css" rel="stylesheet">
</head>
<body>
<div id="container">
<div id="head">
<ul id="menu">
</ul>
</div>
<div id="area"></div>
<div id="main_listings">
<h1 align="left">Edit listings page</h1>
<?php
include ("../dbcon2.php");
$conn = new mysqli($servername, $username, $password, $dbname);
$sql="SELECT * FROM listings ORDER BY date_added DESC";
$result = $conn->query($sql);
?>
<?php while ($data=mysqli_fetch_assoc($result)):
$id = $data['id'];
$title = $data['title'];
$listing_img = $data['listing_img'];
?>
<div id="edit_listing">
<div id="edit_left">
<div class="container" id="crop-avatar">
<div class="avatar-view" title="Change the avatar"> <img src="<?php echo $listing_img; ?>" alt="<?php echo $title; ?>"> </div>
<div class="modal fade" id="avatar-modal" tabindex="-1" role="dialog" aria-labelledby="avatar-modal-label" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form class="avatar-form" method="post" action="edit-avatar.php" enctype="multipart/form-data">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="avatar-modal-label">Listing Main Image</h4>
</div>
<div class="modal-body">
<div class="avatar-body">
<div class="avatar-upload">
<input class="avatar-src" name="avatar_src" type="hidden">
<input class="avatar-data" name="avatar_data" type="hidden">
<input name="avatar_id" type="hidden" value="<?php echo $id; ?>">
<label for="avatarInput">Local upload</label>
<input class="avatar-input" id="avatarInput" name="avatar_file" type="file">
</div>
<div class="row">
<div class="col-md-9">
<div class="avatar-wrapper"></div>
</div>
<div class="col-md-3">
<div class="avatar-preview preview-lg"></div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" type="button" data-dismiss="modal">Close</button>
<button class="btn btn-primary avatar-save" type="submit">Save</button>
</div>
</form>
</div>
</div>
</div>
<div class="loading" tabindex="-1" role="img" aria-label="Loading"></div>
</div>
</div>
<div id="edit_right">
<form name="edit_date" action="edit_list.php" method="post" id="edit_list_data">
<input name="title" type="text" id="title" tabindex="1" value="<?php echo $title; ?>" size="60" maxlength="57"/>
<input type="hidden" name="id" value="<?php echo $id; ?>" />
<input type="submit" formaction="edit_list.php" value="Submit" />
</form>
</div>
</div>
<?php endwhile;$conn->close();?>
<div class="spacer"></div>
</div>
</div>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="../js/cropper.min.js"></script>
<script src="../js/crop-avatar.js"></script>
</body>
</html><?php // Flush the buffered output.
ob_end_flush();
?>
Try this. I have moved some things around and placed the bulk of the php before the initial html tag as well as placing the contents of the sql call into an array that is later used to build the images.
<?php
include ("../dbcon2.php");
ob_start();
session_start();
require_once ('verify.php');
$conn = new mysqli($servername, $username, $password, $dbname);
$sql="SELECT * FROM listings ORDER BY date_added DESC";
$result = $conn->query($sql);
$results = array();
while ($data = mysqli_fetch_assoc($result)){
$results[] = array(
'id' => $data['id'];
'title' => $data['title'];
'listing_img' => $data['listing_img'];
);
}
$conn->close();
?>
<html>
<head>
<title>Edit Listings</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="../css/cropper.min.css" rel="stylesheet">
<link href="../css/crop-avatar.css" rel="stylesheet">
</head>
<body>
<div id="container">
<div id="head">
<ul id="menu">
</ul>
</div>
<div id="area"></div>
<div id="main_listings">
<h1 align="left">Edit listings page</h1>
<?php foreach($results as $row): ?>
<div id="edit_listing">
<div id="edit_left">
<div class="container" id="crop-avatar">
<div class="avatar-view" title="Change the avatar"><img src="<?php echo $row['listing_img']; ?>" alt="<?php echo $row['title']; ?>"> </div>
<div class="modal fade" id="avatar-modal" tabindex="-1" role="dialog" aria-labelledby="avatar-modal-label" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form class="avatar-form" method="post" action="edit-avatar.php" enctype="multipart/form-data">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="avatar-modal-label">Listing Main Image</h4>
</div>
<div class="modal-body">
<div class="avatar-body">
<div class="avatar-upload">
<input class="avatar-src" name="avatar_src" type="hidden">
<input class="avatar-data" name="avatar_data" type="hidden">
<input name="avatar_id" type="hidden" value="<?php echo $row['id']; ?>">
<label for="avatarInput">Local upload</label>
<input class="avatar-input" id="avatarInput" name="avatar_file" type="file">
</div>
<div class="row">
<div class="col-md-9">
<div class="avatar-wrapper"></div>
</div>
<div class="col-md-3">
<div class="avatar-preview preview-lg"></div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" type="button" data-dismiss="modal">Close</button>
<button class="btn btn-primary avatar-save" type="submit">Save</button>
</div>
</form>
</div>
</div>
</div>
<div class="loading" tabindex="-1" role="img" aria-label="Loading"></div>
</div>
</div>
<div id="edit_right">
<form name="edit_date" action="edit_list.php" method="post" id="edit_list_data">
<input name="title" type="text" id="title" tabindex="1" value="<?php echo $row['title']; ?>" size="60" maxlength="57"/>
<input type="hidden" name="id" value="<?php echo $row['id']; ?>" />
<input type="submit" formaction="edit_list.php" value="Submit" />
</form>
</div>
</div>
<?php endforeach; ?>
<div class="spacer"></div>
</div>
</div>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="../js/cropper.min.js"></script>
<script src="../js/crop-avatar.js"></script>
</body>
</html>
<?php // Flush the buffered output.
ob_end_flush();
?>