यह काफी जटिल प्रश्न है। स्क्रैच से अपनी खुद की भिन्नता को कोड करने का प्रयास करने से पहले, मेरा सुझाव है कि आप अनंत स्क्रॉल jQuery प्लगइनपर एक नज़र डालें। ए> . अगर वह इसे ठीक नहीं करता है, तो यहां एक संभावित समाधान है:
जावास्क्रिप्ट
$(document).ready(function () {
loadData( 0 );
//Hide Loader for Infinite Scroll
$('div.ajaxloader').hide();
});
function loadData ( last_id ) {
var $entries = $('#entries'),
$loader = $('.ajaxloader', $entries).show();
$.get( '/getentries.php', { last_id : last_id }, function( data ) {
$entries.append( data ).append( $loader.hide() );
filterEntries();
});
};
//Isotope filter - no changes to this code so I didn't include it
$(window).scroll(function () {
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
$('div.ajaxloader').show('slow');
loadData( $( '#entries item:last' ).data('id') )
}
});
PHP
<?php
//Connect to Database
$con = new mysqli( 'localhost', 'root', 'root', 'awards' );
if( $con->connect_errno ) {
die( 'Could not connect:' . $con->connect_error );
}
$last_id = isset( $_GET['last_id'] ) ? (int)$_GET['last_id'] : 0;
$stmt = $con->prepare( 'SELECT * FROM entry WHERE status = "registered" AND entry_id > (?) ORDER BY entry_id LIMIT 0, 30' );
$stmt->bind_param( 'i', $last_id );
$stmt->execute();
$result = $stmt->get_result();
while( $row = $result->fetch_assoc() ) {
//Get award cat ids
$awardcat = $row['awards_subcategory_id'];
print "<div class='item item$awardcat clearfix' data-id='" . $row['entry_id'] . "'>";//add award cat id to each div
print '<img class="image" src="http://localhost:8888/awardsite/wp-content/themes/award/placeholder.jpg" />';
print "<p > Studio: " . $row['studio'] . "</p>";
print "<p class='client'> Client: " . $row['client'] . "</p>";
print "<p class='description'> Description: " . $row['description'] . "</p>";
print "<p class='solutionprocess'> Solution Process: " . $row['solution_process'] . "</p>";
print "</div>";
}
$con->close();
जावास्क्रिप्ट कोड सूची में प्रदर्शित अंतिम प्रविष्टि की आईडी के साथ PHP स्क्रिप्ट को AJAX GET अनुरोध भेजता है। PHP स्क्रिप्ट तब 30 प्रविष्टियाँ लौटाती है जो उस आईडी के बाद आती हैं। मूल Javascript फ़ाइल में कुछ PHP कोड था। मैंने इसे हटा दिया, क्योंकि मुझे नहीं पता कि इसका उद्देश्य क्या है (क्या आप जेएस को PHP स्क्रिप्ट से आउटपुट कर रहे हैं?) साथ ही, संपूर्ण XMLHttpRequest
कोड को छोटा किया जा सकता है $.get()
समारोह। आप वैसे भी jQuery का उपयोग कर रहे हैं, इसलिए आपको पहिया को फिर से शुरू करने की आवश्यकता नहीं है। मैंने data-id
. का उपयोग किया है प्रवेश आईडी संचारित करने के लिए विशेषता। वह एक HTML5 विशिष्ट विशेषता है। यदि आप इसका उपयोग नहीं करना चाहते हैं, तो बस id
का उपयोग करें इसके बजाय, लेकिन याद रखें कि आईडी एक संख्या से शुरू नहीं हो सकती - आपको इसे एक अक्षर से पहले लगाना चाहिए।
PHP स्क्रिप्ट में, मैंने mysqli
. का उपयोग किया है mysql_*
. के बजाय कार्य। आपको mysqli
. का उपयोग करना चाहिए या PDO
अब से, क्योंकि वे (अब बहिष्कृत) mysql_*
की तुलना में अधिक विश्वसनीय और सुरक्षित हैं . आपके PHP इंस्टॉलेशन में सबसे अधिक संभावना है कि ये एक्सटेंशन पहले से ही शामिल हैं। ध्यान दें कि मैंने डेटाबेस क्वेरीिंग त्रुटियों को हैंडल नहीं किया है। आप उस कोड को स्वयं लिख सकते हैं। यदि आपको अन्य प्रकार की त्रुटियां मिलती हैं, तो उन्हें यहां पोस्ट करें और मैं उन्हें ठीक करने का प्रयास करूंगा।