«показать еще» с Ajax

Question

Я пытаюсь сделать кнопку «показать еще» с AJAX, чтобы показать новые результаты каждый клик

<input type="hidden" id="direction" value="{$page+1}" /> 
<script type="text/javascript"> 
$(document).ready(function(){ 

$('#show_more').click(function(){ 
    $('#results_ajax').fadeIn("slow").delay(1000); 
    var ajax_url = "../profile/results_ajax/"; 
    var direction = parseInt($('#direction').val()); 
     $.ajax({ 
     url: ajax_url + direction, 
     type : "POST", 
     dataType :"html", 
     success : function(msg){ 
      $('#direction').val(direction + 1); 
      $('#results_ajax').append(msg) 

     }   
     }); 
    }); 
    }); 
</script> 

<div style="float: right;width:72%;margin-right:20px;"> 
<table width="100%" style="border-bottom:0px;"> 
<tr class="tbl"> 
<td colspan="4">{$ci->lang->line('results_archive')}</td> 
</tr><tr> 
<td class="tbl1" style="width: 50%;">{$ci->lang->line('exam_title')}</td> 
<td class="tbl2" style="width: 15%;">{$ci->lang->line('score')}</td> 
<td class="tbl1" style="width: 15%;">{$ci->lang->line('percentage')}</td> 
<td class="tbl2" style="width: 20%;">{$ci->lang->line('date')}</td> 
{foreach $results as $result} 
<tr> 
<td class="tbl1" style="width: 50%;">{$result.id}.{$result.exam_title}</td> 
<td class="tbl2" style="width: 15%;">{$result.score}/{$result.full_mark}</td> 
<td class="tbl1" style="width: 15%;">{$result.percentage}%</td> 
<td class="tbl2" style="width: 20%;">{date('d-m-Y',{$result.date})}</td> 
</tr> 
{/foreach} 
</table> 
<div id="results_ajax" style="display:none;"></div> 
<button id="show_more">Show More</button> 
</div> 

это мой код, но я имею небольшую проблему, я хотите каждый раз загружать эффект, но эффект (fadeIn) появляется только в первый раз, после чего новые результаты появляются без каких-либо эффектов, таблица отображается прямо!

Answer 1

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

Если это еще не показывает вашу проблему, добавьте обработчик ошибок в вызов ajax и выясните, возвращает ли он ошибку, и если да, то какая эта ошибка.

---

Кроме того, .delay(1000) здесь ничего не делает:

$('#results_ajax').fadeIn("slow").delay(1000); 

Если вы хотите на самом деле задержать вызов Ajax на секунду, вам нужно будет использовать setTimeout().

---

Объединяя все эти предложения в ваш код:

HTML:

<button id="show_more">Show More</button> 

Код:

$('#show_more').click(function(e){ 
     e.preventDefault(); 
     $('#results_ajax').fadeIn("slow"); 
     setTimeout(function() { 
      $.ajax({ 
      url: "../results_ajax/2", 
      type: "POST", 
      dataType:"html", 
      success: function(msg){ 
       $('#results_ajax').html(msg) 
      }, 
      error: function(xhr, status, error) { 
       console.log(status); 
       console.log(error); 
      } 
      }); 
     }, 1000); 
    }); 
}); 

Answer 2

Во-первых, изменить отправить кнопку на кнопку, это не подача что вы не контролируете. Во-вторых, вы не должны показывать результаты div, если не знаете, что есть результаты для показа (например, успех Ajax), поэтому добавьте fadeIn в функцию успеха, и вы можете снять задержку. Это приведет только к успеху AJAX.

Я бы предложил добавить обработчик ошибок, даже если вы просто зарегистрируете результаты в консоли для справки (или во время тестирования). Скорее всего, в этом случае ваш запрос AJAX не удается, и вы не обрабатывает эту ошибку, так что вы не знаете, что происходит:

<button type="button" id="show_more">Show More</button> 

$('#show_more').click(function(e){ 
    e.preventdefault(); 
    $.ajax({ 
     url: "../results_ajax/2", 
     type : "POST", 
     dataType :"html", 
     success : function(msg){ 
      $('#results_ajax').html(msg).fadeIn("slow"); 
     }, 
     error: function(msg){ console.log(msg); } 
    }); 
}); 

Обновление

у вас возникли проблемы с ваш URL-адрес AJAX, я бы предложил вам сохранить только номер страницы в скрытом входе, а не весь URL-адрес. После этого вы можете увеличить его с помощью функции успеха:

<input type="text" id="direction" value="{$page}"> 

Ваш вызов AJAX принимает direction (номер страницы), присоединяет его на URL, затем увеличивает значение поля по одному на успех.

var ajax_url = "../profile/results_ajax/"; 
var direction = parseInt($('#direction').val()); 
$.ajax({ 
    url: ajax_url + direction, 
    ... 
    success: function(msg) { 
     $('#direction').val(direction + 1); 
     ...