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

how to get ajax response on click of an a href?

 
Ranch Hand
Posts: 2930
13
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Report post to moderator
I want to call ajax and get more information about a product by sending productId through a href click .Below is my JSP page:




How to use ajax to send product Id parameter and get the response. I am using Spring.

Thanks
 
Sheriff
Posts: 67748
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:
  • Report post to moderator
Establish a click handler for the click event of the anchor tag. Be sure to stop the default action of the event (usually by returning false as the result of the handler).
 
Monica Shiralkar
Ranch Hand
Posts: 2930
13
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Report post to moderator
Thanks. I am using Spring. I read that Spring 3 provides first-class Ajax support with JSON as part of the Spring MVC module. I am checking on this too whether its even more easier to use AJAX with spring 3.
 
Bear Bibeault
Sheriff
Posts: 67748
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:
  • Report post to moderator
Spring may help you settling up the server-side code to respond to Ajax requests, but the client-side code will be the same regardless of what is being used on the server. Spring will play not part there.

It's highly recommended to use jQuery to do your event handling and Ajax in an easy and cross-browser manner.
 
Monica Shiralkar
Ranch Hand
Posts: 2930
13
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Report post to moderator

Spring may help you settling up the server-side code to respond to Ajax requests, but the client-side code will be the same regardless of what is being used on the server. Spring will play not part there.

It's highly recommended to use jQuery to do your event handling and Ajax in an easy and cross-browser manner.



Everything is to be done on Client side only. There is not much difference on the server side.On internet I saw examples on "Using Ajax in struts","Using Ajax in Spring" etc whereas most of the thing has to be rather done on the client side only.

Thanks.
 
Saloon Keeper
Posts: 27856
196
Android Eclipse IDE Tomcat Server Redhat Java Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Report post to moderator

Monica. Shiralkar wrote:

Everything is to be done on Client side only. There is not much difference on the server side.On internet I saw examples on "Using Ajax in struts","Using Ajax in Spring" etc whereas most of the thing has to be rather done on the client side only.



That is correct. A client-side Javascript support package such as jQuery can make coding AJAX requests easier - plus it smooths out the warts between different brands and versions of clients. But AJAX is really mainly about having a page do a HTTP request and accepting/processing the response using logic on the page. For example, to partially re-render a page with updated data values. That's the difference between it and a stand-alone HTTP request, where the client (browser) itself sends a request and the client itself receives the response, which it then uses to render a whole new page.
 
Monica Shiralkar
Ranch Hand
Posts: 2930
13
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Report post to moderator
I created a request but the issue I am facing is how to pass the correct Product.id as a parameter to the getJSON AJAX request:


 
Bear Bibeault
Sheriff
Posts: 67748
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:
  • Report post to moderator
The documnetation for the $.getJSON() method is here. As you can see, data is passed as the second parameter.

And "'prdct"? Come on, what's wrong with product? Needless abbreviation is not professional.
 
Monica Shiralkar
Ranch Hand
Posts: 2930
13
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Report post to moderator
I am experiencing an issue and trying to understand whether it is Jquery-Ajax issue or Spring Issue.

On clicking the "More Info" button (I replaced a href with button), nothing happens. In the chrome debugger I see message "http://localhost:8080/MyShoppingCart/getAjaxProductInfo.htm 404 (Not Found)". This is the controller which is supposed to serve the AJAX request. On the console I had seen message "INFO: Mapped URL path [/getAjaxProductInfo.htm] onto handler 'myAjaxController'", so the resource is there but still unavailable.

Below is the code which is making the ajax call :



Another thing I tried to check whether the resource is there or not is tried to hit url directly.Hitting url http://localhost:8080/MyShoppingCart/getAjaxProductInfo.htm directly is expected to give error that it is not GET request and POST, and as expected it gives message saying "HTTP Status 405 - Request method 'GET' not supported" which means the resource is there but still unavailable to ajax request for some reason.
 
Bear Bibeault
Sheriff
Posts: 67748
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:
  • Report post to moderator
