php - Endless scrolling and using the GET method to filter content -
i'm developing mobile site endless scrolling display content. endless scrolling achieved this script (my implementation of below). script works it's supposed to.
but of content categorized different types. on desktop version without endless scrolling, types filtered using method. however, since actual php connecting database stored on separate "ajax.php", filter parameters contained in not being passed it, resulting in ajax.php returning nothing. there way fix this? in advance
page 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, // number of posts per scroll loaded offset : 0, // initial offset, begins @ 0 in case error : ' ', // when user reaches end message // displayed. can change if want. delay : 500, // when scroll down posts load after delayed amount of time. // usability concerns. can alter see fit scroll : true // main bit, if set false posts not load user scrolls. // still load if 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, // number of posts per scroll loaded offset : 0, // initial offset, begins @ 0 in case error : ' ', // when user reaches end message // displayed. can change if want. delay : 500, // when scroll down posts load after delayed amount of time. // usability concerns. can alter see fit scroll : true // main bit, if set false posts not load user scrolls. // still load if user clicks. } // extend options work plugin if(options) { $.extend(settings, options); } // each keep chainability. return this.each(function() { // variables $this = $(this); $settings = settings; var offset = $settings.offset; var busy = false; // checks if scroll action happening // don't run multiple times // custom messages based on settings if($settings.scroll == true) $initmessage = '顯示更多'; else $initmessage = '顯示更多'; // append custom messages , ui $this.append('<div class="content"></div><div class="loading-bar">'+$initmessage+'</div>'); function getdata() { // post data 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 no data returned, there no more posts shown. show error if(data == "") { $this.find('.loading-bar').html($settings.error); } else { // offset increases offset = offset+$settings.nop; // append data content div $this.find('.content').append(data); // no longer busy! busy = false; } }); } getdata(); // run function // if scrolling enabled if($settings.scroll == true) { // .. , user scrolling $(window).scroll(function() { // check user @ bottom of element if($(window).scrolltop() + $(window).height() > $this.height() && !busy) { // working, busy true busy = true; // tell user we're loading posts $this.find('.loading-bar').html('載入中...'); // run function fetch data inside delay // useful if have content in footer // want user see. settimeout(function() { getdata(); }, $settings.delay); } }); } // content can loaded clicking 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 * table category='$category' order 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> '; } ?>
assuming getting parameters want passed hosting page via query string should able change $.post call in getdata to:
$.post('ajax.php'+window.location.search, { action : 'scrollpagination', number : $settings.nop, offset : offset, }, function(data) { ..... rest of code
Comments
Post a Comment