Forum:

Calling a new JSP form a Spring Controller using Ajax

Greenhorn

Posts: 25

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I found this example on the web.

webpage

I am trying to change the JSP to load a new JSP instead of displaying the results on the same jsp. Kind of a JSP in side of a JSP. I am very new to AJAX JQUERY and could use any help I can get. Here is the code I have that is not working

this is my ajax-add-page.jsp

<title>Spring MVC - jQuery Integration Tutorial</title>

</head>
	<body>

<h3>
			Spring MVC - jQuery Integration Tutorial
		</h3>
		<h4>
			AJAX version
		</h4>

Demo 1
		<div style="border: 1px solid #ccc; width: 250px;">
			Add Two Numbers:
			<br />
			<input id="inputNumber1" type="text" size="5">
			+
			<input id="inputNumber2" type="text" size="5">
			<input type="submit" value="Add" onclick="add()" />
			<br />
			Sum:
			<span id="sum">(See the sum here)</span>
		</div>

});

}
</script>
	</body>
</html>

this is my ajax-add-page1.jsp

<title>Spring MVC - jQuery Integration Tutorial</title>

</head>
	<body>

<h3>
			Test New Page
		</h3>
		<br />
		Sum:
		<span id="sum">(See the sum here)</span> function(data){ // data
		contains the result // Assign result to the sum id
		jq("#sum").replaceWith('
		<span id="sum">'+ data + '</span>'); });

</body>
</html>

Bear Bibeault

Sheriff

Posts: 67753

173

I like...

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Todd Smith wrote:I am trying to change the JSP to load a new JSP instead of displaying the results on the same jsp. Kind of a JSP in side of a JSP.

That's not making much sense. If you want to load a new page, you don't use Ajax. If you want to load a fragment into the current page, you use Ajax.

Your description doesn't really say much about what you are trying to accomplish.

[Asking smart questions] [About Bear] [Books by Bear]

HTML 5 (verified skill)
Skill verified by Jeanne Boyarsky

CSS 3 (verified skill)
Skill verified by Jeanne Boyarsky

JavaScript (verified skill)
Skill verified by Jeanne Boyarsky

Todd Smith

Greenhorn

Posts: 25

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I am trying to change the code to keep a listarray of all the values a user entered and there sums and display them in a table. I was thinking I could pass the array to a new JSP that would be included in the input from and use JSTL tags to loop thru and display all the history of the values. I am looking for any input on how to do this but you are right I don;t want to refreash the page every times a user inputs new values. I have attached a image of what I want to do

MyIdea.jpg

Bear Bibeault

Sheriff

Posts: 67753

173

I like...

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Seems like a straightforward instance of using Ajax to hit a JSP (or, more properly, its controller), and stuffing the response into the DOM. What's the issue?

[Asking smart questions] [About Bear] [Books by Bear]

Todd Smith

Greenhorn

Posts: 25

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I don't know how to do it. I am very new a using JQUERY. I understand how to change code in the controller to call a service to store the data in a list array. I just under stand how to pass that array back and display it using ajax.

Todd Smith

Greenhorn

Posts: 25

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

For right now I have been playing with the code to display the Sum Total in a included JSP that I can't seem to get working.

Bear Bibeault

Sheriff

Posts: 67753

173

I like...

posted 13 years ago

1
Number of slices to send:

Optional 'thank-you' note:

Send

Time for an SSCCE. The code you posted above is too large to work with.

[Asking smart questions] [About Bear] [Books by Bear]

Todd Smith

Greenhorn

Posts: 25

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Seem like this should not be that hard. I just need to know how to display the results in an included jsp instead of replacing the DIV tag and displaying the results. I think I need to use some thing like this but it is not working for me

Bear Bibeault

Sheriff

Posts: 67753

173

I like...

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Todd Smith wrote:I just need to know how to display the results in an included jsp instead of replacing the DIV tag and displaying the results.

This is where you are not making any sense. There is no difference between the two things you just stated. You must put the response text somewhere in the DOM. Where do you want it to go?

[Asking smart questions] [About Bear] [Books by Bear]

Bear Bibeault

Sheriff

Posts: 67753

173

I like...

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

P.S. Why are you POSTing to a JSP?

[Asking smart questions] [About Bear] [Books by Bear]

Todd Smith

Greenhorn

Posts: 25

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Bear Bibeault wrote:P.S. Why are you POSTing to a JSP?

I will take any advice I can get on a better way to do this. My thinking was I am going to have alot of JSTL code to spin thru a Array and display all the history I am storying. Every time the user clicks the add button I am passing the 2 input fileds to the controler which is going to call a service to add them together and store all the results in a hash map and I want to display them all back on the same page like my example image shows. Seems like trying to spin thru the array in a replace DIV tag would be messy. I planed on using a hash map so I can even enhance the applciation later and add buttons next to each history total to edit or delete it. What do you think I should do?

Bear Bibeault

Sheriff

Posts: 67753

173

I like...

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Now I'm really confused. First you make it sound like your request will return an HTML fragment generated by a JSP as its response, and now you are talking about arrays of data.

You're going to need to make yourself much clearer as to your intention.

What is being returned as the response text? (Whatever the server has to do in order to generated this response text is irrelevant to the discussion. Let's leave that red herring out of the equation.)

If it's an HTML fragment, you can simply use jQuery's load() method to issue the Ajax request and automatically inject the fragment into the DOM.

If it's data of some sort, what's the format of the data? JSON? XML?

[Asking smart questions] [About Bear] [Books by Bear]

Bear Bibeault

Sheriff

Posts: 67753

173

I like...

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Again, why a POST? All indications is that it should be a GET.

[Asking smart questions] [About Bear] [Books by Bear]

Todd Smith

Greenhorn

Posts: 25

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Bear Bibeault wrote:Again, why a POST? All indications is that it should be a GET.

You are right it should be a get

Todd Smith

Greenhorn

Posts: 25

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

The format of the data is JSON

Todd Smith

Greenhorn

Posts: 25

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

This still does not work. I am not display the jsp

Bear Bibeault

Sheriff

Posts: 67753

173

I like...

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

jq.load('ajax-add-page1.jsp',data);

This is not the correct way to use the .load() method. It's a jQuery method, not a utility function. It must be called on a selector that identifies the element into which the response will be injected.

[Asking smart questions] [About Bear] [Books by Bear]

Todd Smith

Greenhorn

Posts: 25

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Bear Bibeault wrote:

jq.load('ajax-add-page1.jsp',data);

This is not the correct way to use the .load() method. It's a jQuery method, not a utility function. It must be called on a selector that identifies the element into which the response will be injected.

Is this the right way? My .replace works but the load still does not work.

<title>Spring MVC - jQuery Integration Tutorial</title>

</head>
	<body>

<div style="border: 1px solid #ccc; width: 250px;">
			Add Two Numbers:
			<br />
			<input id="inputNumber1" type="text" size="5">
			+
			<input id="inputNumber2" type="text" size="5">
			<input type="submit" value="Add" onclick="add()" />
			<br />
			Sum:
			<span id="sum">(Result will be shown here)</span>
			<br>
			<span id="page">(new page here)</span>
		</div>

jq("#page").load('ajax-add-page.jsp');

jq("#sum").replaceWith('<span id="sum">' + data + '</span>');

});
		});
	}