Your URL is malformed. Firstly, it should not have the protocol or host/port portion, so lose the "http://localhost:8080" part.

Secondly, your URL should be server-relative such that it starts with the context path of your application. How to do this properly is discussed in the JspFaq under the ResourceUrlProblems heading.
 
Bear Bibeault
Sheriff
Posts: 67748
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:
  • Report post to moderator
And lastly, why are your mappings ending with ".htm"? Bad idea.
 
Monica Shiralkar
Ranch Hand
Posts: 2930
13
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Report post to moderator

Your URL is malformed. Firstly, it should not have the protocol or host/port portion, so lose the "http://localhost:8080" part.

Secondly, your URL should be server-relative such that it starts with the context path of your application. How to do this properly is discussed in the JspFaq under the ResourceUrlProblems heading.



According to the information in FAQ, I changed my ajaxcontroller mapping to @RequestMapping(value = "${pageContext.request.contextPath}/getAjaxProductInfo.htm", method = RequestMethod.POST) and also the same way in the jquery request. However in the chrome debugger I can see error message "POST http://localhost:8080/MyShoppingCart/getAjaxProductInfo 404 (Not Found)"





The code from Spring controller:



@Controller
public class MyAjaxController {

@RequestMapping(value = "${pageContext.request.contextPath}/getAjaxProductInfo", method = RequestMethod.POST)
public @ResponseBody Product getProductMoreInfo(@RequestParam("productId") String productId) {






And lastly, why are your mappings ending with ".htm"? Bad idea.



Mappings are ending with .htm because I have specified the below in web.xml. Is there anything wrong with this?





It appears the current problem is on the Spring side. (Jquery code written may be wrong but I think this current error message will go after correcting the spring code.


 
Monica Shiralkar
Ranch Hand
Posts: 2930
13
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Report post to moderator
The error message has changed now. The message is "406 (not Acceptable)"

Ajax Controller class



The jquery code:


 
Bear Bibeault
Sheriff
Posts: 67748
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:
  • Report post to moderator
We can not guess why your server-side code would return a 406. Check with the owner of the API.

Usually a 406 means that you asked for a return type that the server doesn't allow (for example, asking for XML from a JSON-only API).

(And .htm is a bad idea because it fools things into thinking it's static HTML. This is less of a problem today than it used to be, but could still result in odd caching issues. Why use it? There is likely no good reason.)
 
Monica Shiralkar
Ranch Hand
Posts: 2930
13
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Report post to moderator

And .htm is a bad idea because it fools things into thinking it's static HTML. This is less of a problem today than it used to be, but could still result in odd caching issues. Why use it?



When I had removed .htm from the url in jquery request and in the server side code, I had got the error "404 (Not Found) "

Also on using ${pageContext.request.contextPath}/getAjaxProductInfo I had received the error "404 (Not Found) "


I am thinking whether there is a way to check first that the jquery request is correctly formed and then I can go on to verify and correct the server side code or I will have to keep checking both the jquery code and spring code to make sure where the issue is.
 
Bear Bibeault
Sheriff
Posts: 67748
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:
  • Report post to moderator
Well, you need to verify that mapping is correct. A 404 means that it's not.

 
Monica Shiralkar
Ranch Hand
Posts: 2930
13
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Report post to moderator
Strange thing is that in the same code if :

I use .htm -> It gives 406 (Not acceptable) It recognizes the url but not acceptable due to incorrect request.
I remove .htm -> It give 404 (Not Found) It does not recognize the request.


At this stage it appears to be issue with the Spring code which is not accepting the simple POST request.
 
Bear Bibeault
Sheriff
Posts: 67748
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:
  • Report post to moderator
The 404 likely means that the mapping is not matching the URL.

As you have opened a new topic on this issue, this one has been closed.
 
Surfs up space ponies, I'm making gravy without this lumpy, tiny ad:
a bit of art, as a gift, the permaculture playing cards
https://gardener-gift.com
    Bookmark Topic Watch Topic
  • New Topic