i am trying to code endless pagination and having a trouble
$(document).ready(function(){
function lastPostFunc()
{
$('div#lastPostsLoader').html('<div class="load"><div class="label"><font color="black"><b>Loading more...</b></font></div></div>');
$.post("cr/sc/scr.php?lastID="+$(".comment:last").attr("id"),
function(data){
if (data != "") {
$(".comment:last").after(data);
}
$('div#lastPostsLoader').empty();
});
};
$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
lastPostFunc();
}
});
});
here goes my php
$result = mysql_query('SELECT * FROM xyz ORDER BY sy DESC LIMIT 15');
while($row = mysql_fetch_object($result)) {
$i++;
echo "<div class='comment' id='" . $i. "'>";
}
and other page to grab data
$pg = $_GET['lastID'];
$i=$pg;
$result = mysql_query('SELECT * FROM xyz ORDER BY sy DESC LIMIT '.$pg.',15');
while($row = mysql_fetch_object($result)) {
$i++;
echo "<div class='comment' id='" . $i . "'>";
}
Im getting a problem in getting value of comment:last
i get 15 value of comment:last after 1st time event loads
i get 15 value of comment:last after 2nd time event loads
which is problem im expecting 30
and on 3rd time event occures it gives 30
and same proccess again 30,30,40,40,50,50
instead of 30,40,50,60,70,80
i tried jquery live(), and i used $_GET cause im fetching from URL
Check to see if you are loading the function somewhere else, because the function loads and stops on mine, and the only way I can get it to mimic what you say is if I load the function again on page load, which will create two calls at the same time. Causing 1-15 and 1-15 and the last number off the page. Then on scroll it loads the function as it's supposed to and keeps on loading, just as you tell it too.
Plus, make sure you are checking that get (or even if you use a post) that goes directly into your database. That is asking for an injection.
EDIT: You should probably load full page (and past) first if you have the data. Then load the scroll function, which won't load if the page isn't full. Which is why it stopped for me.
EDIT2: This is the code I was using in case you want to see. I made a mock database, so I didn't have to match a db to test.
<?php
$scroller = 30;
if ( isset($_GET['hold']) && $_GET['hold'] == '1' ) {
$i = isset($_GET['lastID'])?(int)$_GET['lastID']:0;
$j = $i + $scroller;
//sleep(10);
while( $i < $j ) { // mimic a mysql call and spit it out.
++$i;
echo "<div class='comment' id='${i}'>${i}</div>";
}
exit;
}
?>
<html>
<head>
<script src="jquery-1.7.min.js" type="text/javascript"></script>
<script type="text/javascript">
// I was doing something else with this, but stripped out the code
var scroller = <?php echo $scroller;?>;
$(document).ready(function(){
function lastPostFunc()
{
// this assumes there are already comments on the page, so put a dummy comment
var last = $(".comment:last").attr("id");
$('div#lastPostsLoader').html('<div class="load"><div class="label"><font color="black"><b>Loading more...</b></font></div></div>');
$.post("<?php echo $_SERVER['PHP_SELF']; ?>?hold=1&lastID="+last,
function(data){
if ( data != "" ) {
$(".comment:last").after(data);
}
$('div#lastPostsLoader').empty();
});
};
$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
lastPostFunc();
}
});
lastPostFunc();
});
</script>
</head>
<body>
<div class="comment_container">
<div class="comment" id="0"></div>
<div id="lastPostsLoader"></div>
</div>
</body>
</html>
Related
In this code I am getting posts from database in table, table displays posts in three columns, now I want to add some jQuery to limit the number of rows and add a button which on clicking appends few rows to table I am not a professional programmer may be something like slice should be used to limit number of rows.
$sql = "SELECT * FROM posts";
$query = $db->prepare($sql);
$query->execute();
<table>
<tr>
<?php do { //horizontal looper?>
<td>
<div>id</div>
<div>title</div>
<div>body</div>
<div>date</div>
</td>
<?php
$row = $query->fetch(PDO::FETCH_ASSOC);
if (!isset($nested_List)) {
$nested_List= 1;
}
if (isset($row) && is_array($row) && $nested_List++%3==0) {
echo "</tr><tr>";
}
} while ($row); //end horizontal looper
?>
</table>
HTML
Create your table (You can also create dynamically)
<table id='posts'>
<tbody></tbody>
</table>
<button id='load-more-entries'>Load</button>
JavaScript
Create a variable for keeping track of what result you are on. What the index of the last result you grabbed.
Grab the elements by id. attach listener to button so when you click you load more results. Take a look at AJAX documentation. It is very simple and short.
var index = 0;
var load, table;
load = document.getElementById('load_more_entries'),
table = document.getElementById('posts');
load.addEventListener('click', function(e){
processAjaxRequest({
type: 'get',
url: "posts.php?index="+index,
success: function(xmlhttp){
var results = JSON.parse(xmlhttp.response);
for(var i = 0; i < results.length; ++i){
var row = table.insertRow();
var cell = row.insertCell(cell_index);
//increment index according to how many results you
grab so next time you grab the next results
index++;
}
},
error: function(xmlhttp){
//Handle error
}
});
});
/*
this function here it is a a wrapped AJAX
it will call php file below and run it. It will fetch the results
form database and return them to you in form of a string. You need
to parse it JSON.parse() to turn it into an array
*/
function processAjaxRequest(object){
var xmlhttp = new XMLHttpRequest() ||
new ActiveXObject('Microsoft.XMLHTTP');
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4){
if(xmlhttp.status === 200){
object.success(xmlhttp);
}else{
object.error(xmlhttp);
}
}
}
xmlhttp.open(object.type, object.url, true);
xmlhttp.setRequestHeader('Content-type',
'application/x-www-form-urlencoded');
xmlhttp.send(object.args);
};
PHP
This file is called by processAjaxResquest
$posts = array();
while($post = mysqli_fetch_assoc($sql)){
$posts[] = $post;
}
echo json_encode($posts);
?>
*NOTE I have not tested the code there maybe a couple of thing I may have left of. However, this should be enough to get you started. I got the same kind of answer when I had this question. Also, note that there is also more things you need to be aware of; like checking the variables inside PHP file are set before you do anything.
This is my current plan:
Clicking on a row selects or gets the id of the row, then this id is passed to a delete script most likely via AJAX or an HTTP request. The problem I have is how to identify the row from the click using "this" this as in show below:
$( this ) {
// get id and send to delete script
}
I have echoed out the rows so that I have the id row
<?php
require_once(dirname(__FILE__) . DIRECTORY_SEPARATOR.'dbconnect.php');
$link = new mysqli("$servername", "$username", "$password", "$dbname");
$query = "SELECT COUNT(*) FROM entries";
if ($result = $link->query($query)) {
/* fetch object array */
while ($row = $result->fetch_row()) {
if($row[0]==0){
echo "There are no entries.";
}else {
$query2 = "SELECT id,saying,date,thumbs_up,comments FROM entries ORDER by ID ASC ";
if (($result = $link->query($query2))) {
/* fetch object array */
while ($row = $result->fetch_row()) {
echo
'<div class="container" align="center"">'.
'<div class="entry-container" align="left">'.
$row[1]." ".
'</div>'.
'<div class="x" align="center">'.
'<button class="red" name="remove" onclick="remove_entry();">remove entry'.
' '.
$row[0].
'</button>'.
'</div>'.
'</div>'.
'<br>'
;
}
}
}
}
/* free result set */
$result->close();
}
?>
remove_entry(); doesn't do anything yet, presumably it will send the id to the delete script which then removes the row using the DELETE command
<script type="text/javascript">
function remove_entry() {
var answer = confirm("Delete this entry?")
if (answer){
//some code
}
else{
//some code
}
}
</script>
What is the most direct and effective / efficient way to do this?
I would even prefer not to show id, just use a simple x for the delete button, I echoed the id so that I had it to use to identify the row to be deleted.
Using jQuery can do :
HTML
<div class="entry-container" align="left" id="'.$row[0].'">
JS
$(function(){
$('button.red').click(function(){
var $row = $(this).closest('.entry-container'),
rowId = $row.attr('id');
$.post('/path/to/server', {id: rowId}, function(resp){
if(resp =='ok'){
$row.slideUp(function(){ $row.remove() });
}
});
});
});
Then remove your inline onclick
In PHP receive the id with $_POST['id'] and validate it before passing to db query
For starters, don't use 2 SQL queries. Just do the one you use to get data and, if it has no rows, give a different output.
Use semantic markup like so:
'<button type="button" class="remover" id="entry-' . $row[0] . '">remove this entry</button>'
Then in your jQuery, use something like this:
$(function() {
$('.entries').on('click', '.remover', function() {
var eId = this.id.replace(/^\D+/, '');//since IDs should not start with a number
$.post(
'/your/delete/endpoint/',
{
id: eId
},
function(data) {
if (data.ok) {//sending JSON responses are easier to debug and you can add to them later without breaking things
//remove row
}
else {
//display error message
}
}
);
});
});
The second parameter to on() makes it a delegated event, which means you can add new items to an existing set, with the same remover markup, and the new remove buttons will also work.
I'm using jquery ,ajax and php to implementing infinite scrolling
the image from database
and the code just works one time when i reach the end of a page and show me the message "No More Content" when there is actually content in the database
here is my cod
index.php
<html >
<?php include($_SERVER["DOCUMENT_ROOT"].'/db.php');
$query = "SELECT * FROM photo ORDER by PhotoNo DESC limit 12";
$result = mysql_query($query) or die('Query failed: ' . mysql_error());
$actual_row_count =mysql_num_rows($result);
?>
<head>
<title>Infinite Scroll</title>
<script src="jquery-1.7.2.js" type="text/javascript"></script>
<script type="text/javascript">
var page = 1;
$(window).scroll(function () {
$('#more').hide();
$('#no-more').hide();
if($(window).scrollTop() + $(window).height() > $(document).height() - 200) {
$('#more').css("top","400");
$('#more').show();
}
if($(window).scrollTop() + $(window).height() == $(document).height()) {
$('#more').hide();
$('#no-more').hide();
page++;
var data = {
page_num: page
};
var actual_count = "<?php echo $actual_row_count; ?>";
if((page-1)* 12 > actual_count){
$('#no-more').css("top","400");
$('#no-more').show();
}else{
$.ajax({
type: "POST",
url: "data.php",
data:data,
success: function(res) {
$("#result").append(res);
console.log(res);
}
});
}
}
});
</script>
</head>
<body>
<div id='more' >Loading More Content</div>
<div id='no-more' >No More Content</div>
<div id='result'>
<?php
while ($row = mysql_fetch_array($result)) {
$rest_logo=$row['PhotoName'];
$image="../images/rest/".$rest_logo;
echo '<div><img src='.$image.' /></div>';
}
?>
</div>
</body>
</html>
data.php
<?php
$requested_page = $_POST['page_num'];
$set_limit = (($requested_page - 1) * 12) . ",12";
include($_SERVER["DOCUMENT_ROOT"].'/db.php');
$result = mysql_query("SELECT * FROM photo ORDER by PhotoNo DESC limit $set_limit");
$html = '';
while ($row = mysql_fetch_array($result)) {
$rest_logo=$row['PhotoName'];
$image="../images/rest/".$rest_logo;
$html .= '<div><img src='.$image.' /></div>';
}
echo $html;
exit;
?>
I really nead a help
You see to be setting the variables wrong from a quick look:
var actual_count = "<?php echo $actual_row_count; ?>";
You're using mysql_num_rows() to count the return on your first set of results. But that is limited to 12.
You need to do a second mysql query to get all the images without limi, then count them to get the total number of images in the database.
In index.php your query is only returning 12 rows meaning that $actual_row_count is only ever going to be 12. Instead I would set $actual_row_count to the result of the query "SELECT count
(*) FROM photo".
My personal preference for these sort of things is to return a JSON response which only contains the n responses that are loading and have a template html stored in javascript. The way you've written it will return all the photo's on the last query instead of the last 12 that you want.
So i'm working on a javascript/php chatbox. Everything works except for it updating the contents of my div (this works once, but after that it doesn't keep updating it when a new message has been put into the database). Here is my code:
Javascript part:
<script language=javascript type='text/javascript'>
setInterval(function () {
var arrayOfObjects = <?print_r(getChatArray());?>;
var chat = "";
for (var i = 0; i < arrayOfObjects.length; i++) {
var object = arrayOfObjects[i];
chat += "["+object.date+"]"+object.op+": " + object.msg + "</br>";
}
$('#chat').html(chat);
}, 10);
</script>
Php part:
<?php
function getChatArray() {
$result = mysql_query("SELECT * FROM shouts ORDER BY id DESC");
$to_encode = array();
$count = mysql_num_rows($result);
$size = 0;
if($count > 0) {
while($row = mysql_fetch_assoc($result)) {
$to_encode[$size]['id'] = $row['id'];
$to_encode[$size]['msg'] = $row['msg'];
$to_encode[$size]['op'] = $row['op'];
$to_encode[$size]['date'] = $row['date'];
$size += 1;
}
} else {
return "None";
}
return json_encode($to_encode);
}
?>
Any ideas as to why it isn't continually updating it?
Thanks.
Because every 10 milliseconds your JS is parsing the original chat room contents, you're not fetching any new contents. You'll need to implement an ajax call, and I'd highly recommend changing that setInterval to a recursive setTimeout with a more realistic delay of say 500ms so you don't kill the client.
Instead of this:
setInterval(function() {
var arrayOfObjects = <?print_r(getChatArray());?>;
...
You would use something like this:
(function updateChat(){
var arrayOfObjects,
chat,
max,
_object,
i = 0;
$.ajax({
url : '/getChatArray.php', // php echoes the json
success: function(arrayOfObjects){
for (max = arrayOfObjects.length; i < max; i++) {
_object = arrayOfObjects[i];
chat += "["+_object.date+"]"+_object.op+": " + _object.msg + "</br>";
}
$('#chat').html(chat);
setTimeout(updateChat, 500);
}
});
}());
Obviously you would populate that ajax handler to your needs, add some more params like dataType, etc, and some error handling.
Your database contents will only be output to the page on initial navigation to it.
This code:
var arrayOfObjects = <?print_r(getChatArray());?>;
Will only output the contents of getChatArray()'s return when PHP renders the page. So the script can only see one state of that functions return at the time of rendering.
You need to use AJAX to retrieve the content from your database asynchronously.
I suggest you:
Create a PHP script which outputs your data in JSON format
Use jQuery, specifically the getJSON function to retrieve that script's output
Do what you want to do with that data.
jQuery:
$(document).ready(function(){
$(".reload").click(function() {
$("div#update").fadeOut("fast")
.load("home.php div#update").fadeIn("fast")
});
});
PHP:
function statusUpdate() {
$service_query = mysql_query("SELECT * FROM service ORDER BY status");
$service_num = mysql_num_rows($service_query);
for ($x=1;$x<=$service_num;$x++) {
$service_row = mysql_fetch_row($service_query);
$second_query = mysql_query("SELECT * FROM service WHERE sid='$service_row[0]'");
$row = mysql_fetch_row($second_query);
$socket = #fsockopen($row[3], $row[4], $errnum, $errstr, 0.01);
if ($errnum >= 1) { $status = 'offline'; } else { $status = 'online'; }
mysql_query("UPDATE service SET status='$status' WHERE sid='$row[0]'")
or die(mysql_error());
?>
<ul><li style="min-width:190px;"><?php echo $row[1]; ?></li>
<li style="min-width: 190px;" title="DNS: <?php echo $row[2]; ?>">
<?php echo $row[3] . ':' . $row[4]; ?></li>
<li class="<?php echo $status; ?>" style="min-width:80px;"><div id="update">
<?php echo $status; ?></div></li></ul>
<?php
}
}
?>
<?php statusUpdate(); ?>
I have a button which I press (refresh) and that will then refresh the #update id to hopefully fadeOut all the results, and then fade in the new results... issue is it fades them out okay, but when it brings them back, it's just div on div and div and looks really messy - does not do what it's meant to do (would have to upload a picture to give further information).
In the short, what I want to happen is when you hit the update, they will all fade and then fade in with updated values from the php... I made the php/mysql into a function so then I could call it when i hit that refresh button, thinking that would work, but I don't know how to do that...
Thank-you in advance,
Phillip.
Javascript
$(document).ready(function(){
$(".reload").click(function() {
$("div#update").fadeOut("fast");
$.ajax({
url:'home.php',
data:{type:'getStatus'},
type;'post',
success:function(data){
$('div#update').html(data).fadeIn('fast');
}
});
});
});
php page format
<?php
$type= $_POST['type'];
if($type=="getStatus")
{
//get statuses from data base and return only formatted statuses in html
}
else
{
//your page codes here
//like tags <html>,<body> etc, all regular tags
//<script> tags etc
}
?>
.load("home.php div#update").fadeIn("fast")
That's wrong. You need to use,
$('div#update').load('home.php', function(data) {
$('div#update').html(data).fadeIn("fast");
});
Make sure your PHP file works properly by calling it directly and confirming that it returns the results properly.
Reference : http://api.jquery.com/load
Try this
var $data = $('div#update');
$data.fadeOut('slow', function() {
$data.load('home.php div#update', function() {
$data.fadeIn('slow');
});
});
Just for the reference, it will be better to add an additional page in the same directory (eg: phpcode.php) and then put your php code also in there! then try this:
var $data = $('div#update');
$data.fadeOut('slow', function() {
$data.load('phpcode.php div#update', function() {
$data.fadeIn('slow');
});
});