2012-01-08 2 views
2

Я пытаюсь создать 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 и так далее.

Вопрос: Как остановить экспоненциальный цикл?

ответ

1

Ваш live() s является причиной, насколько я могу видеть ...

Я хотел бы назначить Назад & вперед уникальный идентификатор и установить текущую страницу на PHP части вашего сценария (если вы передаете заголовки JSon, а затем json_encode(), это было бы что-то вроде $array_of_vals_for_json['back_button']=$thispage-1; для предыдущих страниц ссылки.

Я думаю, что мы должны были бы увидеть, что ваш PHP делает для того чтобы сделать какие-либо достойные предложения, но я уверен, что ваш живым является причиной перекручивания

+0

php не имеет значения: это просто запрос mysql и некоторые переменные. Проблема абсолютно в javascript и только в javascript. Это, похоже, казалось, что live() действительно является причиной, но что я могу сделать, чтобы заменить его? – Sweepster

+0

Замена live() с помощью функции on(), похоже, сделала трюк. – Sweepster

+0

Как показано в PetersenDidIt, переместите вкладку live() на родительскую страницу, так как они будут получать новые элементы, созданные остальной частью вашего скрипта. – Umut

0

Вы загружаете getposts.php несколько раз, что приводит к постоянным связям с событиями при загрузке getposts.php.

На странице load fetchposts.js загружается getposts.php и связывается с событиями прямого клика. Затем вы нажимаете на ссылку, и она снова загружает getposts.php и снова связывает события в прямом эфире. и цикл.

Переместите свой js-код в fetchposts.js, и вы должны быть хорошими.

+0

Я не могу этого сделать, хотя. пагинация должна обновить Причина заключается в том, что пользователи могут скрывать сообщения с заданными значениями. Когда они скрыты, getposts.php перезагружается, возвращая другой набор сообщений, что означает, что разбиение на страницы должно повторяться рядом с ним, чтобы отобразить правильное количество страниц. Любые идеи? По этой причине я не хочу, чтобы моя папка сидела в другом файле. Для этого требуется, чтобы я создал идентичный запрос mysql, так что разбиение на страницы может поймать переменные, которые являются пустой тратой ресурсов, когда те же самые переменные и запросы находятся в getposts.php ... – Sweepster

+0

Просто переместите события в 'fetchposts.js 'файл. Поскольку они являются «живыми» событиями, они будут обрабатывать html, изменяющийся после загрузки страницы. – PetersenDidIt

+0

Я заменил live() на on() и, похоже, исправил проблему. – Sweepster