Display data from database without refreshing (Javascript)

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);
?>

Can you do some basic debugging yourself... does query2.php receive the vehicle_database_id correctly? Does it match any rows? Does the click handler even fire? Any errors in the console? Checked your network viewer? This is a long sequence of events... you need to narrow down which part isn't working at the moment. — Matt
– Matt, Commented Jul 9, 2012 at 12:54

Reinder Wit · Accepted Answer · 2012-07-09 12:56:41Z

2

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

answered Jul 9, 2012 at 12:56

Reinder Wit

6,6551 gold badge29 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Recognizer · Accepted Answer · 2012-07-09 13:57:09Z

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/.

Collectives™ on Stack Overflow

Display data from database without refreshing (Javascript)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related