Solved

ASP Json with JQuery UI Autocomplete

Posted on 2013-01-09
9
482 Views
Last Modified: 2013-01-09
Hi Experts,

This issue has been frustrating me for about three hours so could do with a few more opinions on it!

I am using jquery UI autocomplete and would like to use an ASP file which returns JSON content as the source.

The ASP file appears to work fine:
http://mar.sfwebs.co.uk/json/companies.asp

When I copy the data that code generates directly into the javascript, it works fine...however, when I use that pages address as the source it does not. As can be seen in this example:

http://mar.sfwebs.co.uk/demo.asp

I have set up http://mar.sfwebs.co.uk/json/companies.asp to write each line of the output to a text file so that I can see that the javascript is access it, and confirm it all looks as it should.

So...what gives?!

Any help much appreciated!

Thanks,

Dan

---

Code which generates the companies.asp listing:

response.ContentType() = "application/json"

Dim MMb_connMb_STRING
MMb_connMb_STRING = "xxxxxxx"

recCompanies__vterm = Request.QueryString("term")

Dim recCompanies
Dim recCompanies_cmd
Dim recCompanies_numRows

Set recCompanies_cmd = Server.CreateObject ("ADODB.Command")
recCompanies_cmd.ActiveConnection = MMb_connMb_STRING
recCompanies_cmd.CommandText = "SELECT TOP 20 cId, cName FROM dbo.Companies WHERE cName LIKE ? OR cFullName LIKE ?" 
recCompanies_cmd.Prepared = true
recCompanies_cmd.Parameters.Append recCompanies_cmd.CreateParameter("param1", 200, 1, 255, "%" + recCompanies__vterm + "%") ' adVarChar
recCompanies_cmd.Parameters.Append recCompanies_cmd.CreateParameter("param2", 200, 1, 255, "%" + recCompanies__vterm + "%") ' adVarChar


Set recCompanies = recCompanies_cmd.Execute
recCompanies_numRows = 0

start = 0

response.write("[")

DO while NOT recCompanies.EOF 
IF start <> 0 THEN
response.write(",")
END IF 

response.write("{ label: """&(recCompanies.Fields.Item("cName").Value)&""", value: """&(recCompanies.Fields.Item("cId").Value)&"""}")
 
start = 1
recCompanies.MoveNext()
LOOP 
response.write("]")

recCompanies.Close()
Set recCompanies = Nothing

Open in new window

0
Comment
Question by:stressfreewebs
  • 4
  • 3
  • 2
9 Comments
 

Author Comment

by:stressfreewebs
ID: 38759275
PS. begin typing je to get some results in the first box.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 38759330
$( "#tags2" ).autocomplete({

means place the data in the ID tags2.  Your "doesn't work" is just id="tags"  Change the code in your js to  $( "#tags3" ).autocomplete({  then change

<p><strong>Doesn't Work:</strong></p>
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags" />
</div>  

to

<p><strong>Doesn't Work:</strong></p>
<div class="ui-widget">
  <label for="tags3">Tags: </label>
  <input id="tags3" />
</div>  

and see what happens
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 38759335
Probably does not matter here, but if you are doing an xmlhttp post, the page you are posting to needs to be in a different folder then the originating page.
0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 

Author Comment

by:stressfreewebs
ID: 38759353
Hi Padas,

Thank you for taking a look. #tags is still a valid ID so it should work - I have changed it to #tags3 anyway just to see, but it hasn't sorted it.

The file is in a different folder so that should be ok.

Thanks,

Dan
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 38759433
I think I read your question wrong.  The problem you are having is loading from the external file.  Ok you need to load the data somehow.  http://jqueryui.com/autocomplete/#remote-jsonp

For asp and json I also use http://code.google.com/p/aspjson/ for more complex json data
0
 

Author Comment

by:stressfreewebs
ID: 38759456
I was using the second option described in the source field here:

http://api.jqueryui.com/autocomplete/#option-source

Is that not suitable for what I need?
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 38759653
Your error is you DON'T return a VALID json object.

JSON key need to be surrounded with double quotes, example :
[{"label":"Marbank","value":"1"}]
and NOT :
[{label:"Marbank",value:"1"}]

fix this and your code will work!
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38759661
Line 32 :
response.write("{ "label": """&(recCompanies.Fields.Item("cName").Value)&""", "value": """&(recCompanies.Fields.Item("cId").Value)&"""}")
0
 

Author Closing Comment

by:stressfreewebs
ID: 38759673
THANK YOU!

Frustratingly simple, I wish I'd asked sooner!

Dan
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

770 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