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

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 !

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);
    });
});

First, change submit button to a button, it's not submitting anything you're not in control of. Second, you shouldn't show the results div unless you know there are results to show (e.g. Ajax success), so put your fadeIn inside the success function, and you can take the delay off. This will only trigger on AJAX success.

I'd suggest adding an error handler also, even if you just log the results to the console for your reference (or while testing). Chances are in this case your AJAX request is failing and you're not handling that error so you don't know what's going on:

<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); }
    });
});

Update

You're having trouble with your AJAX URL, I'd suggest you only store the page number in your hidden input, not the whole URL. You can then increment it with your success function:

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

Your AJAX call takes the direction (page number), concatenates it onto the URL, then increments the field value by one on success.

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