Develop Reference

how to implement jquery load on scroll

I have got a page in which I'm getting a users all friends posts now I want to get only 15 post first and then get I wanna add a load more button and then load 15 more posts how should I do that.
This is my code
$query = "SELECT ph.likes, ph.image_url,ph.email,ph.username,ph.uid ,ph.id
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'];
}
}
?>
<?php
$query = "SELECT ph.ext, ph.likes,ph.desccription, 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'];
$description = $users['desccription'];
$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; color: black !important; ">
<p style="color: black !important;"><?php echo "<div><a href='users?id=".$users['uid']."' style='color: black !important; '>
<h3>".$users['username']."</h3>
</div></a>"; ?></p>
</div>
</div>
<?php
if ($users['ext']=='mp4') {
?>
<video class="videos" controlsList="nofullscreen nodownload" style="width: 100%; height:100%;" controls autoplay="true" muted>
<source src="<?php echo $users['image_url']?>" type="video/mp4">
</video>
<?php
}else{
?>
<img src="<?php echo $users['image_url']?>" alt="Avatar" style="width:100%;">
<?php }
?>
<div class="container">
<h4><b><?php echo "<div><a href='users?id=".$users['uid']."'>
</div></a>";?></b></h4>
</div>
<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,avatar_path) VALUES ($id, '$fullname', $postid,'$activeavatar')")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>
<script type="text/javascript">
$('video').each(function(){
if ($(this).is(":in-viewport")) {
$(this)[0].play();
} else {
$(this)[0].pause();
}
})
</script>
<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 " 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 " data-id="<?php echo $users['id']; ?>"></span>
<?php endif ?>
<a class="com" style="color: #929292 !important; " href="show?post_id=<?php echo $users['id'];?>" style=""> <span class="glyphicon glyphicon-comment trigger" ></span>comments</a>
<div class="wink" style=" color: black;
width: 30px;
height: 30px;
margin-top: -20px;
margin-left: 209px;
" > <?php
?></div>
<div class="float2">
<div class="react2" id="react2" data-rowid="<?php echo $pixid?>"><?php
$query2 = "SELECT * FROM gormint where post_id = $pixid and user_id= $id3";
$fire2 = mysqli_query($con,$query2) or die("can not fetch data from database ".mysqli_error($con));
$query3 = "SELECT * FROM bhai where post_id = $pixid and user_id= $id3";
$fire3 = mysqli_query($con,$query3) or die("can not fetch data from database ".mysqli_error($con));
$query4 = "SELECT * FROM famer where post_id = $pixid and user_id= $id3";
$fire4 = mysqli_query($con,$query4) or die("can not fetch data from database ".mysqli_error($con));
$query5 = "SELECT * FROM muskan where post_id = $pixid and user_id= $id3";
$fire5 = mysqli_query($con,$query5) or die("can not fetch data from database ".mysqli_error($con));
if (mysqli_num_rows($fire2)>0) {
echo "<img src='gormint.jpg' class='gormint2' style='width:30px; height:30px;' >";
}elseif (mysqli_num_rows($fire3)>0) {
echo "<img src='bhai.jpg' class='bhai2' style='width:30px; height:30px;'>";
}elseif (mysqli_num_rows($fire4)>0) {
echo "<img src='famer.jpg' class='bhai2' style='width:30px; height:30px;'>";
}elseif (mysqli_num_rows($fire5)>0) {
echo "<img src='bancho.jpg' class='bhai2' style='width:30px; height:30px;'>";
} else{
echo "<img src='wink.png' class='wink2' style='width:30px; height:30px;'>";
}?>
</div>
<div class="flipClass" style="display: flex;" data-rowid="<?php echo $pixid?>" id="flip">react</div>
<div class="panelClass" style="" id="panel" data-rowid="<?php echo $pixid?>">
<input type="image" onclick="PlaySound2()" id="display" data-value="<?php echo $users['id'];?>" src="gormint2.jpg" class="close2 display gormint animated bounceIn " >
<input type="image" onclick="PlaySound3()" data-value="<?php echo $users['id'];?>" data-rowid="<?php echo $pixid?>" id="display2" src="bhai.jpg" class="close2 display2 bhai animated bounceIn">
<input type="image" data-rowid="<?php echo $pixid?>" onclick="PlaySound4()" data-value="<?php echo $users['id'];?>" id="display3" src="famer.jpg" class="close2 display3 bhai animated bounceIn">
<input type="image" onclick="PlaySound5()" data-value="<?php echo $users['id'];?>" id="display4" src="bancho.jpg" class="close2 display4 bhai animated bounceIn">
</div>
</div>
<div class="count2 ">
<span id="count" style="margin-top: -5%;" class="likes_count"><?php echo $users['likes']; ?> likes</span><?php
if ($description=='') {
echo "";
}else{ echo '<p style="margin-bottom: 5%" class="written"> <b>'.$users["username"].'</b> '.$description;'</p>';
}
?>
</div>
<form method="POST" action="" >
<div class="commentdiv">
<input type="hidden" name="id" id="id" class="id" value="<?php echo $pixid;?>">
<input type="hidden" name="username" id="username" value="<?php echo $activeusername;?>">
<input type="hidden" name="uid" id="uid" value="<?php echo $id3;?>">
<textarea style="" name="comment" id="comment" class="comment" placeholder=" comment here"></textarea>
<button type="button" style="background-color: Transparent;
background-repeat:no-repeat;
border: none;
cursor:pointer;
overflow: hidden;
color: #3897f0; font-weight:600;" class="submit" id="button_id">comment</button>
</div>
</form>
</div>
<div id="comments">
<?php
$sql = "SELECT * FROM comment where post_id='$pixid' limit 3";
$results = mysqli_query($con,$sql);
if (mysqli_num_rows($results)>0) {
while ($row = mysqli_fetch_assoc($results)) {
$commentid = $row['id'];
$comment = $row['comment'];
$string = covertHashtags($comment);
echo "<p class='written'>";
echo "<a href='users2?id=".$row['user_id']."' style='color:black !important;'><b>".$row['username']."</b></a>";
echo " ".$string;
$sql3 = "SELECT * FROM comment where id ='$commentid' and user_id='$id' order by comment desc limit 5 ";
$results3 = mysqli_query($con,$sql3);
if (mysqli_num_rows($results3)>0) {
echo "<div class='dropdown'>
<img src='ellipsis.png' class='dots'>
<div class='dropdown-content'>
<br><p class='delete' data-delete=".$commentid.">delete</p>
</div>
</div>";
}
else{
echo "";
}
echo "</p>";
}
}else{
echo "";
}
?>
</div>
</div>
<br><br>
<?php } ?>
now what should I do to add a load more button after first 15 posts and when user clicks on that button I want to load more 15 posts and there is also one more problem I have a set a refresh functionality through j query whenever a user clicks on like button or comments the page refreshes so would this cause any problem?

