Question

Having a jQuery dialog issue. I want to leverage ajax to render calendar content in a dialog window when a person clicks the the calDayContentEntry div. The following code works on the first click, but after closing the dialog I can no longer get the dialog to show again for that entry. Other entries work the first time as well, but secondary clicks will not open the dialog again.

Here is relevant code that I am having the issue with (all within the same asp.net mvc 3 razor view). Does anyone have some tweaks that could fix this issue?

           ...
           <div class="calDayContent">
            @foreach (var content in day.Contents)
            {
                <div class="calDayContentEntry">
                    <input type="hidden" value="@content.Entry.Id" class="hiddenId" />   
                    <div class="@content.DisplayClass">@content.Entry.Hours.ToString() hrs</div>
                </div>
                <div class="leaveRequestPopup"></div>
            }
            </div>
           ...

<script type="text/javascript">
    $().ready(function () {
        $('.calDayContentEntry').click(function () {
            getAndShowDialogContents(this);
        });

        // Register close event for dialog if overlay is clicked
        $('.ui-widget-overlay').live("click", function () {
            //Close the dialog 

            $currentDialog.dialog("close");
        });
    });

    function getAndShowDialogContents(entryDiv) {

        var entryId = $(entryDiv).find('input[type="hidden"]').val();
        var contentdiv = $(entryDiv).next('.leaveRequestPopup');
        var x = $(entryDiv).position().left + jQuery(entryDiv).outerWidth();
        var y = $(entryDiv).position().top - jQuery(document).scrollTop();

        $.ajax(
        {
            type: 'POST',
            url: 'Request/GetCalendarDetails',
            data: { id: entryId },
            success: function (result) {

                $(contentdiv).html(result);

                $(contentdiv).dialog({
                    autoOpen: false,
                    modal: true,
                    title: 'Details',
                    width: 400,
                    height: 300,
                    draggable: false
                });

                $(contentdiv).dialog("option", "position", [x, y]);
                $currentDialog = $(contentdiv).dialog('open');
            }
        });
    }
</script>

Answer 1

I think the weekend added a fresh perspective on the issue. The code that works is below. Basically, instead of using a popup div for every entry, I just used one div at the end of my page. That div is reused for every dialog. I use the global variable so I can refer to it when someone clicks outside the dialog to close it. Hope this helps someone else out.

           ...
            <div class="calDayContent">
            @foreach (var content in day.Contents)
            {
                <div class="calDayContentEntry">
                    <input type="hidden" value="@content.Entry.Id" class="hiddenId" />

                        <div class="@content.DisplayClass">@content.Entry.Hours.ToString() hrs</div>
                </div>
            }
            </div>
            ...
            <div class="leaveRequestPopup"></div>
            ...


<script type="text/javascript">
    $().ready(function () {
        $('.calDayContentEntry').click(function () {
            getAndShowDialogContents(this);
        });

        // Register close event for dialog if overlay is clicked
        $('.ui-widget-overlay').live("click", function () {
            //Close the dialog 

            $currentDialog.dialog("close");
        });

        $currentDialog = $('.leaveRequestPopup').dialog({
            autoOpen: false,
            modal: true,
            title: 'Details',
            width: 400,
            height: 300,
            draggable: false
        });
    });

    function getAndShowDialogContents(entryDiv) {

        var entryId = $(entryDiv).find('input[type="hidden"]').val();
        var x = $(entryDiv).position().left + jQuery(entryDiv).outerWidth();
        var y = $(entryDiv).position().top - jQuery(document).scrollTop();

        $.ajax(
        {
            type: 'POST',
            url: 'Request/GetCalendarDetails',
            data: { id: entryId },
            success: function (result) {

                $currentDialog.html(result);

                $currentDialog.dialog("option", "position", [x, y]);
                $currentDialog.dialog('open');
            }
        });
    }
</script>