MVC 3.0 JQUERY Partial page update

Question

I've a JQuery UI Date Picker. Upon selection of the date, the data on graph changes.

The issue is that when I select the date on the date picker, whole page refreshes and data gets populated.

Is there anyway, I can just update the graph which is on tag? Note, upon selection of the date, jquery posts to server and gets the new data for selected date.

I'm using $.ajax({ }); to make a call to the server. I would have thought this will do a trick but it is not the case.

Any help will be much appreciated.

Answer 1

I don`t know the name of your methods, divs, just change accordingly if this helps. Try something as follows:

        $("#DateDiv").datepicker({
        showOtherMonths: true,
        selectOtherMonths: true,
        dateFormat: "yy/mm/dd",
        onSelect: function (dateText, inst)
        {
            UpdateGraph(dateText);
        },
        onChangeMonthYear: function(year, month, inst) 
        { 
            $.ajax({
                async: false,
                cache: false,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                url: "@Url.Action("LoadGraph", "YourController")",
                data:
                {
                    date: new Date(year, month - 1, 1).toString("yyyy/MM/dd")
                },
                success: function (data)
                {
$("#UpdateGraphDataDiv").html(data);
                                   },
                error: function (request, status, error)
                {
                    DisplayErrorMessageBox(ParseErrorFromResponse(request.responseText, "Unknown error"), true);
                }
            });
        }