Show/hide info using slideToggle on button

Objective Inserting name(input-text) and info(textarea-contains multiple lines) into the database, and after submission of the form, at the same page, 2 columns are for displaying the same data in columns, name & info, but under info column. I have made buttons for each row in front of the names, which is used as slideToggle for showing/hiding which contains the data retrieved from the 'info' column
Problem - when I am clicking the button of 1st row, instead of displaying the info related to 1st entry only, it is sliding and showing all info(s) related to all entries at only click.
*others - one more input has been added to the form but as hidden used for id(auto increment)
----index.php-----
<?php include('php_code.php'); ?>
<?php
if (isset($_GET['edit'])) {
$id = $_GET['edit'];
$update = true;
$record = mysqli_query($db, "SELECT * FROM records WHERE id=$id");
if (count($record) == 1 ) {
$n = mysqli_fetch_array($record);
$name = $n['name'];
$acc = $n['acc_no'];
$info = $n['info'];
}
}
?>
<html>
<head>
<title>JSK</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('form').hide();
$('p').hide();
$('#sp').hide();
$("#inf").click(function(){
$("p").slideToggle();
$('#sp').slideToggle();
});
$("#fo").click(function(){
$("form").slideToggle();
});
});
</script>
</head>
<body>
<div class="container">
<div class="left">
<?php if (isset($_SESSION['message'])): ?>
<div class="msg">
<?php
echo $_SESSION['message'];
unset($_SESSION['message']);
?>
</div>
<?php endif ?>
<?php $results = mysqli_query($db, "SELECT * FROM records"); ?>
<table>
<thead>
<tr>
<th>Name</th>
<th>Account No</th>
<th>Info</th>
<th colspan="2">Action</th>
</tr>
</thead>
<?php while ($row = mysqli_fetch_array($results)) { ?>
<tr>
<td><?php echo $row['name']; ?></td>
<td><?php echo $row['acc_no']; ?></td>
<td><button id="inf" onclick="myFunction()">show</button></td>
<td>
<a href="index.php?edit=<?php echo $row['id']; ?>" class="edit_btn" >Edit</a>
</td>
<td>
Delete
</td>
</tr>
<tr id="sp"> <td colspan="4"><p> <?php echo $row['info']; ?> </p></td>
</tr>
<?php } ?>
</table>
<div id="fotable" align="center">
<button id="fo">Add New/Edit</button>
</div>
<form method="post" action="php_code.php" >
<input type="hidden" name="id" value="<?php echo $id; ?>">
<div class="input-group">
<label>Name</label>
<input type="text" autocomplete="off" name="name" value="<?php echo $name; ?>">
</div>
<div class="input-group">
<label>Account No</label>
<input type="text" name="acc" value="<?php echo $acc; ?>">
</div>
<div class="input-group">
<label for="info">Info</label>
<textarea class="form-control" rows="8" name="info" id="info"><?php echo $row['info']; ?></textarea>
</div>
<div class="input-group">
<?php if ($update == true): ?>
<button class="btn" type="submit" name="update" style="background: #556B2F;" >update</button>
<?php else: ?>
<button class="btn" type="submit" name="save" >Add Account</button>
<?php endif ?>
</div>
</form>
</div><!-- left closed -->
<div class="right">
hello
</div> <!-- right closed -->
</div> <!-- container closed -->
</body>
</html>
---php_code.php-----
<?php
session_start();
$db = mysqli_connect('localhost', 'root', '', 'jskrecords');
// initialize variables
$name = "";
$acc = "";
$info = "";
$id = 0;
$update = false;
if (isset($_POST['save'])) {
$name = $_POST['name'];
$acc = $_POST['acc'];
$info = $_POST['info'];
mysqli_query($db, "INSERT INTO records (name, acc_no, info) VALUES ('$name', '$acc', '$info')");
$_SESSION['message'] = "Account saved";
header('location: index.php');
}
if (isset($_POST['update'])) {
$id = $_POST['id'];
$name = $_POST['name'];
$acc = $_POST['acc'];
$info = $_POST['info'];
mysqli_query($db, "UPDATE records SET name='$name',acc_no='$acc',info='$info' WHERE id=$id");
$_SESSION['message'] = "Account updated!";
header('location: index.php');
}
if (isset($_GET['del'])) {
$id = $_GET['del'];
mysqli_query($db, "DELETE FROM records WHERE id=$id");
$_SESSION['message'] = "ACC deleted!";
header('location: index.php');
}
?>

