What is wrong with my AJAX code

Question

I am brand new to the world of AJAX. I have a Mysql database that contains a column filled with URLs. My end goal is to have an on click event load an iframe with a unique URL from the database. If anyone has a better methodology please let me know.

Right now however I'm just trying to figure out how AJAX works by trying to retrieve the URLs. I've attached my Javascript code and my PHP code.

The PHP code does output a json encoded copy of the data. The javascript however reports the variable result as undefined. I think this may have to do with the "asynchronous" side of AJAX but I followed this tutorial to try to make code work correctly. I appreciate any help that can be provided.

How do I return the response from an asynchronous call?

Here is my code Javascript code it logs results is undefined and "I made it" to the console

function retrieve_callback(result) { 
    console.log (result);
    console.log("I made it!");
    };

function retrieveURL (retrieve_callback) {  
    $.getJSON({
        url: './fetch.php',
        dataType: 'json',
        success: retrieve_callback
    });
}

//Runs when our document initializes
$( document ).ready(function() {
    retrieveURL(retrieve_callback());
});

Here is my PHP code it outputs the JSON array of the URLs

<?php
//--------------------------------------------------------------------------
// Connect to mysql database (I've removed the info from this example but it works)
//--------------------------------------------------------------------------

$db = new mysqli($DB_HOST, $DB_USER, $DB_PASSWORD, $DB_NAME);

if($db->connect_errno > 0){
    die('Unable to connect to database [' . $db->connect_error . ']');
}

//--------------------------------------------------------------------------
// Query mysql database
//--------------------------------------------------------------------------

$links = array();

//SQl query
$sql = <<<SQL
    SELECT `Gnews_url`
    FROM `Gnews_RSS`
SQL;

if(!$result = $db->query($sql)){
    die('There was an error running the query [' . $db->error . ']');
}

while($row = $result->fetch_assoc()){
    array_push($links, $row);
}

echo json_encode($links);

score 3 · Accepted Answer · answered Dec 10 '13 at 21:58

3

retrieveURL(retrieve_callback()); is incorrect.

retrieveURL is expecting you to pass a function reference so it can execute it once the request completes. Instead, you're executing retrieve_callback and passing the result of that (undefined) to retrieveURL, so it never actually does anything when the request completes. Not only that, but you're executing the callback before you make the request.

You should pass it like:

retrieveURL(retrieve_callback);

answered Dec 10 '13 at 21:58

Evan Trimboli

29,900
6
45
66

Thank you, this however opens up a new issue. My request is not calling the success function. I've added an error return to debug it but its also not outputting any information. It seems like the request is hanging. Thank you again everyone for the help. – Jesse Dec 10 '13 at 22:55
It's entirely possible your PHP is messing up somewhere, I'm not overly familiar with it. Add a `failure: retrieve_callback` after success and see if that gets triggered. – Evan Trimboli Dec 10 '13 at 23:01
I added a failure function to just do alert("I messed up") and console.log("I messed up"). Still no output from the success, error, or failure function. – Jesse Dec 10 '13 at 23:10
I changed .getJSON to .ajax and I received this error alert Exception... "Access to restricted URI denied" code: "1012" nsresult: "0x805303f4 (NS_ERROR_DOM_BAD_URI)" location: "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js Line: 6"] It seems like its mad about the way I'm linking to Jquery I'll try downloading it and running it like that – Jesse Dec 10 '13 at 23:17
I fixed that by changing /fetch.php to fetch.php. Now I just need to figure out where my invalid characters error code is coming from. – Jesse Dec 10 '13 at 23:30

score 0 · Answer 2 · answered Dec 10 '13 at 21:59

0

This:

$( document ).ready(function() {
    retrieveURL(retrieve_callback());
});

You are calling retrieveURL with the RESULTS of calling retrieve_callback(). Do this instead:

$( document ).ready(function() {
    retrieveURL(retrieve_callback);
});

answered Dec 10 '13 at 21:59

Steve H.

6,912
2
30
49

score 0 · Answer 3 · answered Dec 10 '13 at 22:12

retrieveURL(retrieve_callback); // no brackets for retrieve_callback

In Javascript, methods are objects too. In this case you are passing the method retrieve_callback as object into retrieveURL. retrieveURL on the other hand does assign the method retrieve_callback as the member "success" to a anonym object which is passed into $.getJSON(). This means that the anonym object does now have a method called "success" which works like retrieve_callback.

After the successful AJAX request, jquery uses the anonym object and calls its success-method like this:

blaObject.success(ajaxResult);

We know that "success" is a copy of "retrieve_callback", so the follwing will happen:

// instead of blaObject.success(ajaxResult);
retrieve_callback(ajaxResult);

Let's explain it in a short way (see se usage of the brackets):

// Get the result of a call of retrieve_callback() and pass it to retrieveURL.
retrieveURL(retrieve_callback());

// Pass the method retrieve_callback itself  retrieveURL.
retrieveURL(retrieve_callback);

What is wrong with my AJAX code

3 Answers3