Display data from database without refreshing (Javascript) - php

Question

I'm trying to get the following code to work that is supposed to display data from my database when the following link is clicked: (without refreshing the page)
<a id="bugatti_link" href="#" database_id="Bugatti">Bugatti</a>
Unfortunately it's not working, it's not displaying anything and not giving an error.
index.php =
<a id="bugatti_link" href="#" database_id="Bugatti">Bugatti</a>
<script>
$("#bugatti_link").click(load_ajax);
function load_ajax(e) {
var link = $(e.target);
var vehicle_database_id = link.attr("database_id");
var ajax_params = {"brand": vehicle_database_id};
$.getJSON("query2.php", ajax_params, success_handler)
}
function success_handler(data) {
//data variable contains whatever data the server returned from the database.
//Do some manipulation of the html document here. No page refresh will happen.
}
</script>
query2.php =
<?php
$host = "xx";
$user = "xx";
$db = "xx";
$pass = "xx";
$pdo = new PDO("mysql:host=" . $host . ";dbname=" . $db, $user, $pass);
$rows = array();
if(isset($_GET['brand'])) {
$stmt = $pdo->prepare("SELECT brand FROM cars WHERE brand = ? ");
$stmt->execute(array($_GET['brand']));
$rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
}
echo json_encode($rows);
?>

Answer 1

you pass your json data to 'success_handler', but the data is not processed within that function

Answer 2

Note the addition of .error to your $.getJSON code. Should the request fail, this will tell you why. A response was received, but it might have an issue and this will tell you. See the note below as to why it might be failing silently.
Also, adding a $(document).ready wrapper around your code is best as it ensures the page has fully loaded before running the javascript inside. Depending on the browser and how nested the element is, it may or may not be ready for attaching events. In any regard, it's best to put it in the document ready to always be sure.
$(document).ready( function(){
$("#bugatti_link").click(function(e){
e.preventDefault();
var vehicle_database_id = $(this).attr("database_id");
var ajax_params = {"brand": vehicle_database_id};
$.getJSON("query2.php", ajax_params, function(data){
//data variable contains whatever data the server returned from the database.
//Do some manipulation of the html document here. No page refresh will happen.
})
.error(function(data,msg,error){
alert( msg );
});
});
})
Important: As of jQuery 1.4, if the JSON file contains a syntax error,
the request will usually fail silently. Avoid frequent hand-editing of
JSON data for this reason. JSON is a data-interchange format with
syntax rules that are stricter than those of JavaScript's object
literal notation. For example, all strings represented in JSON,
whether they are properties or values, must be enclosed in
double-quotes. For details on the JSON format, see http://json.org/.