使用Ajax的“显示更多”按钮

Question

I'm trying to do "show more" button with ajax to show new results every click

<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>

so this is my code , but i've small problem, i want to do some loading effect every click, but (fadeIn) effect appears in the first time only, after that the new results appears without any effects, the table appears direct !

Answer 1

Your "Show more" button type looks like the type for submitting a form (that does a form post which then loads a new page). I would suggest changing that to a regular button or cancel the default action so you aren't submitting a form.

If that still doesn't show your issue, then add an error handler to the ajax call and find out if it is returning an error and, if so, what that error is.

---

Also, the .delay(1000) here isn't doing anything:

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

If you wanted to actually delay the ajax call for a second, you will need to use a setTimeout().

---

Combining all these suggestions into your code:

HTML:

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

Code:

$('#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);
    });
});