• 0 رای - 0 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
کنترل کردن infinite-scroll
#1
سلام.من یک infinite-scroll دانلود کردم که فقط یک فانکشن جی کوئری داره که در زیر می بینین.مشکل من اینجاست که میخوام هروقت مطالعه کننده به انتهای صفحه رسید صفحه بعدی لود بشه.اما الان تا غلطک موس رو میچرخونم همه صفحات یهویی لود میشه
کد پی‌اچ‌پی:
_debug false;

function 
dbg(msg) {
    if (
_debug)
        
console.log (msg);
}

$(
document).ready(function() {
    
doMouseWheel ;
    $(
"#postedComments").append"<p id='last'></p>" );
    
dbg("Document Ready");

    $(
window).scroll(function() {
        
dbg("Window Scroll Start");

        if (!
doMouseWheel)
            return;

        var 
distanceTop = $('#last').offset().top - $(window).height();
        if  ($(
window).scrollTop() > distanceTop) {
            
dbg("Window distanceTop to scrollTop Start");
            $(
'div#loadMoreComments').show();
            
doMouseWheel ;
            
            
dbg("Another window to the end !!!! "+$(".postedComment:last").attr('id'));
            $.
ajax({
                
dataType "html",
                
url"jquery-loadMoreComments.php?lastComment="+ $(".postedComment:last").attr('id'),
                
success: function(html) {
                    
doMouseWheel ;
                    if(
html){
                        $(
"#postedComments").append(html);
                        
dbg('Append html: ' + $(".postedComment:first").attr('id'));
                        
dbg('Append html: ' + $(".postedComment:last").attr('id'));

                        $(
"#last").remove();
                        $(
"#postedComments").append"<p id='last'></p>" );
                        $(
'div#loadMoreComments').fadeOut(50000);
                    } else {
                        
//Disable Ajax when result from PHP-script is empty (no more DB-results )
                        
$('div#loadMoreComments').replaceWith"<center><h1 style='color:red'>End of countries !!!!!!!</h1></center>" );
                        
doMouseWheel ;
                    }
                }
            });
        }
    });
}); 
اینم فایل html در index.php
کد پی‌اچ‌پی:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<
html>
    <
head>
<
title>Infinite Scrolling with Ajax PHP and JQuery</title>
<
meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<
meta name="description" content="Infinite Scrolling with Ajax PHP and JQuery" />
<
meta name="keywords" content="jquery, Ajax, PHP, Infinite scrolling"/>
<!--  
Infinite scrolling is based on the JQuery library and a custom jquery script , include these files --> 
<
script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<
script type="text/javascript" src="javascript/custom_jquery.js"></script>
<
link rel="stylesheet" type="text/css" media="screen" href="styles.css" />
    </
head>
    <
body>
        <
div id="content">
            <
class="head">Technology Science</p>
            <
h1>Welcome Scroll to the bottom of the page  </h1>
            <
class="subline">List of Countries with population </p>
            <
class="meta">by Tournas Dimitrios</p>
            <
div class="article">
<
div id="postedComments">

<!--  Include 
the following PHP include line to start the infinite scrolling functionality  -->
<?
php require_once 'jquery-masterLoader.php' ;  ?>
</div>
<div id="loadMoreComments" style="display:none;" > <center>test for hidden field</center></div>    
            </div>           
        </div>      
    </body>
</html> 
این فایل jquery-masterLoader.php
کد پی‌اچ‌پی:
<?php 
/**
 * Infinite scrolling
 * 
 * http://tournasdimitrios1.wordpress.com
 * 
 * @copyright Tournas Dimitrios 2012
 * 
 This program is free software: you can redistribute it and/or modify  it under the terms of the GNU General Public License as published by  the Free Software Foundation, either version 3 of the License, or  (at your option) any later version . This program is distributed in the hope that it will be useful ,  but WITHOUT ANY WARRANTY ; without even the implied warranty of  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the  GNU General Public License for more details . You should have received a copy of the GNU General Public License  along with this program .  If not , see <http://www.gnu.org/licenses/> .
 
 * @author Tournas Dimitrios <[email protected]>
 * @version 0.4
 * 
 */


