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!

Answer 1

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.