JQuery/Ajax - Загрузка новых данных на страницу после вызова базы данных с использованием .replaceWith или .html?

Question

Мне любопытно, как получить мой AJAX/JQuery, чтобы обновить страницу с помощью новой информации о базе данных.

Исследование существующих вопросов предполагает эти сообщения могут быть полезны:

jQuery AJAX calls to database work, but not in order

jQuery AJAX using fadeIn + replaceWith

В соответствии с этими предложениями, я создал функцию PHP, которая обрабатывает данные, передаваемые с помощью AJAX. On Успех, я fadeOut старый HTML, и replaceWith новый HTML.

Проблема заключается в том, что новые данные из базы данных не отображаются при первом щелчке элемента DOM, но он отображается во второй раз при нажатии. Я также получаю нежелательное обновление страницы во втором клике.

Вы можете увидеть живой пример (для моей свадьбы сайта) по адресу: http://bucketlingerwedding.com/80s-music-reception/

Если вы пытаетесь голосовать вверх, он не работает в первый раз, и работают во второй раз (за исключением обновления страницы) ,

Еще одна проблема, с которой я сталкиваюсь, заключается в том, что я не знаю, должен ли кеш быть установлен «false» или просто опущен. Частью проблемы может быть то, что новый HTML, который я загружаю replaceWith (я также пробовал .html()), имеет те же классы и идентификаторы для каждой строки таблицы. Мне любопытно, если бы я попытался заменить одну строку, а не всю таблицу, и дал бы ей новый идентификатор и имя класса, будет ли JQUERY/AJAX fadeIn этой новой строкой с новой информацией из базы данных?

Вот код, я использую для AJAX (частично основаны на указанных должностях):

$(document).ready(function(){ 
//JQuery for the submission of a new list item. 
    $('input.[class$="-arrow"]').click(function(e){ 
     e.preventDefault(); //put e in function. 
     var ajaxurl = '<?php echo the_permalink(); ?>'; 
     if ($(this).hasClass('up-arrow')) { 
      var arrowdirection = 'up'; 
      var entry = $(this).val(); 
     } 
     else if ($(this).hasClass('down-arrow')) { 
      var arrowdirection = 'down'; 
      var entry = $(this).val(); 
     } 
     var rowid = '.line-items-rows' + '#' + entry; 
     var data = { 
      action: 'cb_lud_arrow_action', 
      arrow: arrowdirection, 
      entryID: entry 
     }; 
     $.ajax ({ 
      cache: false, 
      type: 'POST', 
      url: ajaxurl, 
      data: data, 
      success: function(data){ 
       newtable = '<?php 
       $cb_table_code = plugins_url("list-up-down/table-up-down.php", _FILE_); 
       include_once "table-up-down.php"; 
       echo $cb_lud_new_output; 
       ?>'; 
       $('#cb_lud_table').fadeOut('fast', function(){ 
        $(this).replaceWith(newtable).hide(); 
        newtable.fadeIn('fast'); 
       }); 
       } 
     }); 
}); 
}); 

ПРИМЕЧАНИЕ: Я подтвердил, что данные, размещенные с помощью AJAX действительно обновляет таблицы базы данных, поэтому. php-файл и метод POST ajax, по крайней мере, работают правильно.

То, что я в основном нужно для хронологии событий, чтобы быть:

1. пользователь голосует до (щелчки) строку в таблице.
2. Данные отправляются в базу данных MySQL, добавив голосование в правильном столбце.
3. При успешном выполнении функция определяет новое значение из базы данных и генерирует новый html.
4. Старые данные исчезают, новые данные затухают.
5. Все счастливы.

Это не имеет большого значения для меня, если это больше решение JQuery (как положить эффекты в правильном порядке, или с помощью функции .delay()), или более из решения AJAX, где Я настраиваю функции обратного вызова на основе успешной публикации данных или чего-то связанного с кешем. Просто хочу, чтобы это сработало. Пожалуйста помоги.

Answer 1

Используйте консоль браузера, чтобы просмотреть возникшие ошибки. newtable - это только строка, поэтому вы не можете использовать ее как объект jQuery для вызова методов jQuery. Это вызывает ошибки в консоли и упрощает установку нуля в коде.

Посмотрите на ваш взгляд, источник того, что следующие выходы:

newtable = '<?php 
      $cb_table_code = plugins_url("list-up-down/table-up-down.php", _FILE_); 
      include_once "table-up-down.php"; 
      echo $cb_lud_new_output; 
      ?>'; 

Вы, вероятно, не нуждаются в какой-либо из той строки, которая является полное восстановление таблицы в HTML строку, но так как вся страница также возвращаясь в html, это полное дублирование, и вы можете просто захватить html-версию и полностью удалить ее.

Изменить на:

 success: function(data){ 
      /* convert whole page returned to jquery and get inner html of the table*/ 
      var newRows=$(data).find('#cb_lud_table').html() 
      $('#cb_lud_table').fadeOut('fast', function(){ 
       /* insert new rows*/ 
       $(this).html(newRows).fadeIn('fast'); 

      }); 
      } 

После того, как вы получите, что работает, вы, возможно, придется пересмотреть, как прикрепляются ваши обработчики нажмите (я не смотрел). Удаление старого html также удаляет любые связанные события. Используя on(), делегированный на стол, который теперь станет активом permaennt, компенсирует изменение html

Answer 2

Вы использовали функцию fadeIn для переменной. Поэтому он генерирует ошибку newtable.fadeIn не является функцией. Вы не можете использовать функцию fadeIn для переменной. Дайте имя id или класса функции fadeIn.