0

我有一个带有菜单按钮的主页。单击时，它们会使用 AJAX 更改主要的“内容”区域。在此页面的标题中，我有所有适当的 Dojo 引用。
我知道 AJAX 可以正常工作，因为我已经成功地在内容区域中拉入并显示数据，并且我知道 Dojo Dijit TimeTextBox 可以正常工作，因为我在使用 AJAX 进行任何调用之前已经成功显示了它。

当我尝试使用 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

那些s的css文件dijit被拉起来了吗？您可能希望require在开始时（页面加载时）将它们缓存起来，并在dijit通过 AJAX 拉取 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 回答