CODEWITHSUNDEEP
ajaxasp.net-mvcfullcalendar
tcode
tcode

Reputation: 5105

MVC Ajax Call Fails After Initial Call

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.

Upvotes: 0

Views: 343

Answers (2)

Jamie Dunstan
Jamie Dunstan

Reputation: 3765

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);
    }
});

Upvotes: 2

kishan Thakar
kishan Thakar

Reputation: 111

Is this script inside your partial? try to move this scrpt in the partial where it will get refresh after your ajax call.

Upvotes: 0

Related Questions