I'm developing a mobile site with endless scrolling to display its content. The endless scrolling is achieved with this script (my implementation of it is below). The script works as it's supposed to.
But some of the content are categorized into different types. On the desktop version without endless scrolling, the types are filtered using the GET method. However, since the actual php for connecting to the database is stored on a separate "ajax.php", the filter parameters contained in GET is not being passed to it, resulting in the ajax.php returning nothing. Is there are way to fix this? Thanks in advance
Page for displaying every:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="javascript.js"></script>
<script>
$(document).ready(function() {
$('#content').scrollPagination({
nop : 5, // The number of posts per scroll to be loaded
offset : 0, // Initial offset, begins at 0 in this case
error : ' ', // When the user reaches the end this is the message that is
// displayed. You can change this if you want.
delay : 500, // When you scroll down the posts will load after a delayed amount of time.
// This is mainly for usability concerns. You can alter this as you see fit
scroll : true // The main bit, if set to false posts will not load as the user scrolls.
// but will still load if the user clicks.
});
});
</script>
</head>
<body>
<div id="content">
<!-- infinite scroll content here -->
</div>
</body>
</html>
javascript.js:
(function($) {
$.fn.scrollPagination = function(options) {
var settings = {
nop : 10, // The number of posts per scroll to be loaded
offset : 0, // Initial offset, begins at 0 in this case
error : ' ', // When the user reaches the end this is the message that is
// displayed. You can change this if you want.
delay : 500, // When you scroll down the posts will load after a delayed amount of time.
// This is mainly for usability concerns. You can alter this as you see fit
scroll : true // The main bit, if set to false posts will not load as the user scrolls.
// but will still load if the user clicks.
}
// Extend the options so they work with the plugin
if(options) {
$.extend(settings, options);
}
// For each so that we keep chainability.
return this.each(function() {
// Some variables
$this = $(this);
$settings = settings;
var offset = $settings.offset;
var busy = false; // Checks if the scroll action is happening
// so we don't run it multiple times
// Custom messages based on settings
if($settings.scroll == true) $initmessage = '顯示更多';
else $initmessage = '顯示更多';
// Append custom messages and extra UI
$this.append('<div class="content"></div><div class="loading-bar">'+$initmessage+'</div>');
function getData() {
// Post data to ajax.php
$.post('ajax.php', {
action : 'scrollpagination',
number : $settings.nop,
offset : offset,
}, function(data) {
// Change loading bar content (it may have been altered)
$this.find('.loading-bar').html($initmessage);
// If there is no data returned, there are no more posts to be shown. Show error
if(data == "") {
$this.find('.loading-bar').html($settings.error);
}
else {
// Offset increases
offset = offset+$settings.nop;
// Append the data to the content div
$this.find('.content').append(data);
// No longer busy!
busy = false;
}
});
}
getData(); // Run function initially
// If scrolling is enabled
if($settings.scroll == true) {
// .. and the user is scrolling
$(window).scroll(function() {
// Check the user is at the bottom of the element
if($(window).scrollTop() + $(window).height() > $this.height() && !busy) {
// Now we are working, so busy is true
busy = true;
// Tell the user we're loading posts
$this.find('.loading-bar').html('載入中...');
// Run the function to fetch the data inside a delay
// This is useful if you have content in a footer you
// want the user to see.
setTimeout(function() {
getData();
}, $settings.delay);
}
});
}
// Also content can be loaded by clicking the loading bar/
$this.find('.loading-bar').click(function() {
if(busy == false) {
busy = true;
getData();
}
});
});
}
})(jQuery);
ajax.php:
<?php
mysql_connect('host', 'username', 'password') or die();
mysql_select_db('database');
#START enable chinese encoding
mysql_query("SET character_set_results=utf8");
#END enable chinese encoding
$offset = is_numeric($_POST['offset']) ? $_POST['offset'] : die();
$postnumbers = is_numeric($_POST['number']) ? $_POST['number'] : die();
$category = mysql_real_escape_string($_GET['category']);
$run = mysql_query("SELECT * FROM table WHERE category='$category' ORDER BY date DESC LIMIT ".$postnumbers." OFFSET ".$offset);
while($row = mysql_fetch_array($run)) {
echo '
<a href="/video/video.php?id=' . $row['id'] . '&relatedgroup=' . $row['relatedgroup'] . '">
<div id="contentitemwrap">
<div id="videostripe"> </div>
<div id="contentitemtitle">
<h2>' . $row['name'] . ' <span class="relatedtype">(' . $row['relatedtype'] . ')</span></h2>
於' . $row['date'] . '發表
<p class="contenttext">' . $row['fbdescription'] . '</p>
</div>
<div id="widescreenimagewrap">
<div id="widescreenimageratio">
</div>
<div id="widescreenimage">
<img id="img100" src="' . $row['thumbnail'] . '" />
</div>
</div>
</div>
</a>
';
}
?>