File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
The moose likes HTML, CSS and JavaScript and the fly likes jQuery and JSP Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "jQuery and JSP" Watch "jQuery and JSP" New topic
Author

jQuery and JSP

forums UseR
Ranch Hand

Joined: Feb 24, 2009
Posts: 169
Hello,

I am new to jQuery. Can anybody let me know how to use jQuery with JSP? Can anybody post sample code or give design advice.
I have to use JDBC to access MS SQL database. and make the UI more flexible (using JSP, jQuery, Java Beans).

Devaka Cooray
ExamLab Creator
Saloon Keeper

Joined: Jul 29, 2008
Posts: 3164
    
  47

jQuery is a JavaScript library, which has nothing to do with JSPs, except on specific requirements like Ajax calls. If you know how to use jQuery, you can use it on JSPs with no different.


Author of ExamLab ExamLab - a free SCJP / OCPJP exam simulator
What would SCJP exam questions look like? -- Home -- Twitter -- How to Ask a Question
forums UseR
Ranch Hand

Joined: Feb 24, 2009
Posts: 169
Can anybody give me example/sample code/architecture advice, on how to make use of jQuery in my web app that uses JDBC to read MS SQL database.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61413
    
  67

An Ajax request, whether issues by jQuery or not, is like any other request. You can use Servlets, JSP, JDBC or any other technology on the server and the jQuery/Ajax code could care less. All that matters is what's returned as the response.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
forums UseR
Ranch Hand

Joined: Feb 24, 2009
Posts: 169
Bear Bibeault wrote:An Ajax request, whether issues by jQuery or not, is like any other request. You can use Servlets, JSP, JDBC or any other technology on the server and the jQuery/Ajax code could care less. All that matters is what's returned as the response.

Thanks for your response Bear Bibeault. I am reading your book "jQuery in Action". The labs are very nice and complement the theory.

The web app am working on, is just a read only. Searches the table and returns ResultSet (on average 100-150 records).

The difficulty is how/where to start. So far I have a JSP that uses beans to execute JDBC.




Han Jie
Greenhorn

Joined: Sep 24, 2010
Posts: 24
A great place to learn how to use jquery.
click here

Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61413
    
  67

What data do you need to return in the response? Raw data? A pre-formatted table? Other?
forums UseR
Ranch Hand

Joined: Feb 24, 2009
Posts: 169
Bear Bibeault wrote:What data do you need to return in the response? Raw data? A pre-formatted table? Other?

The response, will be an "ArrayList" of Objects (returned from a bean method) which I have to show in a table.
Any suggestions or a better way to accomplish this...
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61413
    
  67

You might consider returning the pre-formatted table and just inject it into the DOM. Why do something on the client that you can easily handle on the server?
forums UseR
Ranch Hand

Joined: Feb 24, 2009
Posts: 169
Bear Bibeault wrote:You might consider returning the pre-formatted table and just inject it into the DOM. Why do something on the client that you can easily handle on the server?

Can you elaborate on "returning pre formatted table and just inject it in to the DOM"

We already have a server side (MVC) solution in place. We would like to make the UI more flexible using jQuery and its plugins.

Is DWR (direct web remoting ) relevant in my situation?
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61413
    
  67

DWR? Why?

You can easily load pre-formatted HTML fragments (including tables) into the DOM with the jQuery load() method.

Let's say that you have a <div> element that will contain the table. You'd write something like:

This would create a request to the controller. The controller would access the model layer to obtain the data necessary to create the table, it would forward to a JSP that would create the HTML fragment for the table, which gets returned as the response (which jQuery injects into the <div>).

Easy as pie.
forums UseR
Ranch Hand

Joined: Feb 24, 2009
Posts: 169
Bear Bibeault wrote:

This would create a request to the controller. The controller would access the model layer to obtain the data necessary to create the table, it would forward to a JSP that would create the HTML fragment for the table, which gets returned as the response (which jQuery injects into the <div>).

This is my controller code

How should I use jQuery above?
Gregg Bolinger
GenRocket Founder
Ranch Hand

Joined: Jul 11, 2001
Posts: 15299
    
    6

srinivas chary wrote:
This is my controller code

How should I use jQuery above?


As Bear already said:
Bear Bibeault wrote:
forward to a JSP that would create the HTML fragment for the table, which gets returned as the response (which jQuery injects into the <div>).


GenRocket - Experts at Building Test Data
Mark Reyes
Ranch Hand

Joined: Jul 09, 2007
Posts: 426
Can anybody give me example/sample code/architecture advice


Hi Srinivas,

