I have this JQuery dialog containing a <input> and <table>. The <input> is a filter field for the onload contents of <table>. I've heard JQGrid has this feature but this module isn't an option for me for now.
I tried searching about other solution(s) and come up with AJAX. I am using Spring-Roo for this thread and since AJAX can be a solution I am new to this AJAX thing. Here's the structure of the code of the view without any javascript.
<form:form action="POST" action="form_action" modelAttribute="form">
<div>
<form:input path="filterField" />
<input type="submit" value="Search" />
</div>
<div>
<table>
<c:forEach items="${items}" var="itr">
<tr>
<td>${itr.data}</td>
</tr>
</c:forEach>
</table>
</div>
</form:form>
I am new to JQuery, AJAX, and Spring-Roo. A detailed instruction on this can be done is very much appreciated.
Since this is a very general request, I will try to give you a very general answer.
You will need several things to make an Asynchronous call, and you will need to make several decisions. Understand that AJAX doesn't really mean AJAX anymore, but is a general term now applied to any process by which you make an asynchronous call from a browser-based client to some sort of back-end.
First, you will need to write a method to handle your AJAX request. This is the first decision you must make: What are the request parameters to your service and what is the resulting payload. I am preferential to the RESTful JSON type requests, but a lot of people like XML. For a RESTful JSON version, you can do something like this:
@RequestMapping("/widgets/{id}")
public @ResponseBody Widget getMyWidget(@PathVariable Integer id) {
// ...perform some lookup, idealy in a service layer
Widget myWidget = myService.findWidget(id);
return myWidget;
}
The important parts here are the @ResponseBody and the return myWidget. In Spring, @ResponseBody indicates that the return will be literally copied into the response body. So, for instance, you could return a String that has HTML code, and it is merely copy/pasted into the response. This is opposite of the normal return, which is usually some String name that represents a View. The second bit of PFM (pure friggen magic) is the return of type Wiget. As long as you have the Jackson library in your path, Spring will auto-magically use it to serialize your return to JSON. This takes care of the server side.
On the client-side, you need to call your service on the server. First, ditch the <input type="submit" value="Search" />, and make it a type button instead. Using a submit type will only cause you issues as it will attempt to submit the form, which is NOT asynchronous. Attach a jQuery click handler to the button, and use it's $.ajax() method to call your service. Again, there are LOTS of options, and there is no way I will go through them all. But, the general idea here is to do something like this:
$('#myButton').click(function() {
$.ajax({
url: 'http://myhost/myController/widget/1',
success: function(data) {
// Do something with the widget, like fill a table full of stuff
}
});
});
The $.ajax() call in jQuery has a ton of options, and there are examples all over the place. You will probably also want to handle error responses too...this example only shows handling the success.
That should at least get you started. You will have to investigate all the options and possibilities on your own, as I can't make architectural decisions for your as I don't know your application nor the circumstances involved.