0

メニューボタンのあるメインページが 1 つあります。クリックすると、メインの「コンテンツ」領域が AJAX で変更されます。このページのヘッダーには、適切な Dojo リファレンスがすべて含まれています。
コンテンツ領域にデータを正常に取り込んで表示したため、AJAX が機能することがわかりました。また、AJAX で呼び出しを行う前にデータを正常に表示したため、Dojo Dijit TimeTextBox が機能することもわかりました。

AJAX を使用して呼び出しを行い、TimeTextBox ウィジェットの新しい入力フィールドを取り込もうとすると、それらは通常のテキスト ボックスとしてのみ表示され、TimeTextBox に設定されているという事実を無視しているようです。

この問題を解決する方法を教えてもらえますか?

編集: コードは次のとおりです。

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Admin Page</title>
    <link rel="stylesheet" type="text/css" href="styles/adminPage.css" />
    <link rel="stylesheet" type="text/css" href="styles/adminStyle.css" />
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/resources/dojo.css"> 
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dijit/themes/claro/claro.css">
    <script  
            type="text/javascript" 
            src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js" 
            djConfig="parseOnLoad:true"></script>
    <script type="text/javascript">
        dojo.require("dojo.parser");
        dojo.require("dijit.form.Button");
        dojo.require("dijit.form.TimeTextBox");
    </script>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
        require(["dojo/ready", "dijit/form/TimeTextBox"], 
        function(ready, TimeTextBox){
            ready(function(){
                new TimeTextBox({name: "timeInput", value: new Date(),
                    constraints: {
                        timePattern: 'HH:mm:ss',
                        clickableIncrement: 'T00:15:00',
                        visibleIncrement: 'T00:15:00',
                        visibleRange: 'T01:00:00'
                    }
                }, "timeInput");
            });
        });

        function getPage(page) 
        {
    $.ajax({
        url: "admin"+page+".php",   
        type: "POST",
        cache: false,
        success: function (html) {              
            $('#content').html(html);
                            $('#content').fadeIn('slow');
                            }
    });

        }
    </script>

</head>
<body class="claro">
    <div id="container">
        <div id="header">
            <span class="headerTitle">Lehman Nursery</span>
        </div>
        <div id="content">
            <input type='text' name='date1' id='time1' value='T15:00:00'
    data-dojo-type='dijit.form.TimeTextBox' 
    required='true' />
        </div>
        <div id="menu">
            <a onclick="getPage('Home')">
                <div id="homeButton" class="menuAppearance">
                    <img src="images/icons/home.png"/><br />
                </div>
            </a>
            <a onclick="getPage('Links')">
                <div class="button menuAppearance">
                    <div class="menuTitle"><img src="images/icons/links.png"/><br />Links</div>
                    <div class="description">

                    </div>
                </div>
            </a>
            <a onclick="getPage('Hours')">
                <div class="button menuAppearance">
                    <div class="menuTitle"><img src="images/icons/pictures.png"/><br />Pictures</div>
                    <div class="description">

                    </div>
                </div>
            </a>
            <a onclick=getPage('Events')>
                <div class="button menuAppearance">
                    <div class="menuTitle"><img src="images/icons/events.png"/><br />Events</div>
                    <div class="description">

                    </div>
                </div>
            </a>
            <a onclick=getPage('Feedback')>
                <div class="button menuAppearance">
                    <div class="menuTitle"><img src="images/icons/feedback.png"/><br />Feedback</div>
                    <div class="description">

                    </div>
                </div>
            </a>
        </div>
    </div>
</body>


<form>
    <input type="text" name="date1" id="time1" value="T15:00:00"
    data-dojo-type="dijit/form/TimeTextBox"
    onChange="require(['dojo/dom'], function(dom){dom.byId('val').value=dom.byId('time1').value.toString().replace(/.*1970\s(\S+).*/,'T$1')})"
    required="true" /></form>

^^それが引き込まれているデータです

4

2 に答える 2

0

それらの css ファイルはdijitプルアップされていますか? require最初 (ページが読み込まれるとき) にキャッシュされ、dijitAJAX 経由で s がプルされるときに使用されるようにしたい場合があります。

編集:よくわかりませんが、startup()作成したウィジェットの呼び出しを追加することをお勧めします。

于 2012-04-13T15:16:12.027 に答える
0

あなたが電話するのを忘れているように私には思えます：

dojo.parser.parse();

あなたのajax呼び出しにコンテンツを設定した後。次のようになります。

function getPage(page) 
{
$.ajax({
    url: "admin"+page+".php",   
    type: "POST",
    cache: false,
    success: function (html) {              
        $('#content').html(html);
        dojo.parser.parse();
        $('#content').fadeIn('slow');
    }
});
}

dojo パーサーはそれ自体では実行されません。実行するにはリソースが多すぎるため、コンテンツが変更されるたびに dijit を追加する必要があり、dojo.parser.parse() を呼び出す必要があります。

于 2012-04-13T15:55:20.103 に答える