We Keep Coding

Please suggest me why my $(window).scrolltop() is not working for all browsers

<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
var lastID = $('.load-more').attr('lastID');
if(($(window).scrollTop() == $(document).height() - $(window).height())
&& (lastID != 0)){
$.ajax({
url:"main_feed_ajax.php",
method:"POST",
data:'feed_id='+lastID,
cache:false,
beforeSend:function(){
$('.load-more').show();
},
success:function(html){
$('.load-more').remove();
$('#postList').append(html);
}
});
}
});
});
</script>
I have this code for scroll data loading without page refresh. My code is working fine for some few browsers only. Also it is not working on mobile and tablet using google chrome, firefox. Only It is working on Internet Explorer and some chrome browser. So, Please suggest me what I need to change in this code.
Index.php page
<div id="postList">
<?php
// Include the database configuration file
require 'dbConfig.php';
// Get records from the database
$query = $db->query("SELECT * FROM user_post ORDER BY feed_id DESC LIMIT
5");
if($query->num_rows > 0){
while($row = $query->fetch_assoc()){
$postID = $row["feed_id"];
$feed_text = $row["feed_text"];
?>
<div class="list-item"><h4><?php echo $feed_text; ?></h4><img
style="width:200px; height:200px;" src="car.jpg"></div>
<?php } ?>
<div class="load-more" lastID="<?php echo $postID; ?>" style="display:
none;">
<img src="loader.gif"/>
</div>
<?php } ?>
</div>
main_feed_ajax.php page
<?php
if(!empty($_POST["feed_id"])){
//Include DB configuration file
$server_access_name="localhost";
$server_access_id="root";
$server_access_pass_code="";
$server_access_batabase_name="inkme";
// Create connection
$conn_server_link = mysqli_connect($server_access_name, $server_access_id,
$server_access_pass_code, $server_access_batabase_name);
if(!$conn_server_link){
echo "!Ops, Unable to connect ";
}
//Get last ID
$lastID = $_POST['feed_id'];
//Limit on data display
$showLimit = 5;
//Get all rows except already displayed
$queryAll = $conn_server_link->query("SELECT COUNT(*) as num_rows FROM
user_post WHERE feed_id < ".$lastID." ORDER BY feed_id DESC");
$rowAll = $queryAll->fetch_assoc();
$allNumRows = $rowAll['num_rows'];
//Get rows by limit except already displayed
$query = $conn_server_link->query("SELECT * FROM user_post WHERE feed_id <
".$lastID." ORDER BY feed_id DESC LIMIT ".$showLimit);
if($query->num_rows > 0){
while($row = $query->fetch_assoc()){
$postID = $row["feed_id"];
$feed_text = $row["feed_text"];
?>
<div class="list-item"><h4><?php echo $feed_text; ?></h4><img
style="width:200px; height:200px;" src="car.jpg"></div>
<?php } ?>
<?php if($allNumRows > $showLimit){ ?>
<div class="load-more" lastID="<?php echo $postID; ?>" style="display:
none;">
<img src="loader.gif"/>
</div>
<?php }else{ ?>
<div class="load-more" lastID="0">
No more feeds
</div>
<?php }
}
else{ ?>
<div class="load-more" lastID="0">
That's All!
</div>
<?php
}
}
?>

How to Create Load More With PHP and PDO

i want to create load more to my site, but when i try to click load more it just load 2 items.
my index.php
<div class="postList">
<?php
// Include the database configuration file
include 'koneksi.php';
// Get records from the database
$query = $db->prepare("SELECT * FROM master_post, posting WHERE master_post.master_post_name = posting.master_post_name AND posting.sticky = 'Normal' ORDER BY posting.idpost DESC LIMIT 2");
$query->execute();
if($query->rowCount() > 0){
while($row = $query->fetch()){
$postID = $row['idpost'];
?>
<div class="list_item"><?php echo $row['file_name']; ?></div>
<?php } ?>
<div class="show_more_main" id="show_more_main<?php echo $postID; ?>">
<span id="<?php echo $postID; ?>" class="show_more" title="Load more posts">Show more</span>
<span class="loding" style="display: none;"><span class="loding_txt">Loading...</span></span>
</div>
<?php } ?>
</div>
my javascript
<script type="text/javascript">
$(document).ready(function(){
$(document).on('click','.show_more',function(){
var ID = $(this).attr('id');
$('.show_more').hide();
$('.loding').show();
$.ajax({
type:'POST',
url:'ajax_more.php',
data:'id='+ID,
success:function(html){
$('#show_more_main'+ID).remove();
$('.postList').append(html);
}
});
});
});
</script>
my ajax_more.php
if(!empty($_POST["id"])){
// Include the database configuration file
include 'koneksi.php';
// Count all records except already displayed
$query = $db->prepare("SELECT COUNT(*) as num_rows FROM master_post, posting WHERE master_post.master_post_name = posting.master_post_name AND posting.sticky = 'Normal' AND posting.idpost < ".$_POST['id']." ORDER BY posting.idpost DESC");
$row = $query->fetch();
$totalRowCount = $row['num_rows'];
$showLimit = 2;
// Get records from the database
$query = $db->query("SELECT * FROM master_post, posting WHERE master_post.master_post_name = posting.master_post_name AND posting.sticky = 'Normal' AND posting.idpost < ".$_POST['id']." ORDER BY posting.idpost DESC LIMIT $showLimit");
if($query->rowCount() > 0){
while($row = $query->fetch()){
$postID = $row['idpost'];
?>
<div class="list_item"><?php echo $row['file_name']; ?></div>
<?php } ?>
<?php if($totalRowCount > $showLimit){ ?>
<div class="show_more_main" id="show_more_main<?php echo $postID; ?>">
<span id="<?php echo $postID; ?>" class="show_more" title="Load more posts">Show more</span>
<span class="loding" style="display: none;"><span class="loding_txt">Loading...</span></span>
</div>
<?php } ?>
<?php
}
}
I'm not sure where the mistake is. im using tutorial from this site https://www.codexworld.com/load-more-data-using-jquery-ajax-php-from-database/

form action add page search

I have a problem
I hope you understand I write English badly:
I created a search field that contains these two files
index.php
<?php
include('db.php');
$keySesso = $_GET['sesso'];
$keyEta = $_GET['eta'];
$keyRegione = $_GET['regione'];
$keyFoto = $_GET['foto'];
//sesso
if(isset($keySesso)){
if ($keySesso == 2) {
$FemminaE="selected";
}else if ($keySesso == 1){
$MaschioE="selected";
}else if ($keySesso == 26){
$Gay="selected";
}else if ($keySesso == 27){
$Lesbica="selected";
}else if ($keySesso == 29){
$FemminaB="selected";
}else if ($keySesso == 28){
$MaschioB="selected";
}else{
$sessoN="";
}
}
//for total count data
$countSql = "SELECT COUNT(last_activity) FROM _core_members INNER JOIN _core_pfields_content ON _core_members.member_id = _core_pfields_content.member_id $whereSQL $keyRegione $CondizioneEta $CondizioneFoto ";
$tot_result = mysqli_query($conn, $countSql);
$row = mysqli_fetch_row($tot_result);
$total_records = $row[0];
$total_pages = ceil($total_records / $limit);
//for first time load data
if (isset($_GET["page"])) { $page = $_GET["page"]; } else { $page=1; };
$start_from = ($page-1) * $limit;
$sql = "SELECT * FROM _core_members INNER JOIN _core_pfields_content ON _core_members.member_id = _core_pfields_content.member_id $whereSQL $keyRegione $CondizioneEta $CondizioneFoto ORDER BY last_activity DESC LIMIT $start_from, $limit";
$rs_result = mysqli_query($conn, $sql);
?>
<!DOCTYPE html>
<head>
</head>
<body >
<div class="BloccoBaseBO">
<div class="container" id="BOcontent">
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="tab1">
<form method='GET' id='FormChattaCon' class='FormBase' action=''>
<select id="SelectedSesso" name="sesso">
<option value="" <?php echo $sessoN; ?>>Tutti i generi</option>
<option value="2" <?php echo $FemminaE; ?>>femmine (Etero)</option>
<option value="1" <?php echo $MaschioE; ?>>maschi (Etero)</option>
<option value="26" <?php echo $Gay; ?>>Gay</option>
<option value="27" <?php echo $Lesbica; ?>>Lesbica</option>
<option value="29" <?php echo $FemminaB; ?>>Femmina (Bisex)</option>
<option value="28" <?php echo $MaschioB; ?>>Maschio (Bisex)</option>
</select>
<div class='ConFoto'>Con Foto: <input id="checkBox" name="foto" type="checkbox" onclick="javascript: submitform()" <?php echo $check;?>/> </div>
</form>
<table class="table table-bordered table-striped">
<tbody id="target-content">
<?php
while ($row = mysqli_fetch_assoc($rs_result)) {
echo "<div class='bloccoUserOnlineBO'></div><li class='NomeBloccoB'>$MemberName</li>";
};
?>
</tbody>
</table>
<nav><ul class="pagination">
<?php if(!empty($total_pages)):for($i=0; $i<=$total_pages; $i++):
if($i == 0):?>
<li class='active' id="<?php echo $i;?>"><a href='pagination.php?page=<?php echo $i;?>'><?php echo $i;?></a></li>
<?php else:?>
<li id="<?php echo $i;?>"><a href='pagination.php?page=<?php echo $i;?>'><?php echo $i;?></a></li>
<?php endif;?>
<?php endfor;endif;?>
</ul>
</nav>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.pagination').pagination({
items: <?php echo $total_records;?>,
itemsOnPage: <?php echo $limit;?>,
cssStyle: 'light-theme',
currentPage : 0,
onPageClick : function(pageNumber) {
jQuery("#target-content").html('loading...');
jQuery("#target-content").load("pagination.php?page=" + pageNumber);
}
});
});
</script>
<!-- tab -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="js/jquery.scrolling-tabs.js"></script>
<script>
$('.nav-tabs').scrollingTabs();
</script>
<!-- FlexSlider -->
<script src="http://www..it/info-user-global/js/jquery.flexslider-min.js"></script>
<script src="http://www..it/info-user-global/js/main.js"></script>
the second where it is recalled from the pages
pagination.php
<?php
include('db.php');
if (isset($_GET["page"])) { $page = $_GET["page"]; } else { $page=1; };
$start_from = ($page-1) * $limit;
$sql = "SELECT * FROM ILFREE_core_members INNER JOIN ILFREE_core_pfields_content ON ILFREE_core_members.member_id = ILFREE_core_pfields_content.member_id $whereSQL $keyRegione $CondizioneEta $CondizioneFoto ORDER BY last_activity DESC LIMIT $start_from, $limit";
$rs_result = mysqli_query($conn, $sql);
?>
<?php
while ($row = mysqli_fetch_assoc($rs_result)) {
echo "<div class='bloccoUserOnlineBO'></div><li class='NomeBloccoB'>$MemberName</li>";
};
?>
The problem is this
When I compile the form, the result appears only on the index.php page
When I push the buttons on the bottom pages linked to the pagination.php page, I reset the form
enter image description here
I can not fix it because the form data will stop at the index page but when I call the pagination.php file through this:
<script type="text/javascript">
$(document).ready(function(){
$('.pagination').pagination({
items: <?php echo $total_records;?>,
itemsOnPage: <?php echo $limit;?>,
cssStyle: 'light-theme',
currentPage : 0,
onPageClick : function(pageNumber) {
jQuery("#target-content").html('loading...');
jQuery("#target-content").load("pagination.php?page=" + pageNumber);
}
});
});
</script>
I reset the form
Please help me
I hope I was clear
I also leave you an email, I am willing to pay for help
IlfreeIF#gmail.com

