JQuery Full Calendar with Spring MVC .. Can't call the controller to get JSON object

Question

I am trying to use JQuery Full Calendar along with Spring MVC + Freemarker.

I have made a demo like that.

Target: I need to call the controller to fetch JSON object that contains events to render over the calendar.

Issue: I have the following freemarker that it should go to the controller and get the JSON object to render,but it doesn't go ?!!

Freemarker:

[#ftl /]

<script type="text/javascript">
    $(document).ready(function() {

        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();

        var calendar = $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            selectable: true,
            selectHelper: true,
            select: function(start, end, allDay) {
                var title = prompt('Event Title:');
                if (title) {
                    calendar.fullCalendar('renderEvent',
                    {
                        title: title,
                        start: start,
                        end: end,
                        allDay: allDay
                    },
                            true // make the event "stick"
                            );
                }
                calendar.fullCalendar('unselect');
            },
            editable: true,
            events: [
                {
                    url: '[@spring.url '/vacation/getVacation'/]',
                    type: 'GET',

                    data: {
                        start: 'start',
                        id: 'id',
                        title: 'title'
                    }

                }
            ]
        });

    });

body {
    margin-top: 40px;
    text-align: center;
    font-size: 14px;
    font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
}

#calendar {
    width: 900px;
    margin: 0 auto;
}

The controller:

@RequestMapping(value = "/vacation/getVacation", method = RequestMethod.GET)
    public @ResponseBody   void getVacation(HttpServletResponse response) {
        Map<String, Object> map = new HashMap<String, Object>();
        map.put("id", 111);
        map.put("title", "event1");
        map.put("start", "2011-07-28");
        map.put("url", "http://yahoo.com/");

        // Convert to JSON string.
        String json = new Gson().toJson(map);


        // Write JSON string.
        response.setContentType("application/json");
        response.setCharacterEncoding("UTF-8");
        try {
            response.getWriter().write(json);
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }

Firebug shot :

Answer 1

Finally, I make it work :) I have used the $.getJSON to fetch the json object.

FreeMarker:

   $(document).ready(function() {
            var date = new Date();
            var d = date.getDate();
            var m = date.getMonth();
            var y = date.getFullYear();
          $.getJSON('[@spring.url '/vacation/getVacation'/]', function (data) {
            var calendar = $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                selectable: true,
                selectHelper: true,
                select: function(start, end, allDay) {
                    var title = prompt('Event Title:');
                    if (title) {
                        calendar.fullCalendar('renderEvent',
                        {
                            title: title,
                            start: start,
                            end: end,
                            allDay: allDay
                        },
                                true // make the event "stick"
                                );
                    }
                    calendar.fullCalendar('unselect');
                },
                editable: true,
                events:[data]
            });
         });
        });

Java Controller:

@RequestMapping(value = "/vacation/getVacation", method = RequestMethod.GET)
    public
    @ResponseBody
    String getVacation(HttpServletResponse response) {
        Map<String, Object> map = new HashMap<String, Object>();
        map.put("id", 111);
        map.put("title", "event1");
        map.put("start", "2012-4-15");
        map.put("url", "http://yahoo.com/");

        // Convert to JSON string.
        String json = new Gson().toJson(map);

        // Write JSON string.
        response.setContentType("application/json");
        response.setCharacterEncoding("UTF-8");

        return json;
    }

Answer 2

@RequestMapping(value = "/vacation/getVacation", method = RequestMethod.GET)
    @ResponseBody
    public String getVacation(HttpServletResponse response) {
        Map<String, Object> map = new HashMap<String, Object>();
        map.put("id", 111);
        map.put("title", "event1");
        map.put("start", "2011-07-28");
        map.put("url", "http://yahoo.com/");

        // Convert to JSON string.
        String json = new Gson().toJson(map);


        // Write JSON string.
        response.setContentType("application/json");
        response.setCharacterEncoding("UTF-8");
        return json; //Try simply returning the json
    }

According to spring documentation: The @ResponseBody annotation is similar to @RequestBody. This annotation can be put on a method and indicates that the return type should be written straight to the HTTP response body (and not placed in a Model, or interpreted as a view name).

For example:

@RequestMapping(value = "/something", method = RequestMethod.PUT)
@ResponseBody
public String helloWorld()  {
  return "Hello World";
}

I am not sure if this differs from:

response.getWriter().write(json);

This post discusses the difference and one of the solutions mentions conflicts with freemarker: Does spring mvc have response.write to output to the browser directly?

Also try specifying the dataType expected in your ajax call:

$(document).ready(function () {
     var calendar = $('#calendar').fullCalendar({
         editable: true,
         eventSources: [{
         // your event source
             url: '[@spring.url '/vacation/getVacation'/]', // I was expecting here to call the controller,but nothing is happened !!
             type: 'GET',
             data: {
                 start: 'start',
                 id: 'id',
                 title: 'title,'
             },
             error: function () {
                 alert('there was an error while fetching events!');
             },
             color: 'yellow',
             textColor: 'black',
             dataType: 'json'
         }])
     };)
 };

As suggested I would also run your application in debug mode setting a debug point in the controller to see if the code is getting hit. If it is not analyze the url being used in your request with firebug.

Check the configuration file that spring uses to setup the dispatcher. Normally an InternalResourceViewResolver is registered within this configuration. Here is an example of mine:

<!-- Resolves views selected for rendering by @Controllers to .jsp resources in the /WEB-INF/views directory -->
<beans:bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    <beans:property name="prefix" value="/WEB-INF/views/" />
    <beans:property name="suffix" value=".jsp" />
</beans:bean>

If you find this configuration make sure that it is pointing the area where you are storing your jsp files.

Another thing I just notice from your comment. You said that firebug showed you were trying to hit this url:

:eventSources: [{ // your event source url: '/springway/vacation/getVacation', type: 'GET', data: { start: 'start', id: 'id', title: 'title,' }

I don't like the way that is formatted, specifically it includes the comment, which could render the rest of that line meaningless or be used in the url. I would look at this using the net panel in firebug, which shows the requests going over the wire. This will show you the true url your trying to hit.

I would also edit this line in your js:

url: '[@spring.url '/vacation/getVacation'/]',

to:

url: '/vacation/getVacation',

I am not familiar with @spring.url, but it appears to me it is doing more harm than good at the moment.