my problem is when i insert a new data it append on the same <td> of the <table>, i want to append data in a new block , so that the data/item is displayed one by one just like snapdeal ex:-http://www.snapdeal.com/.
Sorry for my bad english.
display-posts.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AdPortal</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="header">
<div>
<img class="logo" src="images/zuikr.png" alt="logo" />
</div>
<div class="post_ad">
<ul class="header_nav">
<a href="http://localhost/adportal/login.html"><li class="header_nav_link">post a free ad</li></a>
</ul>
</div>
</div>
<div class="nav">
<ul class="nav_link">
<div class="nav_link_div"><a href="http://localhost/adportal/index.html"><li class="nav_link_list">HOME</li></a></div>
<div class="nav_link_div"><a href="#"><li class="nav_link_list">CONTACT US</li></a></div>
<div class="nav_link_div"><a href="#"><li class="nav_link_list">ABOUT</li></a></div>
</ul>
</div>
<div class="display_posts">
<img src="" alt="post" id="path" class="post_image">
<table class="post_data">
<tr >
<td colspan = "2">
<p style="text-align:center;font-weight:bold">Followings are the Details of This Ad</p></td></tr>
<tr><td>ID of Ad is</td><td id="post_id"></td></tr>
<tr><td>Title of Ad is:</td><td id="post_title"></td></tr>
<tr><td>Model of Ad is:</td><td id="post_model"></td></tr>
<tr><td>Price of Ad is:</td><td id="post_price"></td></tr>
<tr><td>Description about Ad is:</td><td id="post_description"></td></tr>
<tr><td>Name:</td><td id="post_name"></td></tr>
<tr><td>Your communicating email is:</td><td id="post_email"></td></tr>
<tr><td>Contact Number:</td><td id="post_phone"></td></tr>
<tr><td>city:</td><td id="post_city"></td></tr>
<tr><td>Category of Your post is:</td><td id="post_category"></td></tr>
</table>
</div>
</div>
<footer>
<p id="company_name"></p>
</footer>
</div>
<script src="js/jquery.js"></script>
<script src="js/main.js"></script>
<script src="js/company-name.js"></script>
<script src="js/display-posts.js"></script>
</body>
</html>
display-posts.js
$(document).ready(function() {
$.ajax({
url: 'php/display-posts.php',
type: 'GET',
success:function(data)
{
var result = $.parseJSON(data);
$.each(result, function(key, value) {
$.each(value, function(key, value) {
if (key === 'id') { $('#post_id').append(value); };
if (key === 'title') { $('#post_title').append(value); };
if (key === 'price') { $('#post_price').append(value); };
if (key === 'model') { $('#post_model').append(value); };
if (key === 'description') { $('#post_description').append(value); };
if (key === 'name') { $('#post_name').append(value); };
if (key === 'email') { $('#post_email').append(value); };
if (key === 'phone') { $('#post_phone').append(value); };
if (key === 'city') { $('#post_city').append(value); };
if (key === 'category') { $('#post_category').append(value); };
if (key === 'path') { $('#path').attr('src', value.slice(3) ) };
});
});
}
});
});
display-posts.php
<?php
session_start();
require_once 'database.php';
$category = $_SESSION['category'];
$data = array();
$query = $dbh->prepare("SELECT * FROM posts WHERE category = ?");
$query->execute(array($category));
$data = $query->fetchall(PDO::FETCH_ASSOC);
foreach ($query as $key => $value) {
$data[$key] = $value;
}
$result = json_encode($data);
echo $result;
If I'm understanding you correctly, I'd change the way you're structuring the table. Right now you only have a single table with a single set of rows for the different attributes of the product. So when you target each named cell, there's only one place to put it, so the new price (for example) is being added to the only place it sees the post_price id.
You're going to need to create a new html block for each new object, using classes instead of id's. I don't know that I'd continue to use tables, maybe just a set of div's, one for each product. That way you can add CSS for the various parts and they will all look uniform. One way of modeling this is generating a new block as a string of html, and then appending that to wherever on the page you're displaying all the data. So under your first each loop, rather than looping through all of the attributes for each object, it might look like:
new_product = "<div class='product'>";
new_product += "<p class='id'>" + value.id + "</p>";
....
....
new_product += "</div>";
$(".product_section").append(new_product);
Hope this helps! If you have any questions or need clarification, or if I'm completely off-base, feel free to let me know.