CODEWITHSUNDEEP
jquerymysqlperlautocomplete
learner
learner

Reputation: 1975

Why does my jQuery Autocomplete code fail?

I am a total jQuery noob, and need to create a form that uses jQuery Autocomplete. Rather than starting on my bigger project, I wanted to follow along and complete the example here, where the point of the exercise is to pull your autocomplete data from a MySQL table (local to my machine, in this case). My JS and HTML code is:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<!-- Here is the jQuery code -->
<script>
$(function() {

        $('#abbrev').val("");

        $("#state").autocomplete({
            source: "states.pl",
            minLength: 2,
            select: function(event, ui) {
                $('#state_id').val(ui.item.id);
                $('#abbrev').val(ui.item.abbrev);
            }
        });

    });
</script>

<!-- The HTML is simplistic for the example: -->
<form  method="post">
<fieldset>
<legend>jQuery UI Autocomplete Example - PHP Backend</legend>
<p>Start typing the name of a state or territory of the United States</p>
<p class="ui-widget"><label for="state">State (abbreviation in separate field): </label>
<input type="text" id="state"  name="state" /> <input readonly="readonly" type="text"   id="abbrev" name="abbrev" maxlength="2" size="2"/></p>
<input type="hidden" id="state_id" name="state_id" />
<p><input type="submit" name="submit" value="Submit" /></p>
</fieldset>
</form>
<script>
$("#autocompleteForm").submit(function(){
$("#submitted").html("State: " + $("#state").val() + "<br />State Abbreviation: " +      $("#abbrev").val() + "<br />State ID: " + $("#state_id").val());
return false;
});
</script>

And my Perl script is

#!/usr/local/bin/perl

# PERL MODULES WE WILL BE USING
use CGI;
use DBI;
use DBD::mysql;
use JSON;

# HTTP HEADER
print "Content-type: application/json; charset=iso-8859-1\n\n";

# CONFIG VARIABLES
my $platform = "mysql";
my $database = "us";
my $host = "localhost";
my $port = "3306";
my $tablename = "states";
my $user = "user";
my $pw = "pass";
my $cgi = CGI->new();
my $term = $cgi->param('term');

# DATA SOURCE NAME
$dsn = "dbi:mysql:$database:localhost:3306";
# PERL DBI CONNECT
$connect = DBI->connect($dsn, $user, $pw);

# PREPARE THE QUERY
$query_handle = $connect->prepare(qq{select id, trim(both char(13) from state) AS value,    abbrev FROM states where state like ?;});

# EXECUTE THE QUERY
$query_handle->execute('%'.$term.'%');

# LOOP THROUGH RESULTS
while ( my $row = $query_handle->fetchrow_hashref ){
    push @query_output, $row;
}
# CLOSE THE DATABASE CONNECTION
$connect->disconnect();

# JSON OUTPUT
print JSON::to_json(\@query_output);

I've called the Perl script separately, and I get what seems to be correctly formatted results (i.e. a list of states and abbreviations). However, when I go to run the example I get no Autocomplete results. What am I doing wrong? states.pl is in the same folder, so I believe that my script is being called by the HTML, but I don't know that it's giving the response that the jQuery is expecting.

Upvotes: 0

Views: 787

Answers (3)

learner
learner

Reputation: 1975

I'm posting this in case anyone else is as frustrated as I was. I finally figured out that the solution was to specify the ID within the hash ref returned by the perl script, so that what is passed in JSON format to the JS code is actually an array of strings.

while ( my $row = $query_handle->fetchrow_hashref ){
    push @query_output, $row->{'id'};
}

As always, debugging is never satisfying. However, I found Chrome's debug tool to be incredibly useful.

Upvotes: 3

Alvin K.
Alvin K.

Reputation: 4379

If I was debugging it, I'd split the problem into two parts

  1. With JS, try source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"] to check that the frontend is working.
  2. Then switch to source: 'http://URL/states.pl' - use the full URI and turn on the debug mode of your browser (check if data is being received from server)

Upvotes: 0

Thomas
Thomas

Reputation: 1420

If the autocomplete is not working but the perl script is working in standalone, it's probably that your perl script is not called by the "source: 'states.pl'" directive.

Did you try to use a developper plugin in your browser to watch the exchange between client and server ? Use chrome or firefox.

And another remark : you are loading version 1 of jquery and jquery UI. You should load last version 1.6.4 for jquery and 1.8.16 for jquery UI.

Rgds

Upvotes: 1

Related Questions