Fetch data based on input and without refreshing whole page

[Saurabh Pillai]

Find the UI attached.

I have two drop-down boxes and a search button. When clicked on search button, it should fetch data from server and render back the data-grid, which is a simple For-Each loop which iterate over returned data. But I don't want to refresh whole page. And both drop-down boxes should retain their values.

How can I do it? I assume I need to use plain javascript and jQuery. We use both in our project. I can make a server call and fetch the data but how to iterate over it? I can do things like dynamically populating drop down box.

I appreciate step-by-step direction.

Thank you

[Jeanne Boyarsky]

jQuery provides Ajax support which allows you to get data in the background without refreshing the whole page. Scroll down on that page to see some examples.

Give it a shot. See what you get stuck on and post that here. For example:
1) Can you write code that alerts the search criteria? (no Ajax needed for this one)
2) Can you write code that sends that search criteria using Ajax and alerts 'success'?
3) Can you write code that sets the new options?

[Bear Bibeault]

A number of approaches come to mind:

The first two are the basic approaches:

1) Return the pure data (via JSON), and iterate over it in the client, creating the DOM structure of the table from it.

2) If you are already using JSP or some other templating engine on the server, have the response return an already-formatted HTML fragment to inject into the DOM.

A third approach would be the most modern, and a logical extensions of #1 combined with #2:

3) Return the pure data (via JSON), and format it for DOM insertion using a client-side templating engine such as handlebars or mustache.

At this stage of the game, #3 would be my recommended approach.