Question

I have a model which, when opened, loads a partial view.

The partial view has a jQuery function. When the modal is opened the jQuery does not run.

As soon as I resize the modal at all, the jQuery is run and the expected results occur.

Here is the code that loads the html and opens the modal

 $(document).ready(function () {
        $("#reschedule").button().click(function () {

                            var url = $("#rescheduleUrl").attr('href');

                            $.ajaxSetup({ cache: false });
                            $.ajax({
                                url: url,
                                success: function (data) {
                                    $("#rescheduleDiv").html(data);
                                    $("#rescheduleDiv").dialog('open');
                                }
                            });
        });
    });

and from the partial view that is loaded, here is the jQuery that I need to run right away.

$('#calendar').fullCalendar({
    theme: true,
    header: {
        left: 'month,agendaWeek,agendaDay',
        center: 'title',
        right: ''
    },
    defaultView: 'agendaWeek',
    editable: false,
    minTime: 5,
    maxTime: 20,
    events: "/ServiceTicket/GetCalendarEvents/",
    allDaySlot: false
});

I have also tried it wrapped in

   $(document).ready(function() {
     ...
   });

with the same result.

any thoughts what I need to do to get this to run right away? I have watched it in firebug and it does run when the modal is re-sized but not until then.

Thanks!

Answer 1

I think you need to wrap the partial view JQuery in a document.ready function as well. This is how we get JQuery to fire in a colorbox modal that is ‘popped’ up from a partial view

 $(document).ready(function () {
$('#calendar').fullCalendar({
    theme: true,
    header: {
        left: 'month,agendaWeek,agendaDay',
        center: 'title',
        right: ''
    },
    defaultView: 'agendaWeek',
    editable: false,
    minTime: 5,
    maxTime: 20,
    events: "/ServiceTicket/GetCalendarEvents/",
    allDaySlot: false
});
});

EDIT

I think reversing the load/show functions in your parent page may solve the issue.

success: function (data) {    
    $("#rescheduleDiv").dialog('open');
    $("#rescheduleDiv").html(data);
 } 

By populating the html before ‘showing’ the dialog, the doc.ready function may not ever be firing along with your event handers until you interact with the dialog. If you show it first, then load the html data, your event handlers show work as expected.