error_reporting(0) ;
if(
$_GET['lastComment']){
set_exception_handler('exception_handler') ;
$config parse_ini_file("config/my.ini") ;
$db=new mysqli($config['dbLocation'] , $config['dbUser'] , $config['dbPassword'] , $config['dbName']);
if(
mysqli_connect_error()) {
 throw new 
Exception("<b>Could not connect to database</b>") ;
}
/*
This should never be used as your  code would be vulnerable to "SQL-Injection 
if (!$result = $db->query('SELECT * FROM world_country WHERE id >' .$_GET['lastComment'] .' ORDER BY id ASC LIMIT 0 , 30')) {
*/
$filtered filter_input(INPUT_GET"lastComment"FILTER_SANITIZE_URL);
if (!
$result $db->query('SELECT * FROM world_country WHERE id >' .$filtered .' ORDER BY id ASC LIMIT 0 , 30')) {
    throw new 
Exception("<b>خطا در ارسال پارامتر</b>") ;
}

while(
$data $result->fetch_object()) {
$id $data->id;
$name $data->Name ;
$continent $data->Continent;
$population $data->Population ;
echo 
"
<div class='postedComment col s12 m4' id=\"
$data->id \">
<div class='card'>
<div class='card-image waves-effect waves-block waves-light'>
<img src='assets/images/card-image2.jpg' alt=''>
<div class='chip m-t-sm deep-orange white-text font margin_left'>"
."$name</div>
<i class='material-icons dp48 follow'>grade</i>
<span class='font date'>دو روز پیش</span>
</div>
<div class='card-content reltur'>
<i class='material-icons left activator left-align'>more_vert</i><span class='card-title right-align font'>"
.$continent."</span>
<a class='grey lighten-2 btn-flat font cur_d'>"
."$population </a>
</div>
<div class='card-reveal'>
<span class='card-title right-align font'><i class='material-icons left'>close</i>موارد بیشتر</span>
<a class='btn-floating btn-small waves-effect waves-light orange' style='margin: 4px;'>
<i class='material-icons'>textsms</i>
</a>
<a class='btn-floating btn-small waves-effect waves-light red' style='margin: 4px;'>
<i class='material-icons'>report_problem</i>
</a>
<a class='btn-floating btn-small waves-effect waves-light blue' style='margin: 4px;'>
<i class='material-icons'>send</i>
</a>
<a class='btn-floating btn-small waves-effect waves-light green' style='margin: 4px;'>
<i class='material-icons'>my_location</i>
</a>
<br>
</br>
<a class='grey lighten-2 btn-flat font cur_d'>کدملک:
$id</a>
<br>
</br>
<a href='#' class='grey lighten-2 btn-flat font cur_c'>مشاورین املاک محدوده امام رضا</a>
</div>
</div>
</div>
;
    
    
    
        }
/* close connection */
$db->close();
    } else {
    
header("Location: browse.php");
    die(
"Denny access");
    }

function 
exception_handler($exception) {
  echo 
"Exception cached : " $exception->getMessage(), "";

اینم فایل jquery-loadMoreComments.php
کد پی‌اچ‌پی:
<?php 
/**
 * Infinite scrolling
 * 
 * http://tournasdimitrios1.wordpress.com
 * 
 * @copyright Tournas Dimitrios 2012
 * 
 This program is free software: you can redistribute it and/or modify  it under the terms of the GNU General Public License as published by  the Free Software Foundation, either version 3 of the License, or  (at your option) any later version . This program is distributed in the hope that it will be useful ,  but WITHOUT ANY WARRANTY ; without even the implied warranty of  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the  GNU General Public License for more details . You should have received a copy of the GNU General Public License  along with this program .  If not , see <http://www.gnu.org/licenses/> .
 
 * @author Tournas Dimitrios <[email protected]>
 * @version 0.4
 * 
 */


error_reporting(0) ;
if(
$_GET['lastComment']){
set_exception_handler('exception_handler') ;
$config parse_ini_file("config/my.ini") ;
$db=new mysqli($config['dbLocation'] , $config['dbUser'] , $config['dbPassword'] , $config['dbName']);
if(
mysqli_connect_error()) {
 throw new 
Exception("<b>Could not connect to database</b>") ;
}
/*
This should never be used as your  code would be vulnerable to "SQL-Injection 
if (!$result = $db->query('SELECT * FROM world_country WHERE id >' .$_GET['lastComment'] .' ORDER BY id ASC LIMIT 0 , 30')) {
*/
$filtered filter_input(INPUT_GET"lastComment"FILTER_SANITIZE_URL);
if (!
$result $db->query('SELECT * FROM world_country WHERE id >' .$filtered .' ORDER BY id ASC LIMIT 0 , 30')) {
    throw new 
Exception("<b>خطا در ارسال پارامتر</b>") ;
}

while(
$data $result->fetch_object()) {
$id $data->id;
$name $data->Name ;
$continent $data->Continent;
$population $data->Population ;
echo 
"
<div class='postedComment col s12 m4' id=\"
$data->id \">
<div class='card'>
<div class='card-image waves-effect waves-block waves-light'>
<img src='assets/images/card-image2.jpg' alt=''>
<div class='chip m-t-sm deep-orange white-text font margin_left'>"
."$name</div>
<i class='material-icons dp48 follow'>grade</i>
<span class='font date'>دو روز پیش</span>
</div>
<div class='card-content reltur'>
<i class='material-icons left activator left-align'>more_vert</i><span class='card-title right-align font'>"
.$continent."</span>
<a class='grey lighten-2 btn-flat font cur_d'>"
."$population </a>
</div>
<div class='card-reveal'>
<span class='card-title right-align font'><i class='material-icons left'>close</i>موارد بیشتر</span>
<a class='btn-floating btn-small waves-effect waves-light orange' style='margin: 4px;'>
<i class='material-icons'>textsms</i>
</a>
<a class='btn-floating btn-small waves-effect waves-light red' style='margin: 4px;'>
<i class='material-icons'>report_problem</i>
</a>
<a class='btn-floating btn-small waves-effect waves-light blue' style='margin: 4px;'>
<i class='material-icons'>send</i>
</a>
<a class='btn-floating btn-small waves-effect waves-light green' style='margin: 4px;'>
<i class='material-icons'>my_location</i>
</a>
<br>
</br>
<a class='grey lighten-2 btn-flat font cur_d'>کدملک:
$id</a>
<br>
</br>
<a href='#' class='grey lighten-2 btn-flat font cur_c'>مشاورین املاک محدوده امام رضا</a>
</div>
</div>
</div>
;
    
    
    
        }
/* close connection */
$db->close();
    } else {
    
header("Location: browse.php");
    die(
"Denny access");
    }

function 
exception_handler($exception) {
  echo 
"Exception cached : " $exception->getMessage(), "";

  پاسخ
تشکر شده توسط :


پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان