How to load more comments without refreshing the browser - php

Am working on comment system, but am stuck here, after loading my PHP on my browser, it shows me exactly 2 comments that I want to see, when I click the link it fetches the other 2 comments as I programmed it on jQuery, but after that the button disappears and I cant load more comments.
Please help!
Here is my code,
<script>
$(document).ready(function() {
var commentCount = 2;
$("button").click(function() {
commentCount = commentCount + 2;
$("#comments").load("2.php", {
commentNewCount: commentCount
});
});
});
</script>
<body>
<div id="comments">
<?php
$sql = "SELECT * FROM comments ORDER BY id LIMIT 2";
$result = mysqli_query($con, $sql);
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) { ?>
<div class="media response-info">
<div class="media-left response-text-left">
<a href="#">
<img class="media-object" src="images/c1.jpg" alt="">
</a>
<h5><?php echo $row['author']; ?></h5>
</div>
<div class="media-body response-text-right">
<p><?php echo $row['message']; ?></p>
<ul>
<li><?php echo $row['time']; ?> </li>
<li>Reply</li>
</ul>
</div>
</div>
<?php }
} else {
echo "there are no comments!";
}
?>
<button>More comments</button>
</body>
and this down here is my load-coments.php (i decided to call it 2.php)
<?php
include 'include/dbconnect.php';
$commentNewCount = $_POST['commentNewCount'];
$sql = "SELECT * FROM comments ORDER BY id LIMIT $commentNewCount";
$result = mysqli_query($con, $sql);
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) { ?>
<div class="media response-info">
<div class="media-left response-text-left">
<a href="#">
<img class="media-object" src="images/c1.jpg" alt="">
</a>
<h5><?php echo $row['author']; ?></h5>
</div>
<div class="media-body response-text-right">
<p><?php echo $row['message']; ?></p>
<ul>
<li><?php echo $row['time']; ?> </li>
<li>Reply</li>
</ul>
</div>
</div>
<?php }
} else {
echo "there are no comments!";
}
?>

What do you mean with "button disappears"?. The load function of jquery replaces the html with the recieved html so maybe your button is in the div you're replacing. It's hard to debug your code because of the lack of indents.

Related

jquery output not working individually on php executed posts

i have a query that have many outputs and in those output i want to execute a jquery but that jquery is working in each & every output i want it to work only on the clicked one
this is my code
$query = "SELECT ph.likes, ph.image_url,ph.email,ph.username,ph.uid ,ph.id,ph.avatar_path
FROM photos as ph
inner join followers as fol
on fol.user_id = ph.uid
where fol.uid = '$id'
ORDER BY ph.image_url DESC ";
$fire = mysqli_query($con,$query) or die("can not fetch data from database ".mysqli_error($con));
if (mysqli_num_rows($fire)>0) {
while ($users = mysqli_fetch_assoc($fire)) {
$likes = $users['likes'];
$username = $users['username'];
$uid = $users['uid'];
$pixid = $users['id'];
$avatar_path5 = $users['avatar_path'];
?>
<div class="all" >
<div class="card" >
<div class="float" >
<div class="avatar" >
<img src="<?php echo $avatar_path5; ?>" width="100%" class="avatar">
</div>
<div class="username" style="font-weight: 600; size: 14px; text-decoration: none;">
<p><?php echo "<div><a href='users.php?id=".$users['uid']."'>
<h3>".$users['username']."</h3>
</div></a>"; ?></p>
</div>
</div>
<img src="<?php echo $users['image_url']?>" alt="Avatar" style="width:682px;">
<div class="container">
<h4><b><?php echo "<div><a href='users.php?id=".$users['uid']."'>
</div></a>";?></b></h4>
</div>
<span id="count" class="likes_count"><?php echo $users['likes']; ?> likes</span>
<div style="padding: 2px; margin-top: 5px;">
<?php
if (isset($_POST['liked'])) {
$postid = $_POST['postid'];
$result = mysqli_query($con, "SELECT * FROM photos WHERE id=$postid")or die(mysqli_error($con));
$row = mysqli_fetch_array($result)
or die(mysqli_error($con));
$n = $row['likes'];
mysqli_query($con, "INSERT INTO likes (user_id,username, post_id) VALUES ($id, '$fullname', $postid)")or die(mysqli_error($con));
mysqli_query($con, "UPDATE photos SET likes=$n+1 WHERE id=$postid")or die(mysqli_error($con));
echo $n+1;
exit();
}
if (isset($_POST['unliked'])) {
$postid = $_POST['postid'];
$result = mysqli_query($con, "SELECT * FROM photos WHERE id=$postid")or die(mysqli_error($con));
$row = mysqli_fetch_array($result)or die(mysqli_error($con));
$n = $row['likes'];
mysqli_query($con, "DELETE FROM likes WHERE post_id=$postid AND user_id=$id")or die(mysqli_error($con));
mysqli_query($con, "UPDATE photos SET likes=$n-1 WHERE id=$postid")or die(mysqli_error($con));
echo $n-1;
exit();
}
?>
</div>
<div>
<?php
// determine if user has already liked this post
$results = mysqli_query($con, "SELECT * FROM likes WHERE user_id=$id AND post_id=".$users['id']."")or die(mysqli_error($con));
if (mysqli_num_rows($results) == 1 ): ?>
<!-- user already likes post -->
<span class="unlike fas fa-heart animated bounceIn" data-id="<?php echo $users['id']; ?>"></span>
<span class="like hide far fa-heart" onclick="PlaySound()" data-id="<?php echo $users['id']; ?>"></span>
<?php else: ?>
<!-- user has not yet liked post -->
<span class="like far fa-heart" onclick="PlaySound()" data-id="<?php echo $users['id']; ?>"></span>
<span class="unlike hide fas fa-heart animated bounceIn" data-id="<?php echo $users['id']; ?>"></span>
<?php endif ?>
<a class="com" href="comments.php"> <span class="far fa-comment"></span></a>
<p>This is a paragraph.</p>
<button class="y<?php echo $users['id']?>">Toggle slideUp() and slideDown()</button>
<script>
$(document).ready(function(){
$(".y").click(function(){
$("p").slideToggle();
});
});
</script>
</div>
</div><br><br>
<?php } ?>
see this script in my code
<p>This is a paragraph.</p>
<button class="y<?php echo $users['id']?>">Toggle slideUp() and slideDown()</button>
<script>
$(document).ready(function(){
$(".y").click(function(){
$("p").slideToggle();
});
});
</script>
i want it to work only on the clicked post not on each & every post please help me out
for ex a if click on a post button so i want this script to work only for that
particular post's button not for every post button how to solve this
You seem to have the jquery selectors mixed up. From my reading of your PHP you apply a variable class name to the buttons that starts with y, then you select those with a class of y which won't match.
One way round this would be to also apply a consistent class to all the buttons (buttonclass in my example)
Then you're selecting all <p> elements to apply the slideToggle() instead of just the one whose button was clicked. You need to apply it only to the parent <p>.
This is one method of doing it:
$(document).ready(function(){
$(".buttonclass").click(function(){
$(this).parent().slideToggle();
});
});

How to fetch comments from mysql database without destroying my html tags

I want to give a little style for my comment section, here is the code without any css, but i want to give it some style
<div id="comments">
<?php
$sql = "SELECT * FROM comments ORDER BY id LIMIT 2";
$result = mysqli_query($con, $sql);
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
echo "<p>";
echo $row['author'];
echo "<br>";
echo $row['message'];
echo "<br>";
echo $row['time'];
echo "</p>";
}
} else {
echo "there are no comments!";
}
?>
</div>
<button>More comments</button>
and down here is my html section of which i want to appear while handling my php comments where USER, COMMENT and TIME are are stored in my database, here is the html, how can i echo the above variables into the below html tags ?
<div class="media response-info">
<div class="media-left response-text-left">
<a href="#">
<img class="media-object" src="images/c1.jpg" alt="">
</a>
<h5>USER</h5>
</div>
<div class="media-body response-text-right">
<p>COMMENT</p>
<ul>
<li>TIME</li>
<li>Reply</li>
</ul>
</div>
</div>
You can do like this:
<div id="comments">
<?php
$sql = "SELECT * FROM comments ORDER BY id LIMIT 2";
$result = mysqli_query($con, $sql);
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) { ?>
<div class="media response-info">
<div class="media-left response-text-left">
<a href="#">
<img class="media-object" src="images/c1.jpg" alt="">
</a>
<h5><?php echo $row['author']; ?></h5>
</div>
<div class="media-body response-text-right">
<p><?php echo $row['message']; ?></p>
<ul>
<li><?php echo $row['time']; ?> </li>
<li>Reply</li>
</ul>
</div>
</div>
<?php }
} else {
echo "there are no comments!";
}
?>
</div>
hope it will help you.

PHP: Populating data in div

