Javascript Array created from Ajax Request

Question

I am trying to populate an array (for use with jquery-ui element) using an Ajax request which I am not very familiar with. There are two files, selectStudents.php which is what will be viewed and loadStudents.php which is what the Ajax requests.

When I view loadStudents.php, copy the output, and replace the Ajax request with that instead it works perfect, so I am simply doing something wrong with my ajax. Anyone see off hand what it is?

<script>
$(function() {
    var availableTags = new Array();

    new Ajax.Request('includes/loadStudents.php', {

        onSuccess : function(xmlHTTP){
            eval(mlHTTP.responseText);
        }
    }); 

    $( "#tags" ).autocomplete({
        source: availableTags
    });
});
</script>

Thanks!

You look like you are using jQuery, given the $() style, but the Ajax call looks like another library. What libraries are you using? — Orbling
– Orbling, Commented Jun 15, 2011 at 23:20
What library is Ajax.Request from? What is xmlHTTP.responseText? Why do you eval it? The problem is most likely a very common one: The onSuccess callback is executed after the $( "#tags" ).autocomplete(...) call. Ajax is asynchronous. Only access the data you get as response inside the callback. — Felix Kling
– Felix Kling, Commented Jun 15, 2011 at 23:21
I am using the jquery-ui library as well as normal jquery. Is that allowed? — tgrosinger
– tgrosinger, Commented Jun 15, 2011 at 23:35
jQuery UI depends on jQuery. Everything is allowed, it's just a matter of whether it makes sense or not. But Ajax.Request is not jQuery. And given that jQuery provides good Ajax functionalities, the question is why use another library. — Felix Kling
– Felix Kling, Commented Jun 15, 2011 at 23:38

scurker · Accepted Answer · 2011-06-16 00:36:43Z

2

That looks like prototype. If you're using jQuery, an ajax request looks like this:

$.ajax('includes/loadStudents.php', {
  success: function(data) {
    // no need to eval, jQuery handles parsing the json for you
    console.debug(data);
  }
});

See jQuery.ajax for more details.

Additionally using jQuery UI you can let autocomplete handle the ajax for you:

$('#tags').autocomplete({
  source: 'includes/loadStudents.php'
});

See jQuery UI Autocomplete for further usage.

edited Jun 16, 2011 at 0:36

answered Jun 15, 2011 at 23:22

scurker

4,8031 gold badge28 silver badges25 bronze badges

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

5 Comments

tgrosinger Over a year ago

I gave the second option a try but had no luck, and the Autocomplete page does not mention that it will do the ajax. Still just seems to be a normal text box. FYI, the output of includes/loadStudents.php is: availableTags[0]='Doe, Kid';availableTags[1]='Smith, John';

Felix Kling Over a year ago

@ursa: Your script has to return valid JSON.

scurker Over a year ago

You need to be returning a javascript/json encoded array, which would look like ['Doe, Kid', 'Smith, John']. You can do this in PHP by creating a php array and simply use json_encode. If you post what loadStudents.php looks like, folks may be able to provide further help.

tgrosinger Over a year ago

Alright, I have made a bit of progress. loadStudents is now outputting ["Doe, Kid","Smith, John"]. Still no luck with the Autocomplete though. Any more tips?

tgrosinger Over a year ago

No semicolon is needed at the end of the source line. Removing it fixes the problem. Thanks!

Community · Accepted Answer · 2017-05-23 12:12:05Z

Assuming Ajax.Request works, the reason why the array is not set correctly is described in my comment: Ajax is asynchronous. The .autocomplete call is executed before the onSuccess callback is run (hence before the array elements are set).

You could solve this by simply putting the .autocomplete() call inside the function. But it would be much better to solve the problem in a different way:

Don't return JavaScript in your PHP script. Return JSON:

<?php
    $data = array('Doe, Kid', 'Smith, John');
    echo json_encode($data);
?>

Then your JavaScript would look like:

$(function() {
    $.getJSON('includes/loadStudents.php', function(data)
        $( "#tags" ).autocomplete({
            source: data
        });
    });
});

Or as @scurker already mentioned, set the URL as value to source. It is described in the documentation:

Autocomplete can be customized to work with various data sources, by just specifying the source option. A data source can be:

an Array with local data

a String, specifying a URL

a Callback

(...)

When a String is used, the Autocomplete plugin expects that string to point to a URL resource that will return JSON data. It can be on the same host or on a different one (must provide JSONP). The request parameter "term" gets added to that URL. The data itself can be in the same format as the local data described above.

So on order for this to work, you have to return JSON, as shown above.

Collectives™ on Stack Overflow

Javascript Array created from Ajax Request

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related