I started learning about Ajax in June this year. I learned a lot from this site. Its free so you can freely download them. Examples are in Servlet and JSP so you will be at home in learning them. I think before you start questioning how to use Jquery and updating with DOM, you need to have a basic understanding of how AJAX works. The format on how to send back your data from JSP/Servlets is discussed also there. You can use HTML Fragments/XML/JSON.

Is DWR (direct web remoting ) relevant in my situation?


I used Spring MVC as my backend and I studied how DWR comes into the Ajax Feature but I find it a little obtrusive (*that's my opinion*) so I used jquery and sending response from the backend is just a matter of using libraries such as GSON/Spring-JSON if Spring is your case..

As for Jquery, your book Jquery In Action is an excellent one. Be sure to do the lab page.

Plus folks around here are very nice especially the Guru's(Bear,David,Gregg,Eric) so be sure to be back when you have some questions.

See yah!


Sean Clark ---> I love this place!!!
Me ------> I definitely love this place!!!
forums UseR
Ranch Hand

Joined: Feb 24, 2009
Posts: 169
Hi Mark, Gregg, and Bear,

Thanks for your helpful replies. I never did much javascript (except cookie handling, way back).

Here is my application.

A simple JSP takes search input and with the help of controller gets the table results and displays in a different JSP (that uses plain HTML <Table> tags to display the table).

In my context, how should I make use of jQuery (AJAX API) and print the table in the same JSP?
If possible, can you point to code examples...

Thanks a lot!

Srinivas
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61413
    
  67

The jQuery code you need has already been posted.
forums UseR
Ranch Hand

Joined: Feb 24, 2009
Posts: 169
$('#results').load('url?searchTxt&searchFilter');

is actually taking me to the new JSP page after a page refresh


<div id="results">
</div>
</body>

What am I doing wrong above?
Gregg Bolinger
GenRocket Founder
Ranch Hand

Joined: Jul 11, 2001
Posts: 15299
    
    6

srinivas chary wrote:$('#results').load('url?searchTxt&searchFilter');

is actually taking me to the new JSP page after a page refresh


<div id="results">
</div>
</body>

What am I doing wrong above?


Show us the code that triggers the ajax request. The click event, I mean. My guess is that is where the problem lies.
forums UseR
Ranch Hand

Joined: Feb 24, 2009
Posts: 169
I am using a simple form with 2 inputs, and a submit button onClick = "raise()"
function raise(){
$('#results').load('url?searchTxt&searchFilter');
}

Should I be using AJAX, POST or GET ?
Gregg Bolinger
GenRocket Founder
Ranch Hand

Joined: Jul 11, 2001
Posts: 15299
    
    6

srinivas chary wrote:I am using a simple form with 2 inputs, and a submit button onClick = "raise()"
function raise(){
$('#results').load('url?searchTxt&searchFilter');
}

Should I be using AJAX, POST or GET ?


You need to make sure you return false for your on click handler otherwise, the form will submit. This is why you are seeing the page refresh.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61413
    
  67

Why are you not using jQuery to establish the handler? If you are going to use jQuery, use jQuery.
Gregg Bolinger
GenRocket Founder
Ranch Hand

Joined: Jul 11, 2001
Posts: 15299
    
    6

Bear Bibeault wrote:Why are you not using jQuery to establish the handler? If you are going to use jQuery, use jQuery.


I was going to bring that up. But thought 'one thing at a time'.
forums UseR
Ranch Hand

Joined: Feb 24, 2009
Posts: 169
Still the page gets refreshed.

$('#divContainer').load() , does not make AJAX call?

I'll look into AJAX, post examples...
forums UseR
Ranch Hand

Joined: Feb 24, 2009
Posts: 169
Bear Bibeault wrote:Why are you not using jQuery to establish the handler? If you are going to use jQuery, use jQuery.

Can you give an example, on what you just said..,
Gregg Bolinger
GenRocket Founder
Ranch Hand

Joined: Jul 11, 2001
Posts: 15299
    
    6

srinivas chary wrote:Still the page gets refreshed.

$('#divContainer').load() , does not make AJAX call?

I'll look into AJAX, post examples...


Yes, it does. You're not understanding. There's a lot of foundational concepts about how HTML/JavaScript work that I believe you're missing. When you provide an on click handler for something like a link or submit button (something that triggers a page redirect / POST), if you don't want that default behavior to occur, you need to tell your on click hander to return false.



You're trying to walk a bit while you can't crawl all that well. You're going to continue to struggle unless you get some core knowledge about how things work.
forums UseR
Ranch Hand

Joined: Feb 24, 2009
Posts: 169
Bear Bibeault wrote:Why are you not using jQuery to establish the handler? If you are going to use jQuery, use jQuery.

Can you provide an example or code snippet.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61413
    
  67

Establishing a click handler:
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: jQuery and JSP