Unable to post request using jquery

Question

This is my jsp page

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<script type="text/javascript" src="/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
    var jq = jQuery.noConflict();
    function add()
    {
        alert("inside add");
        jq(function() { 
            alert("inside jq function");
            jq.post("/ajax.htm",
                        {   inputNumber1:  jq("#inputNumber1").val(),
                            inputNumber2:  jq("#inputNumber2").val() },
                            function(data){
                                // data contains the result
                                // Assign result to the sum id
                                jq("#sum").replaceWith('<span id="sum">'+ data + '</span>');
                        });
        });

    }
</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/>
    Sum: <span id="sum">(Result will be shown here)</span>
</div>
</body>
</html>

This is the controller in spring

package com.vaannila.web;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
@RequestMapping("/ajax.htm")
public class AjaxController {

    @RequestMapping(method = RequestMethod.GET)
    public String getAjaxAddPage() {
        System.out.println("inside get ajax add page");
        return "ajax";
    }

    @RequestMapping(method = RequestMethod.POST)
    public @ResponseBody Integer add(@RequestParam(value="inputNumber1", required=true) Integer inputNumber1,
                                @RequestParam(value="inputNumber2", required=true) Integer inputNumber2,
                                Model model) {
        System.out.println("inside post method");
        Integer sum=inputNumber1+inputNumber2;
        return sum;
    }
}

The page is being displayed, but after entering two numbers, when I press add, the function add is not being called.

I only get an alert "inside add", after that nothing is being displayed — elle
@elle - yes, but what's the response status? Firebug should say. Also, if there's a problem, spring will log a message in the server logs — Bozho
@elle - firebug is a must-have tool in the browser that lets you debug javascript. — Bozho

Nikhil Nikhil · Accepted Answer · 2011-04-20T11:15:12

Your problem is that this bit of code

 jq(function() { 

            jq.post("/ajax.htm",
                        {   inputNumber1:  jq("#inputNumber1").val(),
                            inputNumber2:  jq("#inputNumber2").val() },
                            function(data){
                                // data contains the result
                                // Assign result to the sum id
            alert("inside jq function");
                                jq("#sum").replaceWith('<span id="sum">'+ data + '</span>');
                        });
        });

is sort of outside the "add" call. Basically yoru code up there simply tells the add function to register a DOM ready event handler. I think you have kind of mixed a few concepts together. Try this code

 function add()
    {
        alert("inside add");

            alert("inside jq function");
            jq.post("/ajax.htm",
                        {   inputNumber1:  jq("#inputNumber1").val(),
                            inputNumber2:  jq("#inputNumber2").val() },
                            function(data){
                                // data contains the result
                                // Assign result to the sum id
                                jq("#sum").replaceWith('<span id="sum">'+ data + '</span>');
                        });


    }

Update: Try the full blown post implementation that lets you specify an error handler too. Your request might be erroring which would mean your callback won't be called.

 function add()
        {
            alert("inside add");


                jq.ajax({

                             url:"/ajax.htm",
                            success:function(){   inputNumber1:  jq("#inputNumber1").val(),
                                inputNumber2:  jq("#inputNumber2").val() },
                                function(data){
                                    // data contains the result
                                    // Assign result to the sum id
                                    jq("#sum").replaceWith('<span id="sum">'+ data +                    '</span>');
                                               }
                           error:function(jqXHR, textStatus, errorThrown){
                               alert("error");
                               alert(textStatus);
                           }

                       });


    }

Unable to post request using jquery

1 Answers