MVC Ajax Call Fails After Initial Call

Question

Folks

I'm building an ASP.Net MVC 5 web application. It uses JQuery FullCalendar http://fullcalendar.io/ .

A page with the FullCalendar on it is hooked up to a JsonResult method in my Controller which returns and populates the calendar with various events using Json data. When I click on one of the events on the calendar, the eventClick section of the FullCalendar is called, like so.

eventClick: function (calEvent, jsEvent, view) {

                $.ajax({
                    type: "GET",
                    async: false, //This makes the JQuery below wait until $.ajax() call is finished
                    url: '/TimeEntry/UpdateTimeEntryPartial/',
                    data: { id: calEvent.id },
                    error: function () {
                        alert("An error occurred.");
                    },
                    success: function (data) {
                        $("#TimeEntryPartial").html(data);
                    }
                });
}

This makes an Ajax call to a method in my controller which returns a Partial View. The returned Partial contains event details which I can then amend (date, hours etc.) and then perform an update which updates the event details in my database table.

Here is where the problem is. Once I've updated the event details, the data is updated correctly in the database. But when I click on the event again in the calendar (in fact any event), the Ajax call (see above no longer happens). I've put a breakpoint on the method UpdateTimeEntryPartial within my Controller and it never reaches it.

Therefore, to summarise, I can update an event once, but when I try to update it again, the Ajax call does not happen.

I hope this makes sense.

I'd really appreciate any help with this as I've hit a brick wall trying to figure out what is wrong.

Thanks in advance.

Update

The DIV that holds the FullCalendar is not inside the Partial TimeEntryPartial.

<div class="panel-body" id="TimeEntryPartial">
    @Html.Partial("_TimeEntryPartial", Model.TimeEntry)
</div>
<div class="panel-body">
    <!-- FullCalendar Here -->
    <div id="calendar"></div>
</div>

<script>
    $('#calendar').fullCalendar({
    //Full Calendar properties including call to get Json data
    });
</script>

I should also let you know that this problem only occurs in Internet Explorer, not in Google Chrome or Firefox. Very strange.

Is the calendar inside the element TimeEntryPartial? Do you resubscribe to event click? — Andrei
@Andrei Please see my updated question. I'm not sure what resubscribing to event click is? Sorry. Thanks for your help. — tcode
Have you tried adding a cache: false to the ajax options in the eventClick function? api.jquery.com/jQuery.ajax/#options — Jamie Dunstan
@JamieDunstan If I could send you an Xmas present I would! Adding the cache: false to my Ajax declaration fixed my problem. Thanks! — tcode
@tgriffiths you're welcome! I will post this information as an answer - if you can mark it as accepted that would be excellent :) — Jamie Dunstan

Jamie Dunstan Jamie Dunstan · Accepted Answer · 2014-12-19T13:01:30

Change your ajax call to include cache: false as below. This usually resolves issues with Internet Explorer ajax calls! See the documentation here.

$.ajax({
    type: "GET",
    async: false, //This makes the JQuery below wait until $.ajax() call is finished
    cache: false,
    url: '/TimeEntry/UpdateTimeEntryPartial/',
    data: { id: calEvent.id },
    error: function () {
        alert("An error occurred.");
    },
    success: function (data) {
        $("#TimeEntryPartial").html(data);
    }
});

MVC Ajax Call Fails After Initial Call

2 Answers