jQuery fancybox popup issue with fullcalendar event click with MVC

I am using jQuery fullcalendar and jQuery fancybox plugins in my current MVC project, My Issue is that, I want to open fancybox popup on my calendar event click, I able to open the popup by following snippet.

function openFancybox(object)
    {
        $.fancybox({
                    transitionIn: 'elastic',
                    transitionOut: 'elastic',
                    speedIn: 600,
                    speedOut: 200,
                    overlayShow: true,
                    type: 'inline',
                    content: '#dialogPopup',
                    onComplete: function () {
                    }
                });
                return false;
    }

Here, openFancybox is function that called when somone click on calendar event. Now, my issue is that popup comes blank on single click, but when, I again click it opens, Also, I lost all jQuery bindings that, I used for the other controls on the view i.e Dropdown change events, button click events etc.

Following is my snippet for popup div and ajax to fill PartialView data in div

<div id="dialogPopup" class="add-job-block">
</div>


$.get("/Events/LoadData", { id: object.id }, function (data) {
                if (data != undefined && data != "") {
                    $("#dialogPopup").html("");
                    $("#dialogPopup").html(data);
                    //$.uniform.restore();
                    //$(".styled, input:radio, input:checkbox, .dataTables_length select").not('.no-uniform').uniform();
                }
            });

I have also used jQuery uniform plugin for styling the dropdown and other input controls. The complete function snippet is as follows,

function openFancybox()
{
           $.get("/Events/LoadData", { id: object.id }, function (data) {
                    if (data != undefined && data != "") {
                        $("#dialogPopup").html("");
                        $("#dialogPopup").html(data);
                        //$.uniform.restore();
                        //$(".styled, input:radio, input:checkbox, .dataTables_length select").not('.no-uniform').uniform();
                    }
                });


             $.fancybox({            
                        transitionIn: 'elastic',
                        transitionOut: 'elastic',
                        speedIn: 600,
                        speedOut: 200,
                        overlayShow: true,
                        type: 'inline',
                        content: '#dialogPopup',
                        onComplete: function () {
                        }
                    });
                    return false;


}

I am calling function from calendar plugin call i.e.

 var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();
    var calendar = $('#calendar').fullCalendar({
        //theme: true,
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'resourceDay,month,agendaWeek,agendaDay'
        },
        eventClick: updateEvent,
        ignoreTimezone: true,
        disableResizing: false,
        disableDragging: false,
        selectable: true,
        selectHelper: true,
        select: selectDate,
        editable: true,
        resources: "/Calendar/EventsResourceList",
        events: "/Calendar/EventsList",
        eventResize: eventResizedCompleted,
        eventDrop: eventDragCompleted,
        eventAfterRender: function (event, element, view) {
            Date.prototype.formatMMDDYYYY = function () {
                return this.getMonth() +
            "/" + this.getDate() +
            "/" + this.getFullYear();
            }
            var eventDate = new Date(event.start);
            var todaysDate = new Date();
            if (todaysDate.formatMMDDYYYY() === eventDate.formatMMDDYYYY()) {
                setInterval(function () {
                    element.fadeOut(500).delay(300).fadeIn(400);
                }, 2000);
            }

        }
    }); 

function updateEvent(event, element) {
   openFancybox({ id: event.id, jobid: event.JobID });
}

So, My issue is Popup comes on 2 clicks, also, I lost all jQuery bindings from controls, so anyone has any suggestion or tweak or solution or gone through this problem can be helpful to me.

Answers


Need Your Help

Get all user details from facebook event with field expansion

facebook-graph-api facebook-field-expansion

I want to get all the user details from an event using the field expansion.

PHP XML Foreach Error

php xml xml-parsing

I'm getting an error while looping over an element children:

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.