Question

我有一个带菜单按钮的主页面。单击时，它们会使用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>

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

^^这是被拉入的数据

Answer 1

那些dijit的css文件是否已拉高？您可能希望在开始时（页面加载时）require它们被缓存，并在通过AJAX提取dijit时使用。

编辑：不确定，但可以建议您尝试为您创建的小部件添加startup()调用。

Answer 2

对你来说，就像你要打电话一样：

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（）;

使用AJAX将Dojo Dijit TimeTextBox拉入页面时不起作用

2 个答案: