• 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 Dynamic Population

 
Ranch Hand
Posts: 323
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I'm not really sure of what I want would be called, so I'm having some trouble searching for it.

What I'd like to do is populate a list of java objects. You could then click on each object and have it's properties displayed on the page.

If anyone can point me in the right direction to get started, I'd appreciate it.

Thanks.
 
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
Well Ajax and JavaScript isn't going to know anything about Java objects.

Sounds more like something you need to do on the server-side with JSP.
 
Bai Shen
Ranch Hand
Posts: 323
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Bear Bibeault wrote:Well Ajax and JavaScript isn't going to know anything about Java objects.

Sounds more like something you need to do on the server-side with JSP.



Well, yes, but I want to populate the fields without reloading the page.
 
Author
Posts: 12617
IntelliJ IDE Ruby
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
You're not really providing enough information to allow us to help much--can you be more specific?
 
Bai Shen
Ranch Hand
Posts: 323
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

David Newton wrote:You're not really providing enough information to allow us to help much--can you be more specific?



Okay, let me try this then. Say I have a collection of Car objects. Each Car has attributes describing it(type, num doors, engine size, color, etc).

I want to put up a list of all of the Car types(Mustang, Camero, Challenger, etc). Using a selector, I think?

Also on the page would be a bunch of text fields, one for each attribute. When a user clicks on a Car type in the selector, the text fields would populate with the appropriate data.

Does that make sense?
 
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 can have Ajax call back to the server in order to obtain the field info so that no page refreshing is needed, but any Java inspection of the beans needs to be handled on the server.

Is that heading in the right direction?
 
Bai Shen
Ranch Hand
Posts: 323
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Bear Bibeault wrote:You can have Ajax call back to the server in order to obtain the field info so that no page refreshing is needed, but any Java inspection of the beans needs to be handled on the server.

Is that heading in the right direction?



Yes. I'm just unsure of how to set up all of the Ajax to do the callback and loading.
 
Bai Shen
Ranch Hand
Posts: 323
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I'd prefer to do the list and the fields with Ajax, but I'm okay with just doing the fields through Ajax.
 
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
Well, depending upon what you want to do...

If you want to create HTML fragments on the server (easiest way in my opinion, using the power of JSP), then I'd use jQuery's .load() method to inject the fragment into the appropriate place in the DOM.

If you want to return data to the browser and do all that machinations in script, then I'd return a JSON response with the data and use jQuery's $.getJSON() function.
 
Bai Shen
Ranch Hand
Posts: 323
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I'm not quite sure I understand your JSP suggestion. Can you give me more details?

How would I make the list refresh whenever an item is added on the server?
 
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

Bai Shen wrote:How would I make the list refresh whenever an item is added on the server?


Well, you can't push the change.

The action must be initiated from the client.
 
Bai Shen
Ranch Hand
Posts: 323
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Bear Bibeault wrote:

Bai Shen wrote:How would I make the list refresh whenever an item is added on the server?


Well, you can't push the change.

The action must be initiated from the client.



So do I just poll the server from time to time? I thought Ajax let you set it up to keep a connection open to the server in order to find out when things change?
 
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
Nope.

There's a technology called Comet that uses Ajax to hold open a long connection, but it's really really expensive because it holds precious connections open.

You're bettor off periodically polling.
 
Greenhorn
Posts: 10
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
[Hijack removed. Please ask you own questions in your own topics.]
 
Bai Shen
Ranch Hand
Posts: 323
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Okay, so I made a text selector that populates with a list of my opbjects. Now I was able to call the selected and paste it as text in html. However, I'm not quite sure how to configure this as text boxes for the object fields. And I'm thinking I need to change the code so that I'm just passing the names, and not the entire POJO.

Any suggestions on how to do the population of fields from the object short of writing all the html in the JS function? Bear mentioned JSP, but I'm still not sure how that would work.

 
Bai Shen
Ranch Hand
Posts: 323
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Also, I'm noticing that if you use the keyboard to do your selection, jQuery doesn't seem to recognize that. Am I doing something wrong, or is that expected behavior? Is there way to fix it?
 
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
From your description, I'm still not understanding what you are trying to do.
 