</script>
	</body>
</html>

Bear Bibeault

Sheriff

Posts: 67753

173

I like...

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

"doesn't work" doesn't tell me anything useful. What is happening?

[Asking smart questions] [About Bear] [Books by Bear]

Todd Smith

Greenhorn

Posts: 25

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Bear Bibeault wrote:"doesn't work" doesn't tell me anything useful. What is happening?

I don't see the other page being inserted in to the tag id="page". I do see my results of the .replace. Here is a screen shot

screen-print.jpg

Bear Bibeault

Sheriff

Posts: 67753

173

I like...

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

The mostly likely cause of that is the response is not being returned correctly. What you have you done to look at the status and body of the response?

[Asking smart questions] [About Bear] [Books by Bear]

Todd Smith

Greenhorn

Posts: 25

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Bear Bibeault wrote:The mostly likely cause of that is the response is not being returned correctly. What you have you done to look at the status and body of the response?

I guess I am not doing any thing to check the response. what should I be doing to check that? Here is my Controller that is being called and it's return

Bear Bibeault

Sheriff

Posts: 67753

173

I like...

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

You're not using a JavaScript debugger?

Download the Firebug plugin for Firefox. All of the other modern browsers have built-in debuggers.

Use the debugger to look at the Ajax request/response.

[Asking smart questions] [About Bear] [Books by Bear]

Todd Smith

Greenhorn

Posts: 25

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Bear Bibeault wrote:You're not using a JavaScript debugger?

