Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

jquery autocomplete function

Posted on 2013-11-20
10
Medium Priority
?
583 Views
Last Modified: 2013-11-20
Hi,
I am trying to get jquery autocomplete working but I'm having a hard time. I have created what I think to be a very simple example using a server side datasource (Sql Server). After two days of doing this, it seems to me the problem is that the web page will not display the data returned from  my server side script (perl). I am using Firebug on FF to debug this and see no errors.
Here is my code:


    HTML  (I got this from the jquery site under autocomplete examples)
--------------
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script>
$(function() {

    $( "#tags" ).autocomplete({
    source: "http://www.myserver.com/f/getnames2.pl",
    minLength: 2,
    dataType: "JSON"
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" />
</div>
</body>
</html>

Open in new window

--------------------
JSON example returned by the server

[ { "label": "Gleason" }, { "label": "Glenn" }, { "label": "Glenn" }, ]

-------------------

Server side perl script:

use DBI;
use CGI;
use JSON;

my($query)= new CGI;


$term = $query->param('term');

print "Content-type: application/json; \n\n";



my $dbh = DBI->connect('DBI:ODBC:DB', 'user','PW', {PrintError=>0, RaiseError=>0} ) or warn   "Can't connect: $DBI::errstr!";



my $employeename = $dbh->prepare("SELECT szLastName AS value from Associates where szLastname LIKE '$term%'" );
$employeename->execute();
while (my $aref = $employeename->fetchrow_hashref())
               {
				push @agentnames,$aref;
				}
	
$employeename->finish;

print JSON::to_json(\@agentnames);

Open in new window



Firebug gives me a status 200 with the server side script each time I type in a char into the input box. So I know it's firing off. IF I type in the URL to the server side script and give it a term, it returns JSON text (that's how I got the example of JSON text above.
But I can't get the data to appear using the autocomplete function on the input text box.

 

Thanks,
Nacht
0
Comment
Question by:nachtmsk
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
  • 3
10 Comments
 
LVL 44

Accepted Solution

by:
Chris Stanyon earned 1600 total points
ID: 39663562
Couple of things.

The JSON you've posted is invalid - it has an extra trailing comma. It won't work if that's your JSON.

Secondly, you are putting a full domain URL into source - are you trying to access the data across different servers? If so, you need to use JSONP data, not just JSON.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39663594
I use a file instead your script, line 14 :
source: "autocomplete_perl.json",

don't work :
[ { "label": "Gleason" }, { "label": "Glenn" }, { "label": "Glenn" }, ]
work :
[ { "label": "Gleason" }, { "label": "Glenn" }, { "label": "Glenn" } ]
work :
[{ "label":"Gleason"},{"label":"Glenn"},{"label":"Glenn"}]

So be sure to remove the comma at the end.
The spaces between objects are totally useless too
0
 
LVL 1

Author Comment

by:nachtmsk
ID: 39663616
The script I am accessing is on the same machine I have the example HTML on. Someone told me I was supposed to use a full URL.
The extra comma was a mistake I have since fixed. It still isn't working.
This is really driving me nuts.
I can try a path to the script that is no absolute, but I know the script is being fired off, so I don't know what purpose it would serve to access the script a different way. Would it make a difference?
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 44

Expert Comment

by:Chris Stanyon
ID: 39663631
The script may be firing off, but if it's not producing valid JSON, then it won't put the values into your AutoComplete box.

As you're using Firebug, expand the Get request in the Console and check the Response tab to make sure you are getting back the data in the correct format. (Post it here if you need it checking)

The Perl script you've posted doesn't seem to match the JSON you've attached
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39663641
To let your code clear, use a relative path. It will make a difference for other developers.

Could you provide a link to a simple test page?
0
 
LVL 1

Author Comment

by:nachtmsk
ID: 39663808
I'm seeing now that the perlscript I posted actually didn't create the JSON I attached. The JSON was created by an earlier version of the same script. My bad.
I don't see anything in the response tab on Firebug, I guess that's a big red flag huh?

Here is some JSON that I got from running the script in the browser by calling it directly just now.
[{"value":"Zadeh"},{"value":"Zagari"},{"value":"Zaid"},{"value":"Zameryka"},{"value":"Zameryka"},{"value":"Zaret"},{"value":"Zarko"},{"value":"Zhu-Glaser"},{"value":"Zummo"},{"value":"Zundel"}]

I can't post a link to the script without making some changes. But I will do that if I can't figure this out with your help this way.
Thanks very much for your quick responses!
Nacht
0
 
LVL 44

Expert Comment

by:Chris Stanyon
ID: 39663821
Right. If you see nothing in the response tab, then yeah - big red flag - your script isn't receiving a response from your server. Looks like your script is producing proper JSON so that's a good thing.

Make the changes and then post a link and I'll have a look at it (you may solve the problem just by making some changes)
0
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 400 total points
ID: 39663825
Did this Perl script set correctly the header like the previous one? I mean you receive JSON content and not a string.
Are you on the same domain?

Be carefull with useless whitespace you will not be able to see coming after the json data or any carriage return

[{"value":"Zadeh"},{"value":"Zagari"},{"value":"Zaid"},{"value":"Zameryka"},{"value":"Zameryka"},{"value":"Zaret"},{"value":"Zarko"},{"value":"Zhu-Glaser"},{"value":"Zummo"},{"value":"Zundel"}]<<space>><<space>><<space>><<tab>><<carriage return>>
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39663837
The code itself is fine, content too.
work
0
 
LVL 1

Author Comment

by:nachtmsk
ID: 39664645
Thanks for the help  everyone. The problem is solved.
Chris' comment about not putting the entire URL into the source was the issue. Once I put in a local path, everything worked perfectly. I never would have thought of that, at least not for another few days probably.
Thanks!
Nacht
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

704 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question