Concept:
If you are creating multiple form from same mysql table using php script, You need to give each form a unique id.
e.g.
<form method="post" action="php_code.php" id="form<?= $id ?>">
Then add data-target="#form" to button with class 'inf'. It will store id of form.
<button class="inf" data-target="#form<?= $id ?>">show</button>
When button is clicked we know which form to open from data-target.
<script>
$('.container').on('click','button.inf',function(e){
e.preventDefault();
var formid=$(this).attr('data-target'); //get value of data-target attribute
//...proceed to play toggle with this form 'formid'

Passing Hidden ID value to another page using javascript php

I am trying to pass hidden value from page to another page and it work fine only for first record however for other records it's showing error
Here is the code:
$sql = "SELECT id,jdes,title FROM job";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
?>
<input type="hidden" id="hidden_user_id" value="<?php echo $row["id"] ?>">
<h3><?php echo $row["title"] ?>:</h3>
<p class="lead">
<?php echo $row["jdes"] ?>
</p>
<button type="button" id="requestthis" class="btn btn-primary">
Request
</button>
<?php
}
} else {
echo "Nothing to display Yet";
}
?>
jobs-inner.php
<?php
echo $_GET['hidden_id'];
?>
Javascript:-
$(function() { //ready function
$('#requestthis').on('click', function(e){ //click event
e.preventDefault();
var hidden_id = $('#hidden_user_id').val();
var url = "jobs-inner.php?hidden_id="+hidden_id;
window.location.replace(url);
})
})
Error:-
Undefined index: hidden_id in C:\wamp64\www\project\jobs-inner.php on line 3
It might be a simple problem but I am a beginner and I can't figure it out.

Your value is unique but the id isn't. Make the id of the input unique something like below.
<input type="hidden" id="hidden_user_<?php echo $row["id"] ?>" value="<?php echo $row["id"] ?>">
but you would have to do a count on code below to make it display base on how many rows you have.
<?php
echo $_GET['hidden_id'];
?>
Without JavaScript
$sql = "SELECT id,jdes,title FROM job";
$result = $conn->query($sql);
$count = 1;
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
?>
<input type="hidden" id="hidden_user_<?php echo $count ?>" value="<?php echo $row["id"] ?>">
<h3><?php echo $row["title"] ?>:</h3>
<p class="lead"><?php echo $row["jdes"] ?></p>
<form id="<?php echo $count ?>" action="jobs-inner.php?hidden_id=<?php echo $row["id"] ?>" method="post">
<input type="submit" vaule="Request">
</form>
<?php
$count++;
}
} else {
echo "Nothing to display Yet";
}
?>