This is exactly what AJAX is for (AJAX can do the same .load() function can, but with more configurability):
http://www.seguetech.com/ajax-technology/
jQuery Ajax POST example with PHP

php while but the result have to shows in javascript

I have the following code and what I'm trying to do is to show the mysql result in the message box with javascript, but when I click on the message box it shows me only one result for every button.
I want every button have his own message which is in database.
Does anybody have an idea on how I can do it?
<?
$query = "SELECT * FROM `Points`";
$result = mysql_query($query);
while($row = mysql_fetch_assoc($result)){
?>
<div style="position:absolute; overflow:hidden; <?php echo $row[Pos]; ?> height:23px; z-index:0">
<button onClick="showMsgBox();" id="showBtn">Show MsgBox</button>
</div>
<script>
$("#showBtn").focus();
msgBoxImagePath = "images/";
function showMsgBox() {
$.msgBox({
title: "Ads",
content: "<? echo $row[Ctn]; ?>",
type: "alert"
});
}
</script>
<?}?>
In the database Pos is the position of the button and Ctn is the message.
Please help.

Try this ;)
<?php
$query = "SELECT * FROM `Points`";
$result = mysql_query($query);
/* all messages */
$messages = array();
$index = 0;
while($row = mysql_fetch_assoc($result)){
$messages[] = $row['Ctn'];
?>
<div style="position:absolute; overflow:hidden; <?php echo $row['Pos']; ?> height:23px; z-index:0">
<button onClick="showMsgBox(<? echo $index++; ?>);" id="showBtn">Show MsgBox</button>
</div>
<?php
}
?>
<script>
var messages = <?php echo json_encode($messages); ?>;
$("#showBtn").focus();
msgBoxImagePath = "images/";
function showMsgBox(index){
$.msgBox({
title: "Ads",
content: messages[index],
type: "alert"
});
}
</script>
Used <?php ... ?> tags you can change as per your need;

