Hello everybody, i am quite new to php and new to UF, but i recently started creating a website, so far so good, but i have come across something i cant quite figure out, i followed a bunch of the documentation on the site, and my problem is i cant seem to display data from a table in my database in a uftable, or more so, i dont know how, i followed the extending the usermodel page as a test, and also followed the tables page about the uftable, now using the debug suggested in extending the usermodel , i get all the data of my table in the log file, so that works, i just dont know how to display it in a uftable with all the functions of it, i think it has something to do with the fact that the method in extending the usermodel tries to serve the data to a twig template, and uftable expects it in a other way, could someone please point me in what direction i shoulld be looking through the documentation? iǘe been searching for a while, but am kind of lost…
Hi,
So the way that the ufTable works is on document ready, a jquery function initializes the ufTable. To do that, we use jquery to target the form widget in the twig file, and then we pass the controller route to the ufTable js function. The ufTable function will call for the data, and then decorate the table by filling in the twig data references. Id suggest taking a look at the users.js file in the admin assets folder. Here’s a reference.
app/sprinkles/admin/assets/userfrosting/js/pages/users.js
Id first make sure that your route to your controller is returning data. You should be able to see this by hitting your site url + /api+/whateverRoute.
i.e. userfrosting.test/api/cheeses
Your own example should show a json of the data your returning. If that is the case, and you add in the ufTable function call into the asset file you’re loading up on the page, then your twig template for the table probably needs to be adjusted.
Cheers
hi, thanks for the reply, im starting to get it, but my controller doesnt seem to return data, i tried with the method you mentioned, and got an error 404, the route specified in my routes file is $app->get('/test', 'UserFrosting\Sprinkle\Site\Controller\TestController:pageList') ->add('authGuard') im running it locally to test, so i typed in the url bar localhost/api/test and got the UF error 404 page.
this i my controller:
<?php
namespace UserFrosting\Sprinkle\Site\Controller;
use Psr\Http\Message\ResponseInterface as Response;
use Psr\Http\Message\ServerRequestInterface as Request;
use Slim\Exception\NotFoundException;
use UserFrosting\Sprinkle\Core\Controller\SimpleController;
use UserFrosting\Support\Exception\ForbiddenException;
use UserFrosting\Sprinkle\Site\Database\Models\Test;
use UserFrosting\Sprinkle\Core\Facades\Debug;
class TestController extends SimpleController
{
public function pageList(Request $request, Response $response, $args)
{
/** @var UserFrosting\Sprinkle\Account\Authorize\AuthorizationManager */
$authorizer = $this->ci->authorizer;
/** @var UserFrosting\Sprinkle\Account\Database\Models\User $currentUser */
$currentUser = $this->ci->currentUser;
// Access-controlled page
if (!$authorizer->checkAccess($currentUser, 'special_test_permission')) {
throw new ForbiddenException();
}
$entries = Test::all();
//Debug::debug($entries);
return $this->ci->view->render($response, 'pages/test.html.twig', [
'entries' => $entries
]);
}
}
i thought it was either the authentication or the return command at the end, but commenting those out still gave me a 404 but still, if i uncomment the debug part, it shows up in the logfile
It sounds like you might be confusing the JSON API url/route with the page url/route. With ufTable, a table is essentially constructed in two pieces - the table “skeleton”, and then the rows of the table, which are constructed from data retrieved through a separate JSON API.
The reason this is done is for performance. If you tried to build out a table with more than a few hundred rows all at once (for example, by passing the data directly to the Twig page template), your page would take a very long time to load and render. I actually face this problem every day with an old UF2 application that I built for my company and we have not yet upgraded - it can take up to 30 seconds to load a table containing all of our customers!
By using a separate data source, the results can be paginated and thus we can load and render the rows in smaller chunks, as requested by the user.
You mentioned:
i typed in the url bar
localhost/api/testand got the UF error 404 page
Did you actually set up the api/test route, and a corresponding TestController::getList method? Did you create a TestSprunje that TestController can use to automatically run the paginated, sorted, and filtered queries?
Hi, ok, i had read about the sprunje file being needed for sorting the data, but hadn’t thought of it being necessary for displaying the data in the first place, i’m going to follow the sprunjing tutorial and adapt it to my test, i think this is the thing, also TestController runs a function called pageList, and i see that in the sprunjing page it uses a getList as you say, so…
thanks for the reply, i’m going to try this real quick and get back with the results
You’ll need both. getList will generate the sprunjed data API, while pageList will generate the actual page that renders this data in a nice table.
i was just looking at that on the other tab i have open 
, so until now i’ve managed to get the sprunjeand getList method working, when i go to api/test it gives me a JSON with all the required entries from the databse, now i’m trying to display them in the table, so lets see how it turns out
i’m getting a error in the console ponting to: assets/userfrosting/js/pages/test.js in my own sprinkle, it contains:
$(document).ready(function( {
$("#testTable").ufTable({
dataUrl: site.uri.public + "/api/test",
useLoadingTransition: site.uf_table.use_loading_transition
});
}))
it says: SyntaxError: missing variable name on regtest.js line 4, this is line 4: $("#testTable").ufTable({ i’m not shure if this is actually supposed to be an error, beacause the variable name exists 
i noticed the search/filter options wernt appearing anymore for my table so after a while of fiddling arround, removing the $(document).ready(function( {})) from regtest.js, they came back, but now the loading arrows stay on indefinitely, and i get this error: TypeError: (intermediate value).call is not a function
handlebars.js%20line%201176%20%3E%20Function:8:32
and by the way, the debugging in userfrosting woks so whell, it has saved me from a lot of headaches, its a really nice feature to have when learning! in fact UF in general has been a really good learning tool for me, i really like the way it works.
yay, that’s the goal!
It sounds like maybe some kind of syntax error? Can we see your regtest.js?
Also, please use Markdown for formatting bits of code in the forums.
this is regtest.js as i had it first:
$(document).ready(function( {
$('#testTable').ufTable({
dataUrl: site.uri.public + "/api/test",
useLoadingTransition: site.uf_table.use_loading_transition
});
}))
from what i understood, is that this file is page specific js which i already declared as a asset btw, i understand that it serves the purpose of telling uftable where to get the data from, and i have it included in my .html.twig file were i also have the table wrapper, the $(document).ready(function( { part i copied and pasted from the users.js file in the assets folder of the admin sprinkle, the rest i have from the tables tutorial, but the strange thing is that when i remove $(document).ready(function( { from the file :
dataUrl: site.uri.public + "/api/test",
useLoadingTransition: site.uf_table.use_loading_transition
});
it renders the table correctly, but the two loading arrows keep turning in front of the table…
I see at least two syntax errors that could be causing the problem.
First, you are missing the closing ) for the empty function parameter list in the callback of $(document).ready. You seem to have put that extra ) after the function body instead 
You’re also missing a ; at the very end.
Syntactically, the way this works is that you’re passing an entire function (callback) as an argument to ready(). Another way to think about this, which would be equally valid, would be to assign the callback function to a variable and then pass that variable to ready:
var initTable = function() {
$('#testTable').ufTable({
dataUrl: site.uri.public + "/api/test",
useLoadingTransition: site.uf_table.use_loading_transition
});
};
$(document).ready(initTable);
Just to make sure you understand the concept of callback functions, rather than blindly copy-pasting a template, I would recommend reading about Javascript callbacks!
aw man! thanks so much! i cant believe i overlooked that, do typos occur a lot to you guys as more experienced people, cause for me this is the secon time already, last time i spent two weeks redoing everything step by step until i found a missing r in a variable, so frustrating 
,anyway thanks a lot for the help!
Sure, I make typos all the time! Something that helps a lot though, is a text editor that has syntax highlighting to automatically detect these types of mistakes.
yeah, i’ve settled with sublime text 2 and it is soo usefull, but still, if i for example extend a class that is in another file, i have to really check for typos in variables and stuff like that, because sublime text doesnt check for them in the other file .
if i have another question i’ts better to just do it in a new thread right?
Yep, start a new thread please.