calling a specific PHP function with AJAX - php

Question

Updated with page titles.
This is on Leaderboard.php. you can see I've currently got the PHP call in the tbody.
<!-- The Leaderboard Table -->
<table id="tblData" class="table table-hover leaderboard-table target">
<thead>
<tr>
<th class="hidden-phone">Rank</th>
<th>Sales Person</th>
<th>Total Points</th>
</tr>
</thead>
<tbody id="leaderboardresults">
<?php $getLeaderboard->getTable($_GET['competitionId']); ?>
</tbody>
</table>
<!-- The Leaderboard Table END -->
This is on API/getLeaderboard.php. This is where the getTable function is.
<?php
class getLeaderboard {
public function getTable($competitionId) {
//I run the SQL query and echo out some PHP
}
This is on Leaderboard.php.
function loadLeaderboard() {
var competitionId = $("body").attr("data-competitionId");
var url = "api/getLeaderboard.php?competitionId=" + competitionId;
$.get(url, function(data) {
//$("#leaderboardresults").html(data);
});
}
This is also on Leaderboard.php. Another AJAX call that does a AJAX get (this works perfectly), and should reload the leaderboard on success.
$(function() {
//this works (/James)
$(".navVisible").click(function() {
var Competition = $("body").attr("data-competitionId");
var Activity = $(this).attr("data-activity");
$.post("registerresults.php", { data: Activity, competitionId: Competition })
.done(function(data) {
loadLeaderboard();
});
});
loadLeaderboard();
});
This is getLeaderboardTable.php
<?php
include "common/common.php";
include "api/getLeaderboard.php";
$competitionId = $_GET['competitionId'];
$getLeaderboard->getTable($competitionId);
?>

Answer 1

From what I understand you need the following -
You have a page (page A) which calls an ajax function at a specific time, and it is supposed to load results.
You have a php function which provides those results when passed a parameter "competitionId".
What you are doing wrong is you have 1 and 2 in the same page without any controller. What you need to do is, move
<?php $getLeaderboard->getTable($_GET['competitionId']); ?>
into a different page, say "getLeaderboardTables.php". Then modify your html page as follows:
<table id="leaderboardresults">
<tbody>
</tbody>
</table>
and then your ajax function as follows, which will insert the data into your data holding table identified by the id leaderboardresults:
function loadLeaderboard() {
var competitionId = $("body").attr("data-competitionId");
var url = "api/getLeaderboardTables.php?competitionId=" + competitionId;
$.get(url, function(data) {
$('#leaderboardresults tr:last').after(data);
});
}
The .after ensures that new rows are appended to the end of the table. if you want to replace them, call $("#leaderboardresults").empty(); first.
Technically speaking though, you do not NEED to move the function to a different PHP page; You can do what DevZero suggested and have a switch case based controller as well so that the same page can be used.
After you have edited the question, I have the following comments -
Your table id has to be leaderboardresults, not tbody id. if you want to keep your table body as tblData, then edit your ajax script as follows
$.get(url, function(data) {
$('#tblData tr:last').after(data);
});
Most important thing, is that you have neither used a controller like DevZero suggested, nor moved the php data fetch to a different page. What you will need to do is:
Option 1 - As I mentioned above, create a new page, called getLeaderboardTables.php, over there put the db connection, include the class, and add this line
<?php $getLeaderboard->getTable($_GET['competitionId']); ?>
so this new page, when called from the browser should ONLY output the rows and NOTHING else. Then call this URL passing the competition id as i mentioned before.
Option 2 - Donot create a new page, but in your existing page, have a controller, like DevZero said, by adding the following to the very top of your html/php after the class includes as follows:
switch ($_GET['action']) {
case 'ajax':
$getLeaderboard->getTable($_GET['competitionId']); //your specific function
break;
default:
?>
Current html/php page content will come here in its entireity
<?php
}
and modify the ajax call as:
var url = "api/getLeaderboard.php?action=ajax&competitionId=" + competitionId;
The basic idea is, AJAX cannot be used to call a PHP function directly. AJAX can be used to call a PHP page, and passing some parameters to it, which in turn calls a PHP function or method to generate some output, and print that output back to the browser window. What AJAX will do is copy that output from the php page, and store it in a javascript variable to do what you want with it. So, the url which you are passing to the ajax function must only load what you want to dynamically update. Think of AJAX here as an invisible man, who takes your url, opens a invisible browser window, pastes that link, waits for page to load, copies the output of the page and stores it in a variable for you.
What you are doing is, you are loading the whole page through AJAX, not just the output which you want to dynamically update.

Answer 2

you can load the results into any html element you want for example if you have a div with id foo you can load the data as follows
$.get(url, function(data) {
$("#foo").html(data);
});
to call a specific function on the file, introduce to a light weight controller to the top of that file.
switch ($_GET['action']) {
case 'foobar':
foobar(); //your specific function
break;
}
So with the controller above pass in the action value of for the function your routing to and then that function will be called.