Get patient details on combo box change

I need the code for getting the addr and pnum of the patient when I choose the pname in the combo box.
How can I do that?
<script>
function getVal() {
document.getElementById("text2").value = document.getElementById("model").value;
}
</script>
<body>
//code in opening and getting my addr and pnum in dbase
<?php
include('connect.php');
$pname=$_GET['tpname'];
$result = mysql_query("SELECT * FROM tblnpatient where pname='$pname'");
while($row = mysql_fetch_array($result))
{
$pnum=$row['pnum'];
$addr=$row['addr'];
}
?>
//code for choosing pname
<tr><td>Patient Name:
<div id="ma">
<select name="pname" class="textfields" id="model" style="width:180px;" onchange="getVal();">
<option id="0" >--Select Patient Name--</option>
<?php
$con=mysqli_connect("localhost","root","","dbnpatient");
if (mysqli_connect_errno()){
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$pnum=$_GET['pnum'];
$query = mysqli_query($con, "SELECT * FROM tblnpatient");
while($row = mysqli_fetch_array($query)){
$pnum = $row['pnum'];
$pname = $row['pname'];
?>
<option id="<?php echo $pnum; ?>" value="<?php echo $pname; ?>"><?php echo $pname; ?> </option>
<?php } ?>
</select>
//code for getting pname and addr
Address:<input type="text" name="ename" size="20" id="ma" value="<?php echo $addr ?>"/>
Name:<input type="text" name="ename" size="20" id="ma" value="<?php echo $pname ?>"/>

In your while loop add the following (if you have that column otherwise replace with something similar)
$paddress = $row['paddress'];
You can store the needed information by using the data attribute in your options
<option id="<?php echo $pnum; ?>" data-pname="<?php echo $pname; ?>" data-paddress="<?php echo $paddress; ?>" value="<?php echo $pname; ?>"><?php echo $pname; ?></option>
Then change your getVal() function
function getVal() {
var options = document.getElementById("model").options;
if (options.selectedIndex != -1) {
var addr = document.getElementById('paddress');
var name = document.getElementById('pname');
addr.value = options[options.selectedIndex].getAttribute('data-paddress');
name.value = options[options.selectedIndex].getAttribute('data-pname');
}
}
Now change the id's of the input fields for the address and the name to paddress and pname. It is important to know to never have duplicate id's
I hope that helped

Split content of select into different fields

I'm trying to send the values that are separated by an pipe to 2 different fields. For some reason it won't work.
Any ideas?
<script type="text/javascript">
function folder(selectVeld)
{
// Stuur informatie terug
var id = (selectVeld.options[selectVeld.selectedIndex].value).split('|');
// Id
document.getElementsByName('folder_id').value = id[0];
// Naam
document.getElementsByName('folder_naam').value = id[1];
}
</script>
<tr>
<td><?php echo $lang['folder']; ?>:</td>
<td><select name="folder" onChange="folder(this)">
<option value="geen"><?php echo $lang['no_folder']; ?></option>
<?php
$sql = "SELECT id, naam FROM 2_folder ORDER BY naam ASC";
$res = mysql_query($sql,$con);
while ($row = mysql_fetch_assoc($res)){
?>
<option <?php if($row['id'].'|'.$row['naam'] == $folder){ echo 'selected="selected"'; } ?> value="<?php echo $row['id'].'|'.$row['naam']; ?>"><?php echo $row['naam'] ?></option>
<?php } ?></select>
</td>
</tr>
<input type="text" name="folder_id" value="<?php echo $folder_id; ?>" size="5" style="background-color: #e7e7e9" readonly="readonly" />
<input type="text" name="folder_naam" value="<?php echo $folder_naam; ?>" size="5" style="background-color: #e7e7e9" readonly="readonly" />

document.getElementsByName returns a array of elements, even if there is only a single element with that name.
document.getElementsByName('folder_id')[0].value = id[0];
document.getElementsByName('folder_naam')[0].value = id[1];
should do the trick. jsfiddle sample

I have avoided this problem by using only the folder_id and find the name with an seperate query after sending the form.