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
}
}
?>

load more with ajax php

hello here i have a problem with load more ajax all is okey but when there is no
data to show from database show me this error: http://i.stack.imgur.com/6158Y.png
index.php
<div id="show_here">
<div id="hide_here" onclick="show_more_posts(<?php echo $post['id']; ?>);">Show More Posts</div>
</div>
main.js
// Load more post
function show_more_posts(post_id)
{
var ID = post_id;
$.ajax({
type: "POST",
url: "ajax/ajax_more.php",
data: "lastmsg="+ ID,
cache: false,
success: function(html){
$("#show_here").append(html);
$("#hide_here").remove();
}
});
return false;
}
ajax_more.php
<?php
include("../config.php");
$lastmsg = $_POST['lastmsg'];
$result = mysqli_query($Connection, "select * from posts where id<'$lastmsg' order by id desc limit 10");
while($row = mysqli_fetch_array($result))
{
$msg_id=$row['id'];
$message=$row['text']; ?>
<li> <?php echo $message; ?> </li> <?php
}
?>
<div id="show_here">
<div id="hide_here" onclick="show_more_posts(<?php echo $msg_id; ?>);">Show More Posts</div>
</div>

You can use like this. then you will not get error.
<?php
if(isset($msg_id)) {
?>
<div id="show_here">
<div id="hide_here" onclick="show_more_posts(<?php echo $msg_id; ?>);">Show More Posts</div>
</div>
<?php
}
?>

In your ajax_more.php file you have to set $msg_id to $lastmsg before the while:
<?php
include("../config.php");
$lastmsg = $_POST['lastmsg'];
$result = mysqli_query($Connection, "select * from posts where id<'$lastmsg' order by id desc limit 10");
$msg_id = $lastmsg;
while($row = mysqli_fetch_array($result))
{
$msg_id=$row['id'];
$message=$row['text']; ?>
<li> <?php echo $message; ?> </li> <?php
}
?>
<div id="hide_here" onclick="show_more_posts(<?php echo $msg_id; ?>);">Show More Posts</div>
so, even if your query doesn't return data (no new messages), the variable have the correct value.
If, instead, you expect that at some point, there aren't more posts to load, you have to use the solution provided also from Kaja Mydeen:
<?php
include("../config.php");
$lastmsg = $_POST['lastmsg'];
$result = mysqli_query($Connection, "select * from posts where id<'$lastmsg' order by id desc limit 10");
while($row = mysqli_fetch_array($result))
{
$msg_id=$row['id'];
$message=$row['text']; ?>
<li> <?php echo $message; ?> </li> <?php
}
?>
<?php if(isset($msg_id)) { ?>
<div id="hide_here" onclick="show_more_posts(<?php echo $msg_id; ?>);">Show More Posts</div>
<?php } ?>
Also, your code have somethin strange: you continue to add a div with and id="show_here".

I think before fetch data through while loop you should have check for total affected rows like this
$totrows = mysql_num_rows($result);
if($totrows > 0){
//your while loop for fetch data
}else{
//return something else
}

you just need to do like this
<div id="show_here">
<?php
if(isset($post['id'])) {
?>
<div id="hide_here" onclick="show_more_posts(<?php echo $post['id']; ?>);">Show More Posts</div>
<?php
}else{
?>
<div id="hide_here">No More Posts to show !!!!</div>
<?php
}
?>
</div>
Try this, it may help you

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>

How to auto refresh div contents contain php variables?

I created a page named queries.php
<?php
require("connection.inc.php");
$query = "SELECT SUM(john), SUM(robert), COUNT(school) FROM election";
$result = mysql_db_query($db, $query, $connection) or
die("query error!");
$data = mysql_fetch_array($result);
$john = number_format($data[0], 0,',','.');
$robert = number_format($data[1], 0,',','.');
$school = $data[2];
$total = $john + $robert;
$remaining_school = 524 - $school;
$percentage_john = round(($john*100/$total),2);
$percentage_robert = round(($robert*100/$total),2);
?>
Then I display the data in display.php
The data displayed well and nothing error, I tried a couple of tricks to auto refresh the container using jquery but failed.
Here is my display.php page:
<?php
include("queries.php");
?>
<div id="totaljohn"> // <--- the div id taken from css layout
<h9>John: <?php echo $john; ?> <br> (<?php echo $percentage_john; ?> %)</h9>
</div>
<div id="totalrobert">
<h9>Robert: <?php echo $robert; ?><br> (<?php echo $percentage_robert; ?> %)</h9>
</div>
<div id="totalboth">
<h4>Total : <?php echo $total; ?> Suara</h4>
</div>
<div id="totalschool">
<h4>Total School attending : <?php echo $school; ?> Schools</h4>
</div>
<div id="remaining_schools">
<h4>Remaining Schools: <?php echo $remaining_school; ?> of 524 schools</h4>
</div>

