jquery - Return ajax response on same jsp -

I have products with addtocart options against each product in productcatalogue.jsp. I want to add product to the car and only one I want to show the car in the page. This is what I have done.

jsp + script

  & lt; Td> & Lt; An id = "cart" href = "addtocart $ {product.id}" & gt; Add to Cart & lt; / A & gt; & Lt; / TD & gt; Type $ ('# cart') (function () {$ .ajax ({url: '/ addtocart {id}', type: 'GET', data: "", success: function (response) {$ ( '#content') .html (feedback);}});}); & Lt; Div id = "content" style = "display: none" & gt; & Lt; H2 & gt; Cart content (s): & lt; / H2 & gt; & Lt; / Div & gt;  

I have added the content of the car in a single java in the same JSP as above.

Controller

  @controller @ session attraction ("cart") public category cart controller {@model attribute ("cart") public Cart Intact () (Return to New Cart); } @RequestMapping ("addtocart {id}") @ResponseBody public string addToCart (@PathVariable ("id") id, @model attribute ("cart") carriage cart, model model) {product product = product service.JetProduct BIID (Id) ; If (product! = Null) {cartline line = new cartline (); Line.setProduct (product); Line.setQuantity (1); If (product.getQuantity ()> 0) {cart.add (line); }} If (product.getQuantity () - 1> = 0) {product.setQuantity (product.getQuantity () - 1); } Else {model.addAttribute ("Message", "Out of Stock!"); Return "error"; } ProductService.updateProduct (Product); Return "productive conduct"; }  

This only gives "productive move" if I remove the reply @ then I have not received any feedback on the desired device. The firebug only shows jsp code in the feedback column, someone can show me how to do this.

Do not attempt to combine two methods of attaching the handler. Execute both actions in the same click handler, defined and attached in javascript.

In HTML, you only need to add each "add to cart" link with a product ID. A data - attribute is ideal.

  & lt; Td> & Lt; A class = "addTocart" href = "#" data-generator = "{product.id}" & gt; Add to Cart & lt; / A & gt; & Lt; / TD & gt;  

Note that the id attribute has been replaced with class = "addTocart" , the following code should handle all such links. Allows you to - as much as you want on your page (pages).

  $ ('AddTocart'). ('Click', function) {event.preventDefault (); $ .ajax ({url: '/ addtocart /' + $ (this) .Data ('generated'), type: 'GET' data type : 'Jason'}). Then (updateCart);});  

You might want to send a quantity as well as productID , so one or more items can be added In each hit,

updateCart will be a function that accepts the Jason-Decode server response and accordingly represents the client-side of the cart.

By defining updateCart in some external area, it will be available to call from anywhere else (other event handlers).