Use AJAX or something similar to reload a PHP foreach query?

[bradly.spicer]

Hey guys,

I have a Table which utilises Twitches API where the offset needs to be in increments of 25. I want to make it so everytime you click next in a table of data it reloads the query but adds +25 to the offset.

Here is what I have:

<?php
$json = json_decode(file_get_contents("https://api.twitch.tv/kraken/channels/greatbritishbg/follows?limit=25&offset=".$offset));
$offset = 0;
$currentFollower = 0;
$currentPage     = 0;
$resultsPerPage  = 24;
// Use http://json.parser.online.fr/ to get the string parse of the Json_Decode
$tableHtml = <<<TABLE
<div id="page-number-%s" style="%s">
    <table>
        <tr>
            <th>Username:</th>
            <th>Follow Date:</th>
            <th>Type:</th>
        </tr>
        %s  
    </table>
</div>
TABLE;
$rowHtml = <<<ROW
<tr>
    <td><a href="%s">%s</a></td>
    <td>%s</td>
    <td>%s</td>
</tr>
ROW;
$html = "";
$rows = "";
foreach ($json->follows as $follow)
{
    if ($currentFollower % $resultsPerPage == 0 && $currentFollower> 0)
    {
        $style = $currentPage === 0 ? '' : 'display:none';
        $html .= sprintf($tableHtml, $currentPage, $style, $rows);
        $rows = "";
        $currentPage++;
    }   
    $rows .= sprintf(   $rowHtml, 
                        $follow->user->_links->self,  
                        $follow->user->name . ' (' . $currentFollower . ')',
                        $follow->user->created_at,
                        $follow->user->type
    );
    $currentFollower++;
}
$html .= <<<BUTTONS
<button onclick="previousPage()">previous</button> 
<button onclick="nextPage()">next</button>
BUTTONS;
$javascript = <<<JS
<script>
var currentPage = 0;
function previousPage() {
    if(currentPage > 0)
    {
        document.getElementById('page-number-'+currentPage).style.display = 'none';
        $offset = $offset - 24;
        currentPage--;
        document.getElementById('page-number-'+currentPage).style.display = '';
        $('table').load('getData.cfm');
    }
};
function nextPage() {
    if(currentPage < {$currentPage} - 1)
    {
        document.getElementById('page-number-'+currentPage).style.display = 'none';
        $offset = $offset + 24;
        currentPage++;
        document.getElementById('page-number-'+currentPage).style.display = '';
        $('table').load('getData.cfm');
    }
};
</script>
JS;
echo $javascript.$html;
?>

When I click Next, nothing happens.
This is how it should work:

https://api.twitch.tv/kraken/channels/greatbritishbg/follows?limit=25&offset=0
https://api.twitch.tv/kraken/channels/greatbritishbg/follows?limit=25&offset=25
https://api.twitch.tv/kraken/channels/greatbritishbg/follows?limit=25&offset=50
https://api.twitch.tv/kraken/channels/greatbritishbg/follows?limit=25&offset=75

etc

[Borzoi]

On line 3 you are setting $offset to 0. I think you're intending to get this from the URL so the line should be:

$offset = $_GET['offset'];

This will get whatever value is in the URL. You'll want to force it to 0 if it's not set with an if statement:

if (isset($_GET['offset'])) //check if the URL has anything set for "offset"
{
    $offset = $_GET['offset']; //set it to the URL value if it is set
}
else
{
    $offset = 0; //Set to 0 if it is not set.
}

[bradly.spicer]

Hi Borzoi, thanks for this. Still unsure of how to make it so when you run the nextPage() function it will re run the json query and produce the next set of information with the offset changed