• 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

jQuery and JSP

 
Ranch Hand
Posts: 169
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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).

 
Sheriff
Posts: 7135
1360
IntelliJ IDE jQuery Eclipse IDE Postgres Database Tomcat Server Chrome Google App Engine
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
 
forums UseR
Ranch Hand
Posts: 169
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Likes 2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
 
forums UseR
Ranch Hand
Posts: 169
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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.




 
Greenhorn
Posts: 24
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
A great place to learn how to use jquery.
click here

 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
What data do you need to return in the response? Raw data? A pre-formatted table? Other?
 
forums UseR
Ranch Hand
Posts: 169
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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
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 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
Posts: 169
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Posts: 169
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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?
 
Ranch Hand
Posts: 15304
6
Mac OS X IntelliJ IDE Chrome
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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>).

 
Ranch Hand
Posts: 426
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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!

 
forums UseR
Ranch Hand
Posts: 169
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
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
The jQuery code you need has already been posted.
 
forums UseR
Ranch Hand
Posts: 169
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
$('#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
Ranch Hand
Posts: 15304
6
Mac OS X IntelliJ IDE Chrome
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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
Posts: 169
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Ranch Hand
Posts: 15304
6
Mac OS X IntelliJ IDE Chrome
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Why are you not using jQuery to establish the handler? If you are going to use jQuery, use jQuery.
 
Gregg Bolinger
Ranch Hand
Posts: 15304
6
Mac OS X IntelliJ IDE Chrome
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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
Posts: 169
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Still the page gets refreshed.

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

I'll look into AJAX, post examples...
 
forums UseR
Ranch Hand
Posts: 169
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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
Ranch Hand
Posts: 15304
6
Mac OS X IntelliJ IDE Chrome
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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
Posts: 169
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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
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
Establishing a click handler:
reply
    Bookmark Topic Watch Topic
  • New Topic