Question

I have 3 file index.php, .js file, and a.php file. i made a ajax request to a.php via js(jquery) file. i am gettin response in html,(in 1 html response) there r 3 divs but i want to display one div at a time. Then click next button next div, which is in the same html response. Its a basically client side pagination via server side data(getting from 1 AJAX). But i am not able to handle 3 divs in index page one by one.

1.
the request goes –

<script>
$(document).ready(function(){
 showitem(id);
}); 
</script>

1. simple query is processed.

   function showitem(id){

   $.ajax({    
       type    : "POST",
       cache   : true,
       //dataType: "json",
       url     : "a.php",
       data    : {
                   proid:id
                 },                
       success: function(data) {
   
           $("#match_item_display").html(data);// This is span in index.php
   
       }
   });
   

   }

3.
In the response (say) i get 9 elements in form of HTML Divs(3 in this case), i want to display 3 at a time.

$start=0; $end=6;
    for($d=0;$d<$len;$d++)
    {   
        if($end>$count)
        {
            $end = $count;
            match_pro("Closley Match", array_slice($recent_arr, $start, $end),$d);
        }
        else 
        {
            match_pro("Closley Match", array_slice($recent_arr, $start, $end),$d);
            //break;
        }
        $start=$end; $end=$end+6;
    }

Its return 3 Divs as a respone…

1. To show – next and previous buttons.

SUMMARY -> 1-ajax request, some HTML divs as response, show them sequentially on a button click one at a time.

I am doing client side pagination because the query cannot return more than 9-12 responses at a time. so client side scripting shall be optimal.

Answer 1

you can put the divs in an array and then return.
eg:

$response = array(0 => 'div1_data', 1 => 'div2_data', 2=>'div3_data');
echo json_encode('html' => $response); // returning to ajax call

in ajax call response you can save it to an js array;
then update the area with the first element.
on next button click update the area with second element…
hope it will help.

in js you can do:

index = 0;
res_data = [];
$.ajax({    
 type    : "POST",
 cache   : true,
 //dataType: "json",
 url     : "a.php",
 data    : {
            proid:id
          },                
  success: function(data) {
    $(data.html).each(function(k,v){

       res_data.push(v);

    });
    showNext();      
  }
});


function showNext(){
    $("#match_item_display").html(res_data[index]);
    index++;
}

function showPrev(){
    if(res_data[index-1] !== 'undefined'){
        $("#match_item_display").html(res_data[index-1]);
        index--;
    }
}

you can make the ajax call on load of the page.
and assign the showNext() and showPrev to onclick events of next and prev button respectfully.