Firstly, you id should be unique, if your input is the loop make sure your id is also unique.
Please see code below this might work for you.
<?
$query = "SELECT * FROM 'Points'";
$result = mysql_query($query);
$queryCounter = 0;
$message = array();
while($row = mysql_fetch_assoc($result)){
$message[$queryCounter] = $row[Ctn];
?>
<div style="position:absolute; overflow:hidden; <?php echo $row[Pos]; ?> height:23px; z-index:0">
<button onClick="showMsgBox(<?php echo $queryCounter; ?>);" id="showBtn<?php echo $queryCounter; ?>">Show MsgBox</button>
</div>
<script>
$("#showBtn").focus();
msgBoxImagePath = "images/";
function showMsgBox(id) {
$.msgBox({
title: "Ads",
content: "<? echo $message[id]; ?>",
type: "alert"
});
}
</script>
<? $queryCounter ++; }?>

check out this code, i hope it will work for you, here i have used data-value html5 attribute to get the message when button is clicked.
<?php
$query = "SELECT * FROM `Points`";
$result = mysql_query($query);
while($row = mysql_fetch_assoc($result)){
?>
<div style="position:absolute; overflow:hidden; <?php echo $row['Pos']; ?> height:23px; z-index:0" data-value="<?php echo $row['Ctn']; ?>" id="showMsgBoxContent_<?php echo $row['id'];?>" >
<button onClick="showMsgBox(<?php echo $row['id']; ?>);" id="showBtn_<?php echo $row['id']; ?>">Show MsgBox</button>
</div>
<?php
}
?>
<script>
msgBoxImagePath = "images/";
function showMsgBox(id)
{
$("#showBtn_"+id).focus();
var showContent = $('#showMsgBoxContent_'+id).getAttribute('data-value');
$.msgBox({
title: "Ads",
content: showContent,
type: "alert"
});
}
</script>

