• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

ajax auto-suggest comes as plain text

 
Ranch Hand
Posts: 755
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi all,
I'm newbie to AJAX but managed to understand the basic. I'm trying to implement an auto-suggest and it works almost ok.

I have a text field [search] -the user type some info and the system provides relevant information. Problem is that the return result is not 'click-able', meaning, the result comes as plain text.

Q: how can I have the result in such way the the user can move with the mouse and click the desired one.

Thank you for any pointers; my code looks like this:




[ December 17, 2007: Message edited by: Bear Bibeault ]
 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
So you are returning non-HTML and setting it as the innerHTML of an element?

What would you expect this to do?
 
Peter Primrose
Ranch Hand
Posts: 755
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Sheriff,
I take it from your reply that I'm doing something wrong with reference to the line below and it's very conspicuous

innerHTML=xmlHttp.responseText;

Well...as trivial as it my be, I still don't know what to do? I downloaded a javascript editor and tried to see what options can the var xmlHttp provide...nothing :-(

any idea?
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
You are returning data that is not in HTML format, and you are sticking into the HTML DOM. That's not going to do anything useful. Why did you set up the returning data as non-HTML if that's what you want?
 
Peter Primrose
Ranch Hand
Posts: 755
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Why did you set up the returning data as non-HTML if that's what you want?



I read that in a book and decided to implement the example. I didn't even know that I'm returning the data as non-HTML. The only question is: how do I return the data as HTML?


am I right that the core problem is here?

document.getElementById("as_testinput_xml").innerHTML=xmlHttp.responseText;

 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
You really have three choices:

1) Return XML (which it looks like you are doing) and digest the XML on the client in order to build the appropriate HTML.

2) Return JSON (which is generally considered easier than XML) and digest it on the client in order to buld the appropriate HTML

3) Generate valid HTML on the server and tack it onto the existing HTML.

You are trying to do a combination of (1) and (3). Your server code must match the client code.

So either:
  • Change the server code to return the HTML construct you want
  • Change the client code to match whatever the server is doing
  •  
    Peter Primrose
    Ranch Hand
    Posts: 755
    • Mark post as helpful
    • send pies
      Number of slices to send:
      Optional 'thank-you' note:
    • Quote
    • Report post to moderator
    I learned that once the result arrives it has this format:


    You mentioned in your last reply that I should 'digest the XML on the client in order to build the appropriate HTML'

    so in this line: xmlHttp.responseText has the result, but how do I 'digest' it into xml?
     
    Bear Bibeault
    Sheriff
    Posts: 67746
    173
    Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
    • Mark post as helpful
    • send pies
      Number of slices to send:
      Optional 'thank-you' note:
    • Quote
    • Report post to moderator

    Originally posted by Peter Primrose:
    how do I 'digest' it into xml?


    My advice? Don't.

    There's a complex API to digest XML and it's a pain in the keester. Sometimes you gotta deal with XML, but this isn't one of them.

    Rather I'd recommend changing the servlet to return JSON, or to return fully formatted HTML.

    In fact, I'd recommend adopting a library such as jQuery that makes this sort of thing brainless. For example there's a method to fetch the data from the server in JSON format that automatically digests it for you and delivers the resulting JavaScript construct. This data can be used with DOM manipulation API to create the HTML elements.

    The easiest route is to use a JSP on the server to deliver the fully-formatted HTML and then to use JavaScript to instrument it with the appropriate event handlers to make it act like you want.

    Are you just copying this code from somewhere? It seems like a bit of an advanced exercise for your knowledge level at this point.
     
    Peter Primrose
    Ranch Hand
    Posts: 755
    • Mark post as helpful
    • send pies
      Number of slices to send:
      Optional 'thank-you' note:
    • Quote
    • Report post to moderator
    I'm trying to achieve this.

    the code I'm using is from 'Ajax for dummies' it took me a while to get the stream from the servelt (actually action-I'm using struts) into the jsp. but the book helped me.

    On the jsp I'm a bit lost; I couldn't figure it out how to incorporate the xml result from the 'action' into the javascript- the Autosuggest site is offering. (It also provide a JSON but since I'm not familiar with that - I thought xml will work for me).

    Anyhow, you mentioned that I can construct the html on the servelt (to return fully formatted HTML.) do you think I can create a nicely css-table as the site offer and construct it on the servlet - and then have it back to the jsp?
     
    With a little knowledge, a cast iron skillet is non-stick and lasts a lifetime.
    reply
      Bookmark Topic Watch Topic
    • New Topic