Я пытаюсь создать ajax pagination с помощью jQuery. Я получаю его к работе, но с огромной проблемой:jQuery AJAX разбиение на страницы, как предотвратить экспоненциальный цикл?
Разбиение на страницу состоит из < < -Первый < -Предыдущий Page1 Страница 2 Следующая-> Последняя - >> и каждая кнопка работает. Pagenum отправляется через ajax и перезагружает DIV, когда страница находится в отображении сообщений, относящихся к этому номеру страницы (Страница 1 = сообщения 1-10 и т. Д.).
Предполагается, что мы на странице 1 из 2-х страниц. Нажав на кнопку «Страница 2», «Далее» или «Последний», я приведу меня на страницу 2, как следует. Если я затем перейду на страницу 1, предыдущий или последний, я приведу на страницу 1, как я должен, но ajax запускается дважды.
Если я снова нажмите кнопку «Страница 2», «Далее» или «Последний», я приведу на страницу 2, снова, как и следовало бы, но ajax запускается 4 раза. Если я вернусь на страницу 1, ajax запускается 8 раз.
Вы можете видеть, где я собираюсь с этим.
Я включаю свой код для 3-х файлов:
index.php, в котором отображается содержимое внутри
<script type="text/javascript" src="fetchposts.js"></script>
<div id="contPaginated">
<div id="content"></div>
</div>
fetchposts.js который загружает getposts.php (отделяет мое содержание от WordPress материала)
$(document).ready(function() {
$('#content').load('getposts.php');
});
getposts.php который загружает сообщения, а также разбиение на страницы (это, где проблема происходит, только пагинация код включен, так как именно там пр oblem есть)
<script type="text/javascript">
$(document).ready(function() {
var first = 1;
var currentPage = 1;
var numrows = <?php echo $rows; ?>;
var pagerows = <?php echo $page_rows; ?>;
var last = <?php echo $last; ?>;
var pagenum = '';
var hideLikes = <?php echo $hideLikes; ?>;
var hideDislikes = <?php echo $hideDislikes; ?>;
for (i = 1; i <= last; i++){
$('<div id="page_' + i + '" class="pageNum"><a href="#">' + i + '</a></div>').appendTo('.pages');
}
$('.pageNum').live('click', function() {
pagenum = $(this).attr('id').replace('page_', '');
paginationAjax();
return false;
});
$('.first').live('click', function() {
pagenum = first;
paginationAjax();
return false;
});
$('.previous').live('click', function() {
pagenum = Math.max(currentPage - 1, first);
paginationAjax();
return false;
});
$('.next').live('click', function() {
pagenum = Math.min(currentPage + 1, last);
paginationAjax();
return false;
});
$('.last').live('click', function() {
pagenum = last;
paginationAjax();
return false;
});
function paginationAjax(){
// Send values to database
$.ajax({
url: 'getposts.php',
//check.php receives the values sent to it and stores them in the database
type: 'GET',
data: 'pagenum=' + pagenum,
success: function(callback) {
$('#content').html('').html(callback);
}
});
}
});
</script>
<div class="Pagination">
<div class ="Pagination-inside-top">
<div class="first">
<a href=''> <<-First </a>
</div>
<div class="previous">
<a href=''> <-Previous</a>
</div>
<div class="pages"></div>
<div class="next">
<a href=''>Next -> </a>
</div>
<div class="last">
<a href=''>Last ->></a>
</div>
</div>
</div>
Я хочу сделать некоторые вещи ясно:
- Я знаю код нуждается в чистке. Я просто хочу, чтобы этот элемент цикла был исправлен первым.
- Сам аякс работает. Он отправляет правильные значения и извлекает их просто отлично.
- Переменные все объявляют и устанавливают отлично также.
Так опять же, проблема заключается в том, что Ajax, в то время как он функционирует нормально и посылает меня в нужном месте, пожары в геометрической прогрессии в зависимости от того, сколько раз я использую пагинацию: 1 щелчок стреляет Аякс один раз, но 2 щелчков пожаров он дважды, 3 щелчка стреляет 4 раза, 4 клика = 8 и так далее.
Вопрос: Как остановить экспоненциальный цикл?
php не имеет значения: это просто запрос mysql и некоторые переменные. Проблема абсолютно в javascript и только в javascript. Это, похоже, казалось, что live() действительно является причиной, но что я могу сделать, чтобы заменить его? – Sweepster
Замена live() с помощью функции on(), похоже, сделала трюк. – Sweepster
Как показано в PetersenDidIt, переместите вкладку live() на родительскую страницу, так как они будут получать новые элементы, созданные остальной частью вашего скрипта. – Umut