Everything looks good. Is your database connected? Is your SQL correct? Are there records in the database returned for your query?

Dynamically values parse to Popup Model Box from PHP Page

I was trying to parse the php data values which inside the while loop to the popup model .
Sample Code
<?php
include("connect.php");
$sql = 'SELECT id FROM products WHERE tag="mixed" ORDER BY id DESC LIMIT 5';
mysql_select_db('levels');
$retval = mysql_query( $sql, $db_server );
if(! $retval )
{
die('Could not get data: ' . mysql_error());
}
while($row = mysql_fetch_array($retval, MYSQL_ASSOC))
{
$id = $row['id'];
?>
<div onclick="showDialog('#dialog6');show_data();">
<div id="getid">
<?php echo $id; ?>
</div>
</div>
<?php
}
mysql_close($db_server);
?>
<script>
function showDialog(id){
var dialog = $(id).data('dialog');
dialog.open();
}
function show_data(){
var x = document.getElementById("getid").innerHTML;
document.getElementById("demo").innerHTML = x;
}
</script>
<!-- Popup Model -->
<div data-role="dialog" id="dialog6" >
<div id="demo"> </div>
</div>
Let's say if i have id => 1 to 10 , above code writing last 5 items from the table. which are 6 7 8 9 10 . ( it's working perfectly ) .
my requirement is to when i click the 7 it should parse 7 to the popup model. ( or let's say to the innerHTML of ).
it only parsing the first value ( 5 ) . to all onclick events when i click the each number.
PS : this is test using mysql not mysqli or pdo :) .
Thanks in Advance !

Try this. Hope it helps.
$sql = 'SELECT id FROM products WHERE tag="mixed" ORDER BY id DESC LIMIT 5';
mysql_select_db('levels');
$retval = mysql_query( $sql, $db_server );
if(! $retval )
{
die('Could not get data: ' . mysql_error());
}
while($row = mysql_fetch_array($retval, MYSQL_ASSOC))
{
$id = $row['id'];
?>
<div onclick="showDialog('#dialog6');show_data(<?php echo $id; ?>);"> <!-- Changed -->
<div id="getid<?php echo $id; ?>"> <!-- Changed -->
<?php echo $id; ?>
</div>
</div>
<?php
}
mysql_close($db_server);
?>
<script>
function showDialog(id){
var dialog = $(id).data('dialog');
dialog.open();
}
function show_data(y){ // Changed
var x = document.getElementById("getid"+y).innerHTML; // Changed
document.getElementById("demo").innerHTML = x;
}
</script>
<!-- Popup Model -->
<div data-role="dialog" id="dialog6" >
<div id="demo"> </div>
</div>

Try This One.
<?php
include("connect.php");
$sql = 'SELECT id FROM products WHERE tag="mixed" ORDER BY id DESC LIMIT 5';
mysql_select_db('levels');
$retval = mysql_query( $sql, $db_server );
if(! $retval )
{
die('Could not get data: ' . mysql_error());
}
while($row = mysql_fetch_array($retval, MYSQL_ASSOC))
{
$id = $row['id'];
?>
<div onclick="showDialog('#dialog6');show_data(<?php echo $id; ?>,'<?php echo $name; ?>','<?php echo $imgUrl; ?>');"> <!-- Changed -->
<div id="id<?php echo $id; ?>"> <!-- Changed -->
<?php echo $id; ?>
</div>
<div id="name<?php echo $name; ?>"> <!-- Changed -->
<?php echo $id; ?>
</div>
<div id="image<?php echo $id; ?>"> <!-- Changed -->
<img src="<?php echo $imgUrl; ?>" />
</div>
</div>
<?php
}
mysql_close($db_server);
?>
<script>
function showDialog(id){
var dialog = $(id).data('dialog');
dialog.open();
}
function show_data(id, name, imgUrl){ // Changed
document.getElementById("dispID").innerHTML = id;
document.getElementById("dispName").innerHTML = name;
document.getElementById("ImgDisplay").src = imgUrl;
}
</script>
<!-- Popup Model -->
<div data-role="dialog" id="dialog6" >
<div id="demo"> <!-- Changed -->
<div id="dispID"></div>
<div id="dispName"></div>
<div id="dispImg"><img id="ImgDisplay" src="" /></div>
</div>
</div>