0

jqueryダイアログを作成しようとしていますが、使用できません:(これが私のjQueryコードです：

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

});
function createDialog() {

    $("#dialog:ui-dialog").dialog("destroy");
    $("#dialog-form").dialog(
            {
                autoOpen : false,
                height : 475,
                width : 350,
                modal : true,
                buttons : {
                    "submit" : function() {

                        var bValid = true;
                        allFields.removeClass("ui-state-error");
                        postText();
                            $(this).dialog("close");
                        }
                    },
                    cancel : function() {
                        $(this).dialog("close");
                    }
                },
                close : function() {
                    allFields.val("").removeClass("ui-state-error");
                }
            });

    $(".add-org").click(function() {

            $("#dialog-form").dialog("open");
    });
}

ここにhtmlコードがあります：

<link href="<c:url value="/resources/styles/jquery-ui-1.8.21.custom.css"/>"
    rel="stylesheet" type="text/css">
<script type="text/javascript"
    src="<c:url value='/resources/js/jquery-1.7.js'/>"></script>
<script type="text/javascript"
    src="<c:url value='/resources/js/jquery-ui-1.8.21.custom.min.js'/>"></script>
    <script type="text/javascript"
    src="<c:url value='/resources/js/myScript.js'/>"></script>

    <a href="javascript:void(0)" class="add-org">New </a>

<div id="dialog-form" title="Add New ">
    <p class="validateTips">All form fields are required.</p>
    <form>
    ..................
    </form>
</div>

そしてfirebugは言う：

TypeError：$（ "＃dialog：ui-dialog"）。dialogは関数ではありません

$（ "＃dialog：ui-dialog"）。dialog（ "destroy"）;

私のページには、フォームのすべてのフィールドが表示されます。だから私の問題は何ですか？

4

3 に答える 3

3

これを試してください：作業デモ http://jsfiddle.net/kEZkh/

ソースパスが正しいかどうかわからない場合は、次のスクリプトを含めてください。

残りの部分は、デモを自由に試してみてください。それが原因に役立つことを願っています:)

スクリプト

      <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css">


      <link rel="stylesheet" type="text/css" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css">

      <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
      <script type="text/javascript" src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>

コード

$("#forgot").click(function(e){ 
    $("#dialog-form").dialog("open");
    e.preventDefault();
});

$("#dialog-form").dialog({
            modal: true,
            autoOpen: false,
            height: 255,
            width: 300,
            buttons: {
                "Retrieve": function() {
                    document.forms["forgotform"].submit();
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            },
});
​
于 2012-07-25T09:23:50.040 に答える
2

スクリプトファイルが正常にロードされたかどうかをFirebug/DevToolsで確認してください。そうである場合は、これをコンソール（Firebug、DevTools）以上に入力し、他のコードが実行される場所にその行を入力します。

console.debug(jQuery.ui)

が表示されている場合はundefined、jQuery UIがロードされていません（まだ）。すべてが読み込まれる前にコードが実行されるかどうかを確認し、jQuery内に配置し$(document).ready();ます。オブジェクトの場合は、それを調べてdialogプロパティを確認します。

jqueryui.comでカスタムビルドを構成した場合は、ダイアログウィジェットが含まれているかどうかを再確認してください。

于 2012-07-25T09:22:22.213 に答える
0

呼び出しは、コンテンツをラップするコンテナではdestroyなく、ダイアログを作成したときにすでに使用したものと同じ要素で行う必要があります。.ui-dialog

$("#dialog-form").dialog('destroy');

現在のコードは例外をスローしているため、ダイアログを作成することになっている後続の行が呼び出されることはありません。

すでに開いている可能性のあるすべてのダイアログを破棄したい場合、jQueryUIは.ui-dialog-content各コンテンツdivにクラスを手軽に配置します。

$('.ui-dialog-content').dialog('destroy');
于 2012-07-25T09:25:41.837 に答える