1

I have a simple JQuery function which calls my Spring MVC controller:

function createDatabaseRecord() {
    if (isFormValid()) {
        $.getJSON(
                "${pageContext.servletContext.contextPath}${databaseConfigUrl}",
                {name:$('#idName').val(),
                    databaseName:$('#idDatabaseName').val(),
                    hostName:$('#idHostName').val(),
                    username:$('#idUsername').val(),
                    password:$('#idPassword').val()},
                function (data) {
                    var html = '<span>' + data + '</span>';
                    $('#idMessage').html(html);
                }
        );
    }
}

The function is invoked when I click the button, everything is fine. The problem is that this line: $('#idMessage').html(html); does not work as expected. I have a <div> element inside the same JSP page.

<div id="idMessage">
</div>

My Spring controller method which is invoked by that function:

@RequestMapping(value = DATABASE_CONFIG_RECORD_MAPPING, method = RequestMethod.GET)
public
@ResponseBody
String createDatabaseConfiguration(@RequestParam(value = "name", required = true) String name,
                                   @RequestParam(value = "databaseName", required = true) String databaseName,
                                   @RequestParam(value = "hostName", required = true) String hostName,
                                   @RequestParam(value = "username", required = true) String username,
                                   @RequestParam(value = "password", required = true) String password) {
    try {
        DatabaseConfig config = new DatabaseConfig();
        config.setName(name);
        config.setDatabaseName(databaseName);
        config.setHostName(hostName);
        config.setUsername(username);
        config.setPassword(password);
        configService.save(config);
    } catch (Exception ex) {
        LOGGER.error("Exception while create database configuration record.", ex);
        return "Error occurred while creating database configuration record: " + ex.getMessage();
    }
    return "Database configuration record successfully created.";
}

I can see in the FireBug that response came to me:

enter image description here. This is the message: Database configuration record successfully created. I expect to be show in that <div> element, but it is not displayed. Does someone know where might be the problem? If you need some more code, please ask.

1
  • If you console.log(data); before setting the the html, what does it return? Oct 26, 2012 at 14:19

2 Answers 2

1

Your response is not in JSON format.

Try this snippet in your controller:

return Collections.singletonMap("result", "Database configuration record successfully created");

And use it in javascript like this:

var html = '<span>' + data.result + '</span>';
0
1

I'm definitely not an expert in Java (though it looks ok) but think your problem comes from the fact that you're using jQuery's getJSON method but your view is just returning plain text.

You'll need to either convert your response to JSON or switch to a more manual AJAX request using $.get or $.ajax instead.

2
  • If I change getJSON to ajax, I am getting: NetworkError: 400 Bad Request. This is not working. Oct 26, 2012 at 14:30
  • My apologies. I originally had just $.ajax but that requires more options to control it. I added in using just $.get as an alternative. The jQuery AJAX documentation has all the information you'll need to choose which method you should call.
    – Joshua
    Oct 26, 2012 at 14:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.