Databases
StackOverflow2013
Postsdbo
POProblem with jQuery: Infinite scrolling not functioning properly
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POProblem with jQuery: Infinite scrolling not functioning properly
    primarykey
    data
    text
    <p>Hey I tried to implant this jQuery plugin in my website: <a href="http://www.jarlef.com/post/2010/05/25/Infinite-scrolling-with-jQuery.aspx" rel="nofollow">http://www.jarlef.com/post/2010/05/25/Infinite-scrolling-with-jQuery.aspx</a></p> <p>The problem is the page keeps on loading more and more content without the user having to scroll down which kinda causes the load slowly.</p> <p>The jquery code im using:</p> <pre><code>(function ($) { $.fn.infinentScroll = function (settings) { // variables var isLoading = true; // setup default config var config = { 'url': 'gallery.php?page={page}', 'modifier': '{page}', 'initialUpdate': 'true', 'currentPage': '1', 'setupLoadingPanel': true, 'loadingPanelID': 'loadingPanel', 'loadingImage': '', 'loadingImageAlt': 'Loading more...', 'loadingMessage': '&lt;b&gt;Loading more...&lt;/b&gt;', 'completeMessage': '&lt;b&gt;No more to show...&lt;/b&gt;' }; // merge user provided settings into config object if (settings) $.extend(config, settings); // check if an update is needed var isTimeToUpdate = function () { var container = $(element).offset().top + $(element).height() - $(document).height(); var scroll = $(document).scrollTop(); return scroll &gt; container; }; // listen to scroll event var scrollHandler = function (event) { if (!isTimeToUpdate() || isLoading) { return; } config.currentPage++; fetchContent(); }; var showLoading = function () { if (config.loadingPanelID != null) { $("#" + config.loadingPanelID).fadeIn(); } } var showComplete = function () { if (config.loadingPanelID != null &amp;&amp; config.completeMessage != null &amp;&amp; config.completeMessage.length &gt; 0) { $("#" + config.loadingPanelID).hide().empty().append(config.completeMessage).fadeIn().delay(2000).fadeOut(); } } var hideLoading = function () { if (config.loadingPanelID != null) { $("#" + config.loadingPanelID).fadeOut(); } } // update content var fetchContent = function () { isLoading = true; // unbind scroll event unregisterScrollEvent(); // show loading message showLoading() // format url var url = config.url.replace(config.modifier, config.currentPage); // do request $.ajax({ url: url, async: true, cache: false, success: function (data) { receiveContent(data); } }); }; // add content to element var receiveContent = function (data) { hideLoading(); // if no content is received -&gt; stop listing to the scroll event data = jQuery.trim(data); if (data.length == 0) { showComplete(); return; } $(element).append(data); isLoading = false; // rebind scroll event again registerScrollEvent(); // call more to fill the page if (isTimeToUpdate()) { config.currentPage++; fetchContent(); } }; var registerScrollEvent = function () { $(window).bind("scroll", scrollHandler); }; var unregisterScrollEvent = function () { $(window).unbind("scroll", scrollHandler); }; var setupLoadingPanel = function () { if (config.loadingPanelID == null) { return; } $(element).after('&lt;div id="' + config.loadingPanelID + '"&gt;&lt;/div&gt;'); $("#" + config.loadingPanelID).hide().empty().css('text-align', 'center'); if (config.loadingImage != null &amp;&amp; config.loadingImage.length &gt; 0) { var image = new Image(); image.src = config.loadingImage; $("#" + config.loadingPanelID).append('&lt;img src="' + image.src + '" alt="' + config.loadingImageAlt + '" /&gt;&lt;br /&gt;'); } if (config.loadingMessage != null &amp;&amp; config.loadingMessage.length &gt; 0) { $("#" + config.loadingPanelID).append(config.loadingMessage); } }; // current limitiations -&gt; only allow 1 element if (this.length != 1) { alert("Only 1 element can be registed"); } var element = this[0]; if (config.setupLoadingPanel) { setupLoadingPanel(); } if (config.initialUpdate) { // perform an initial update fetchContent(); } else { // register scroll events registerScrollEvent(); } return this; }; })(jQuery); </code></pre> <p>My gallery.php:</p> <pre><code>&lt;?php include('config/db_con.php'); include('config/config.php'); mysql_connect("$host", "$username", "$password")or die("cannot connect"); mysql_select_db("$db_name")or die("cannot select DB"); $query = "SELECT COUNT(*) as num FROM `like`"; $limit = '15'; /* Setup vars for query. */ $targetpage = "gallery.php"; $page = $_GET['page']; if ($page &gt; 1) $start = 31 + ($limit * $page); //if no page var is given, set start to 0 /* Get data. */ $resultst = "SELECT * FROM `like` ORDER BY `count` DESC LIMIT $start,15"; $new = mysql_query($resultst) or die(mysql_error()); while($rows = mysql_fetch_array($new)) { $like_link1 = htmlspecialchars(html_entity_decode(strip_tags(stripslashes(str_replace('shit', 'sh*t', $rows['like']))))); $seo_title1 = $like_link1; $new_like_link = substr($seo_title1,0,500); $new_liketitle = preg_replace("/\n/"," ",$new_like_link); $new_status_like = str_replace('"', '', $new_liketitle); $new_status_like2 = str_replace('&amp;', 'and', $new_status_like); if($rows['imageurl'] == ''){ $img_url = 'https://lh3.googleusercontent.com/EU8kFP0MI-ceqGK_YX2E68wq1UdDO7FD26QR0_hwaIT8w4DSp2i5I4YKmi7zzXYKT9PX3flDYqQU6D2UkkdwBdc1VA=s512'; }else{ $img_url = $rows['imageurl']; } ?&gt; &lt;div class="like" style="padding: 10px 0;" onmouseover="this.className='likehover'" onmouseout="this.className='like'"&gt; &lt;div style="float:left;padding-left:5px;"&gt;&lt;/div&gt; &lt;div style="float:left;width:620px;"&gt; &lt;div style="margin:6px 10px 7px 10px;float:left;width:50px;height:50px;border:1px solid #ccc;"&gt;&lt;img src="&lt;? echo $img_url; ?&gt;" height="50" width="50" /&gt;&lt;/div&gt; &lt;p style="display:inline block;float:left;width:540px;height:auto;margin:0px;padding:0px;"&gt; &lt;a style="padding:8px 0 5px 0;" href="&lt;? echo $site;?&gt;&lt;? echo $rows['id']; ?&gt;/"&gt;&lt;? if(strlen($like_link1) &gt;= '500'){ echo $new_like_link.'...'; }else{ echo $like_link1;} ?&gt;&lt;/a&gt; &lt;span style="float:left;margin-top:8px;display:block;width:500px;"&gt; &lt;iframe src="http://www.facebook.com/plugins/like.php?href=&lt;? echo $site;?&gt;&lt;? echo $rows['id']; ?&gt;&amp;amp;send=false&amp;amp;layout=button_count&amp;amp;width=100&amp;amp;show_faces=false&amp;amp;action=like&amp;amp;colorscheme=light&amp;amp;font&amp;amp;height=21" scrolling="no" frameborder="0" style="float:left;border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"&gt;&lt;/iframe&gt; &lt;a href="http://twitter.com/share" class="twitter-share-button" data-url="&lt;?php echo $site;?&gt;&lt;? echo $rows['id']; ?&gt;" data-text="&lt;? echo $new_status_like2; ?&gt;" data-count="horizontal" data-via="iTweetSWAQ"&gt;Tweet&lt;/a&gt;&lt;script type="text/javascript" src="http://platform.twitter.com/widgets.js"&gt;&lt;/script&gt;&lt;iframe src="http://www.facebook.com/plugins/comments.php?href=&lt;?echo $site;?&gt;&lt;? echo $rows['id']; ?&gt;/&amp;permalink=1" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:130px; height:16px;" allowTransparency="true"&gt;&lt;/iframe&gt; &lt;/span&gt; &lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;?php } ?&gt; </code></pre> <p>I believe its a problem with the jquery code...<br> I've tried anything.. Any solutions?<br> My website - where the problem occurs: <a href="http://ilikeyoulike.net/" rel="nofollow">http://ilikeyoulike.net/</a></p> <p>Thank you so much ! (:</p> <p>EDIT: As requested here's my calling code:</p> <pre><code>&lt;div id="output"&gt;&lt;/div&gt; &lt;script type="text/javascript"&gt; &lt;!-- $(document).ready(new function () { $("#output").infinentScroll({ 'url': 'gallery.php?page={page}' }); }); //--&gt; &lt;/script&gt; </code></pre> <p>and a proper page structure can be found at ilikeyoulike.net/new-likes .</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USuser940838
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COshouldn't it be like `$(document).ready(function () {`
      singulars
      1. POProblem with jQuery: Infinite scrolling not functioning properly
      1. USRafay
    2. CODoesn't change a thing.
      singulars
      1. POProblem with jQuery: Infinite scrolling not functioning properly
      1. USuser940838
    3. COthere are javascript errors on your page
      singulars
      1. POProblem with jQuery: Infinite scrolling not functioning properly
      1. USRafay
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload