Ajax calling PDO function in PHP class to update a page - php

Question

I have a list of files and a drop down box, I'd like the user to be able to filter them by various categories etc.
I have a php class that has the function for creating the sql query and returning the result. I'd very much like to do this via ajax to prevent a refresh.
I'm stuck and was hoping for some help.
The problem is that I don't know what to do next. This is pretty new to me but still plenty foreign. If the ajax call can be run onKeyUp from the select then even better.
Thank you for any help:
the HTML:
<div>
<form action="" method="post" name="orderBy">
<label for="orderBy" id="orderBy">Order By:</label>
<select>
<option class="orderByOption" value="newest">Newest First</option>
<option class="orderByOption" value="oldest">Oldest First</option>
<option class="orderByOption" value="cat">Category</option>
<option class="orderByOption" value="alpha">Aphabetical</option>
<option class="orderByOption" value="fileType">Filetype</option>
</select>
<label> </label>
<input type="submit" class="orderByTrainingButton" name="submit" value="Go!"/>
</form>
</div>
The Ajax:
//form for changing the ordering of items in training all docs
$(function(){
$(".orderByTrainingButton").click(function(){
//validate and process
//get vlaue
var option = $(".orderByOption").val();
var params = {option: option};
$.ajax({
type: "POST",
url: "../trainingOrderByAjax.php",
data: params,
dataType: 'json',
success: function(data){
if(data.success == true){
//aaaannnd. stuck/
}else{
// shouldn't ge there...I hope.
}
},
error: function( error ) {
console.log(error);
}
});
});
});
The php the ajax will call:
<?php
include_once('core/init.php');
if($_POST){
$orderBy = $_POST['orderByOption'];
if($training->getAlFilesOrderBy($orderBy)){
$data['success'] = true;
}else{
$data['success'] = false;
}
echo json_encode($data);
}
To start with ordering by desc or asc would be great. I can then build on that.

Answer 1

Something like this.
PHP:
if($results = $training->getAlFilesOrderBy($orderBy)){
$data['success'] = true;
$data['results'] = $results;
}else{
$data['success'] = false;
}
echo json_encode($data);
}
JS:
if(data.success){
var results = data.results;
for (var i = 0; i < results.length; i++) {
// do something with results[i]
}
}else{
// shouldn't ge there...I hope.
}
Change your AJAX error handler to:
error: function(xhr, status, errorMsg) {
console.log("AJAX error: " + errorMsg);
}