0

jQueryダイアログの問題があります。ユーザーがcalDayContentEntrydivをクリックしたときに、ajaxを利用してダイアログウィンドウにカレンダーコンテンツをレンダリングしたいと思います。次のコードは最初のクリックで機能しますが、ダイアログを閉じた後、そのエントリに対してダイアログを再度表示することができなくなりました。他のエントリも最初は機能しますが、2回クリックしてもダイアログは再び開きません。

これが私が問題を抱えている関連コードです（すべて同じasp.net mvc 3かみそりビュー内にあります）。誰かがこの問題を修正できるいくつかの微調整を持っていますか？

           ...
           <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>
4

3 に答える 3

0

これは有効なステートメントですか？

$currentDialog.dialog("close");

現時点では範囲外だと思います。

たぶん、$（）。readyの前に外部で定義した場合

var $currentDialog;
$().ready(function () {
  ...
于 2012-05-04T23:08:07.300 に答える
0

週末はこの問題について新鮮な視点を加えたと思います。動作するコードは以下のとおりです。基本的に、すべてのエントリにポップアップdivを使用する代わりに、ページの最後に1つのdivを使用しました。そのdivはすべてのダイアログで再利用されます。グローバル変数を使用して、誰かがダイアログの外側をクリックして閉じるときに参照できるようにします。これが他の誰かを助けることを願っています。

           ...
            <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>
于 2012-05-07T16:48:09.180 に答える
0

ダイアログをリセットする必要があります。

contentdiv.dialog("destroy").dialog(....

注：

 var contentdiv = $(entryDiv).next('.leaveRequestPopup');

その場合、contentdivはすでにjQueryオブジェクトであるため、次のように言います。

contentdiv.click(function(){
  //code here
});

再度$（contentdiv）でラップする必要はありません。

この関数を呼び出すとき：

getAndShowDialogContents(this);

jQueryオブジェクトではなく、生のドキュメントオブジェクトを引数として渡します。次を使用します。

getAndShowDialogContents($(this));

現在のjQueryオブジェクトを渡す

于 2012-05-04T23:12:39.570 に答える