Bai Shen
Ranch Hand
Posts: 323
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Bear Bibeault wrote:From your description, I'm still not understanding what you are trying to do.



I want a selector box(which I got working in the above code) that when I click on the name, it populates a form with the appropriate data.

I think I figured out how to do it with the load command, but for some reason it seems to not work correctly, only occasionally firing off the connection to the server. Currently I replaced this line

with the following line


But I'm not seeing any connections to the servlet. I got one hit, but haven't been able to get to work since.
 
Bai Shen
Ranch Hand
Posts: 323
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I figured out why I wasn't seeing hits to my servlet. IE is caching the page. So once I call .load, it won't load the page again until I close and reopen IE. Is there a way to disable this from the server?
 
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
See the Servlet FAQ.
 
Bai Shen
Ranch Hand
Posts: 323
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Bear Bibeault wrote:See the Servlet FAQ.



That worked, thanks. I wasn't sure as the .load documentation mentions using a random get parameter to prevent the caching issue. But the response settings are a much better way.

http://docs.jquery.com/Ajax/load

As a side note, is anyone else experiencing weirdness with the jQuery docs? The .load page I pulled up is different from the one I was looking at yesterday. And the Ajax doc page keeps timing out on me.
 
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

Bai Shen wrote:I wasn't sure as the .load documentation mentions using a random get parameter to prevent the caching issue. But the response settings are a much better way.


That's a trick that's often used in environments where setting the headers isn't possible.

As a side note, is anyone else experiencing weirdness with the jQuery docs? The .load page I pulled up is different from the one I was looking at yesterday. And the Ajax doc page keeps timing out on me.


I think that they're being updated. (But not too efficiently...)
 
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
P.S. A servlet filter is a great way to set the cache headers on every request.
 
Bai Shen
Ranch Hand
Posts: 323
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Bear Bibeault wrote:That's a trick that's often used in environments where setting the headers isn't possible.



Gotcha.

I think that they're being updated. (But not too efficiently...)



Actually, it seems that they have two different pages. Because I stumbled across the page I'd found yesterday which had more info. So I dunno.

Bear Bibeault wrote:P.S. A servlet filter is a great way to set the cache headers on every request.



I hadn't thought of doing that. I probably should though, as pretty much everything I'm doing is dynamically generated.

I finally got the .load setup working. However, I'm still having two problems with it. The first is that because I'm using .change, the load doesn't occur until I've clicked on a second item. I tried .click instead of .change, but that had it's own issues IIRC. Also, if I use the keyboard to navigate, the change event never gets fired.

So is there a better method than binding on the change event of the selector box?
 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Change only fires if the user changes the value.

You may be better off using blur.

Eric
 
Bai Shen
Ranch Hand
Posts: 323
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Eric Pascarello wrote:Change only fires if the user changes the value.

You may be better off using blur.

Eric



It's not firing when the user changes the value using the keyboard instead of the mouse.

What does blur do?
 
David Newton
Author
Posts: 12617
IntelliJ IDE Ruby
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

The onblur event occurs when an element loses focus either by the pointing device or by tabbing navigation. It may be used with the same elements as onfocus.


Source: http://www.w3.org/TR/REC-html40/interact/scripts.html
 
Bai Shen
Ranch Hand
Posts: 323
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I tried using blur instead of change, but it didn't work at all. Not sure if it was something I did wrong.


Every time I make a change, the load command seems to break. But I'm not getting any errors. Is there a way to determine why the load command is breaking?
 
Bai Shen
Ranch Hand
Posts: 323
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Okay, after loading it in FF instead of IE, I'm getting the following error.



Which is referring to this line of code.



It was working fine previously in my test page, but now it's not. Do I need to change the option:first part to something else?


EDIT: Apparently it's a warning, not an error. My problem was that my url was wrong. But I never saw a 404 error or anything. How can I step through the JS? I installed Firebug, but I can't tell how to use it to debug the JS.
 
David Newton
Author
Posts: 12617
IntelliJ IDE Ruby
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
http://docs.jquery.com/Ajax/load#urldatacallback

Use the callback.
reply
    Bookmark Topic Watch Topic
  • New Topic