Download the Firebug plugin for Firefox. All of the other modern browsers have built-in debuggers.

Use the debugger to look at the Ajax request/response.

Ok I am using firebug I am getting a 404 not Found it can't find my jsp I reference in the .load. I am not to sure what to do. the JSP is in the same folder as my main JSP

Error.jpg

Bear Bibeault

Sheriff

Posts: 67753

173

I like...

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

That obviously means that the URL is malformed. What's your next step?

(Hint: page-relative URLs are death in a web application.)

[Asking smart questions] [About Bear] [Books by Bear]

Todd Smith

Greenhorn

Posts: 25

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Bear Bibeault wrote:That obviously means that the URL is malformed. What's your next step?

(Hint: page-relative URLs are death in a web application.)

I am still stuck. I took a look at your book over the weekend Manning jQuery in Action 2nd Edition. It is a very nice book alot of cool examples. I could not relate any of the examples to what I am trying to do.

Todd Smith

Greenhorn

Posts: 25

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I have tried this and still get a 404 page not found

codes generates this which is not correct

Todd Smith

Greenhorn

Posts: 25

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I also have tried this

Generates this

Bear Bibeault

Sheriff

Posts: 67753

173

I like...

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Stop fiddling with the Ajax and just use the browser's address field to find out what the real URL to the JSP is. If the browser can't access the JSP, neither can Ajax.

[Asking smart questions] [About Bear] [Books by Bear]

Todd Smith

Greenhorn

Posts: 25

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

ok thanks I finally got it working. i am now loading the jsp. I am getting closer. Now I need help getting the data that is passed back from the spring controller loaded on my JQuery .load jsp.

Bear Bibeault

Sheriff

Posts: 67753

173

I like...

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Scriptlets in yor JSP? In 2011? Really? Use the EL to get the context path and stop with the scriptlets. They've been discredited for almost ten years now.

With respect to load(), whatever is returned as the response will be injected into the selected element. It's that simple. So make sure that you have selected the correct element, that the URL you are passing to load() is correct, and that the response contains the expected HTML fragment.

[Asking smart questions] [About Bear] [Books by Bear]

Todd Smith

Greenhorn

Posts: 25

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I still don't understand I guess. My Spring control is returning a Java listarray of objects. I am trying to display that list array I don't see any of my data and i am not seeing any error in firebug here is my code

Here is my First page

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="<%= request.getContextPath() %>/resources/js/jquery/jquery-1.6.2.min.js"
        type="text/javascript"></script>   
		<script type="text/javascript">
	var jq = jQuery.noConflict();
</script>

<title>Spring MVC - jQuery Integration Tutorial</title>

</head>
	<body>

<h3>
			Spring MVC - jQuery Integration Tutorial
		</h3>
		<h4>
			AJAX version
		</h4>
		Demo 1
		<div style="border: 1px solid #ccc; width: 250px;">
			Add Two Numbers:
			<br />
			<input id="inputNumber1" type="text" size="5">
			+
			<input id="inputNumber2" type="text" size="5">
			<input type="submit" value="Add" onclick="add()" />
			<br>
			<span id="page">(new page here)</span>
		</div>

Here is the page from my JQuery .Load

Bear Bibeault

Sheriff

Posts: 67753

173

I like...

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Todd Smith wrote:My Spring control is returning a Java listarray of objects.

No it's not. It can't. An HTTP response can only be text. Is it perhaps returning JSON or some other format? You are going to need to get your data transfer straight before any kind of progrss can be made.

[Asking smart questions] [About Bear] [Books by Bear]

Todd Smith

Greenhorn

Posts: 25

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Bear Bibeault wrote:

Todd Smith wrote:My Spring control is returning a Java listarray of objects.

No it's not. It can't. An HTTP response can only be text. Is it perhaps returning JSON or some other format? You are going to need to get your data transfer straight before any kind of progrss can be made.

You are right I have the @ResponseBody in my Spring Controller and I am passing back JSON. I can see all the objects in FireBug console but I still can't get them displayed on the page.

<title>Spring MVC - jQuery Integration Tutorial</title>

</head>
	<body>

jq("#page").load("${pageContext.request.contextPath}/jsp/ajax-add-page1.jsp");  
                 } 
			);
		});
	}
</script>
	</body>
</html>

Did you see how Paul cut 87% off of his electric heat bill with 82 watts of micro heaters?