Adding image to comment box

Thanks for your time guys.
I have the following code working for my commenting system though I can't really be sure about the security for now. But I need your help guys in :
Allowing anyone that comment to add their image to their comment whether registered users or Visitors
Building the inside comment or reply box. This is what I got.
Comment for comment counter
Here is the PHP code for the comment:
<?php
// Connect to the database
include('config.php');
$id_post = "1"; //the post or the page id
?>
<div class="cmt-container" >
<?php
$sql = mysql_query("SELECT * FROM comments WHERE id_post = '$id_post'") or die(mysql_error());;
while($affcom = mysql_fetch_assoc($sql)){
$name = $affcom['name'];
$email = $affcom['email'];
$comment = $affcom['comment'];
$date = $affcom['date'];
// Get gravatar Image
// https://fr.gravatar.com/site/implement/images/php/
$default = "mm";
$size = 35;
$grav_url = "http://www.gravatar.com/avatar/".md5(strtolower(trim($email)))."?d=".$default."&s=".$size;
?>
<div class="cmt-cnt">
<img src="<?php echo $file_path; ?>" height="250" />
<div class="thecom">
<h5><?php echo $name; ?></h5><span data-utime="1371248446" class="com-dt"><?php echo $date; ?></span>
<br/>
<p>
<?php echo $comment; ?>
</p>
</div>
</div><!-- end "cmt-cnt" -->
<?php } ?>
<div class="new-com-bt">
<span>Write a comment ...</span>
</div>
<div class="new-com-cnt">
<input type="text" id="name-com" name="name-com" value="" placeholder="Your name" />
<input type="text" id="mail-com" name="mail-com" value="" placeholder="Your e-mail adress" />
<textarea class="the-new-com"></textarea>
<div class="bt-add-com">Post comment</div>
<div class="bt-cancel-com">Cancel</div>
</div>
<div class="clear"></div>
</div><!-- end of comments container "cmt-container" -->
<script type="text/javascript">
$(function(){
//alert(event.timeStamp);
$('.new-com-bt').click(function(event){
$(this).hide();
$('.new-com-cnt').show();
$('#name-com').focus();
});
/* when start writing the comment activate the "add" button */
$('.the-new-com').bind('input propertychange', function() {
$(".bt-add-com").css({opacity:0.6});
var checklength = $(this).val().length;
if(checklength){ $(".bt-add-com").css({opacity:1}); }
});
/* on clic on the cancel button */
$('.bt-cancel-com').click(function(){
$('.the-new-com').val('');
$('.new-com-cnt').fadeOut('fast', function(){
$('.new-com-bt').fadeIn('fast');
});
});
// on post comment click
$('.bt-add-com').click(function(){
var theCom = $('.the-new-com');
var theName = $('#name-com');
var theMail = $('#mail-com');
if( !theCom.val()){
alert('You need to write a comment!');
}else{
$.ajax({
type: "POST",
url: "ajax/add-comment.php",
data: 'act=add-com&id_post='+<?php echo $id_post; ?>+'&name='+theName.val()+'&email='+theMail.val()+'&comment='+theCom.val(),
success: function(html){
theCom.val('');
theMail.val('');
theName.val('');
$('.new-com-cnt').hide('fast', function(){
$('.new-com-bt').show('fast');
$('.new-com-bt').before(html);
})
}
});
}
});
});
</script>
And the Ajax Script :
<?php
extract($_POST);
if($_POST['act'] == 'add-com'):
$name = htmlentities($name);
$email = htmlentities($email);
$comment = htmlentities($comment);
// Connect to the database
include('../config.php');
// Get gravatar Image
// https://fr.gravatar.com/site/implement/images/php/
$default = "mm";
$size = 35;
$grav_url = "http://www.gravatar.com/avatar/" . md5( strtolower( trim( $email ) ) ) . "?d=" . $default . "&s=" . $size;
if(strlen($name) <= '1'){ $name = 'Guest';}
//insert the comment in the database
mysql_query("INSERT INTO comments (name, email, comment, id_post)VALUES( '$name', '$email', '$comment', '$id_post')");
if(!mysql_errno()){
?>
<div class="cmt-cnt">
<img src="<?php echo $grav_url; ?>" alt="" />
<div class="thecom">
<h5><?php echo $name; ?></h5><span class="com-dt"><?php echo date('d-m-Y H:i'); ?></span>
<br/>
<p><?php echo $comment; ?></p>
</div>
</div><!-- end "cmt-cnt" -->
<?php } ?>
<?php endif; ?>