Forum:

HTML Pages with CSS and JavaScript

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

Ranch Hand

Posts: 2969

posted 10 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I want to call ajax and get more information about a product by sending productId through a href click .Below is my JSP page:

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Welcome To The World Of Online Shopping</title>
         <link href="styleslayout.css" rel="stylesheet" type="text/css">
    </head>
    <body>
      <div id="header">Welcome To The World Of Online Shopping</div>
   <div id="left-menu">
    <jsp:include page="leftMenu.jsp"/>
      </div>
    <div id="content">
   <table border="1" align="center" >
           <tr> <th>Products</th> </tr>
                    
                <c:forEach items="${productSet}" var="product">
                         <tr>            
                        <td>${product.id}</td>
                        <td>${product.name}</td>  
                        <td><a href="http://localhost:8080/MyShoppingCart/getProducts.html?value=${product.id}">More Info</a></td> 
                        
                    </tr>
                </c:forEach>
        </table>
        </div>
        <div id="footer">Footer</div>
   
    </body>
</html>

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

Thanks

Bear Bibeault

Sheriff

Posts: 67756

173

I like...

posted 10 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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

[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

Monica Shiralkar

Ranch Hand

Posts: 2969

posted 10 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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: 67756

173

I like...

posted 10 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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.

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

Monica Shiralkar

Ranch Hand

Posts: 2969

posted 10 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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.

Tim Holloway

Saloon Keeper

Posts: 28748

211

I like...

posted 10 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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.

Experience keeps a dear School, but Fools will learn in no other.
---
Benjamin Franklin - Postal official and Weather observer

Monica Shiralkar

Ranch Hand

Posts: 2969

posted 10 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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:

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Welcome To The World Of Online Shopping</title>
         <link href="styleslayout.css" rel="stylesheet" type="text/css">
         
          <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  
      <script type="text/javascript" language="javascript">
         $(document).ready(function() {
            $("#productID").click(function(event){
               $.getJSON('http://localhost:8080/MyShoppingCart/myAJAXController.html?productId', function(prdct) {
                  $('#stage').html('<p> Name: ' + prdct.price + '</p>');
                  $('#stage').append('<p>Age : ' + prdct.description+ '</p>');
                  
               });
            });
         });
      </script>
         
    </head>
    <body>
   
   
      <div id="header">Welcome To The World Of Online Shopping</div>
   <div id="left-menu">
   
    <jsp:include page="leftMenu.jsp"/>
    
    </div>
   
    <div id="content">
  
       
        <table border="1" align="center" >
           <tr> <th>Products</th> </tr>
                    
                <c:forEach items="${productSet}" var="product">
                         <tr>            
                        <td>${product.id}</td><td>${product.name}</td>  <td id="productID">
<a href="http://localhost:8080/MyShoppingCart/myAJAXController.html?value=${product.id}">More Info</a></td> 
                        
                    </tr>
                </c:forEach>
        </table>
    </div>
          
      <div id="stage" style="background-color:#cc0;">
         
      </div>
       
        <div id="footer">Footer</div>
   
    </body>
</html>

Bear Bibeault

Sheriff

Posts: 67756

173

I like...

posted 10 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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.

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

Monica Shiralkar

Ranch Hand

Posts: 2969

posted 10 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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 :

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Welcome To The World Of Online Shopping</title>
         <link href="styleslayout.css" rel="stylesheet" type="text/css">
         
          <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  
           <script>
$(document).ready(function(){
    $("button").click(function(){
        $.post("http://localhost:8080/MyShoppingCart/getAjaxProductInfo.htm",
        {
          productId: "1"
         
        },
        function(data,status){
            alert("Data: " + data + "\nStatus: " + status);
            $('#stage').html('<p> Price: ' + product.price + '</p>');
            $('#stage').append('<p>Description : ' + product.description+ '</p>');
        });
    });
});
</script>
    
         
    </head>
    <body>
   
   
      <div id="header">Welcome To The World Of Online Shopping</div>
   <div id="left-menu">
   
    <jsp:include page="leftMenu.jsp"/>
    
    </div>
   
    <div id="content">
  
       
        <table border="1" align="center" >
           <tr> <th>Products</th> </tr>
                    
                <c:forEach items="${productSet}" var="product">
                         <tr>            
                        <td>${product.id}</td><td>${product.name}</td>    
           <td>
            <button>More Info</button>
            </td>
                    </tr>
                </c:forEach>
        </table>
    </div>
          
      <div id="stage" style="background-color:#cc0;">
         
      </div>
       
        <div id="footer">Footer</div>
   
    </body>
</html>

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: 67756

173

I like...

posted 10 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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.

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

Bear Bibeault

Sheriff

Posts: 67756

173

I like...

posted 10 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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

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

Monica Shiralkar

Ranch Hand

Posts: 2969

posted 10 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Welcome To The World Of Online Shopping</title>
         <link href="styleslayout.css" rel="stylesheet" type="text/css">
         
          <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  
           <script>
$(document).ready(function(){
    $("button").click(function(){
        $.post("${pageContext.request.contextPath}/getAjaxProductInfo.htm",
        {
          productId: "1"
              
         
        },
        function(data,status){
            alert("Data: " + data + "\nStatus: " + status);
            $('#stage').html('<p> Price: ' + product.price + '</p>');
            $('#stage').append('<p>Description : ' + product.description+ '</p>');
        });
    });
});
</script>
    
         
    </head>
    <body>
   
   
      <div id="header">Welcome To The World Of Online Shopping</div>
   <div id="left-menu">
   
    <jsp:include page="leftMenu.jsp"/>
    
    </div>
   
    <div id="content">
  
       
        <table border="1" align="center" >
           <tr> <th>Products</th> </tr>
                    
                <c:forEach items="${productSet}" var="product">
                         <tr>            
                        <td>${product.id}</td><td>${product.name}</td>    
           <td>
            <button>More Info</button>
            </td>
                    </tr>
                </c:forEach>
        </table>
    </div>
          
      <div id="stage" style="background-color:#cc0;">
         
      </div>
       
        <div id="footer">Footer</div>
   
    </body>
</html>

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: 2969

posted 10 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

The error message has changed now. The message is "406 (not Acceptable)"

Ajax Controller class

The jquery code:

Bear Bibeault

Sheriff

Posts: 67756

173

I like...

posted 10 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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

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

Monica Shiralkar

Ranch Hand

Posts: 2969

posted 10 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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: 67756

173

I like...

posted 10 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Well, you need to verify that mapping is correct. A 404 means that it's not.

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

Monica Shiralkar

Ranch Hand

Posts: 2969

posted 10 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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: 67756

173

I like...

posted 10 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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.

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