I'm trying to populate data in a div. Which works fine except that, the first div of data will be repeated once as shown on the attached image. I couldn't see any logical error in my code, and hope someone could kindly help me.
<div class="posts">
<?php
include("dbconn.php");
$sql = "SELECT *
FROM posts p
INNER JOIN users u
ON p.userID=u.userID
INNER JOIN courses c
ON p.courseID=c.courseID;";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
while($row = mysqli_fetch_assoc($result)) {
?>
<section class="post">
<header class="post-header"> <img class="post-avatar" height="48" width="48" src="image/common/tilo-avatar.png">
<h2 class="post-title"><?php echo $row["postTitle"]; ?></h2>
<p class="post-meta"> By <?php echo $row["nickname"]; ?> under <a class="post-category post-category-design" href="#"><?php echo $row["courseName"]; ?></a> </p>
</header>
<div class="post-description">
<p> <?php echo $row["postContent"]; ?> </p>
</div>
</section>
<?php
}
} else {
echo "no questions yet";
}
?>
</div>
image

How do I sort elements in a while loop?

I'm about to display comments on a page, everything works fine but I want to display the comments from the user first. So, how do I display the user comments from the user_id first? I'm using a while loop to display the comments.
I would be very grateful if anyone could help me. :)
<?php
$sql = "SELECT * FROM `comments` WHERE `post_id`=$pid AND `active`=1 ORDER BY ups-downs DESC";
$result = $mysqli->query($sql);
$count = $result->num_rows;
if($count == 1){
$counttext = "1 Comment";
}else{
$counttext = $count ." Comments";
}
?>
<div class="media-area media-area-small">
<h3 class="text-center"><?php echo $counttext; ?></h3>
<?php
while($row = $result->fetch_assoc()){
$uid = (int)$row["user_id"];
$user = get_user_info($mysqli,$uid);
?>
<div class="media">
<a class="pull-left" href="#">
<div class="avatar">
<img class="media-object" src="<?php echo $user["picture"]; ?>" alt="...">
</div>
</a>
<div class="media-body">
<table width="100%">
<tr valign="middle">
<td align="left"><h4 class="media-heading text-left"><?php echo fb_clear_name($mysqli, $user["id"]); ?></h4></td>
<td align="right"><h6 class="pull-right text-muted"><?php echo $row["ups"] - $row["downs"]; ?> bits</h6></td>
</tr>
</table>
<p><?php echo htmlentities($row["content"]); ?></p>
<div class="media-footer">
<i class="fa fa-reply"></i> Reply
<a href="#" class="pull-right text-muted">
<?php echo $row["timestamp"]; ?>
</a>
</div>
</div>
</div>
<?php
}
?>
Greetings
You can prefilter the data. For example use
$user_comments=array();
$other_comments=array();
while($row = mysql_fetch_assoc($result))
{
if($row['user']==$current_user)
{
$user_comments[]=$row;
}
else
{
$other_comments[]=$row;
}
}
$comments=array_merge($user_comments,$other_comments);
Then you can display the information the way you want to.

Simplified php code for displaying results

Sorry if this have been asked before but I couldn't find what I wanted and I am not strong in PHP.
Right now I have this code, which is supposed to return result for different levels:
<div class="swiper-slide">
<img src="img/B1.jpg" alt="" />
<div class="content_container">
<?php
$result = mysqli_query($con,"SELECT * FROM floor_directory WHERE level='B1'");
while($row = mysqli_fetch_array($result))
{
?>
<h1><?php echo $row['categories']; ?></h1>
<ul class="shop_listing clearfix">
<li class="float_left"><?php echo $row['name']; ?></li>
<li class="float_right"><?php echo $row['unit_number']; ?></li>
</ul>
<?php
}
?>
</div>
</div>
<div class="swiper-slide">
<img src="img/L1.jpg" alt="" />
<div class="content_container">
<?php
$result = mysqli_query($con,"SELECT * FROM floor_directory WHERE level='L1'");
while($row = mysqli_fetch_array($result))
{
?>
<h1><?php echo $row['categories']; ?></h1>
<ul class="shop_listing clearfix">
<li class="float_left"><?php echo $row['name']; ?></li>
<li class="float_right"><?php echo $row['unit_number']; ?></li>
</ul>
<?php
}
?>
</div>
</div> and so on...
Right now I can only duplicate it in order to fulfil the displaying of result for each individual levels. If let's say the building have 10 levels, is there a way to simplified the coding?
Hope you guys understand. Thanks in advance! =)
Try this:
<?php
$levelArray=array('L1','B1','L2','B2');
foreach ($levelArray as $i=>$level) {
$data='';
$img = "img/".$levelArray[$i];
$result = mysqli_query($con,"SELECT * FROM floor_directory WHERE level='$levelArray[$i]'");
while($row = mysqli_fetch_array($result)){
$data .= '<h1>'.$row['categories'].'</h1>
<ul class="shop_listing clearfix">
<li class="float_left">'.$row['name'].'</li>
<li class="float_right">'.$row['unit_number'].'</li>
</ul>';
}
echo '<div class="swiper-slide">
<img src="'.$img.'" alt="" />
<div class="content_container">'.$data.'</div>
</div>'
}
?>

Categories