2012-04-13 44 views
0

我有一個帶菜單按鈕的主頁面。點擊後,他們用AJAX更改主要「內容」區域。在這個頁面的頭部我有所有適當的Dojo引用。
我知道AJAX的作品,因爲我已經成功拉入內容區域並顯示數據,而且我知道Dojo Dijit TimeTextBox的工作原理,因爲在我使用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> 

^^這是

+0

你能分享你的代碼嗎? – 0xc0de 2012-04-13 15:17:05

+0

代碼存儲在網站中嗎?如果是的話,你能給我一個鏈接嗎? – OammieR 2012-04-13 18:20:20

回答

0

被拉的數據是css文件對於那些dijit小號拉昇?您可能需要在require開頭(當頁面加載時)它們被緩存,並且將在通過AJAX拖動dijit時使用它們。

編輯:不確定,但可以建議您嘗試添加startup()調用您創建的小部件。設置內容我你的Ajax調用後

dojo.parser.parse(); 

+0

他們是,我剛剛添加了代碼,所以你可以看到 – mb595x 2012-04-13 15:36:19

+0

我到底該怎麼做呢? – mb595x 2012-04-13 15:50:30

0

它apears像你對我的forgoetting打電話。它應該是這樣的:

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

道場解析器不會自動執行,實在是太昂貴資源的開發要做到這一點,所以每次的內容變化,所以你添加的dijit你moust調用dojo.parser.parse ();

+0

我添加了它,但它不起作用,但我相信你在正確的軌道上。是否有可能使用解析器_after_我用AJAX加載內容?而不僅僅是最初加載頁面的時間? – mb595x 2012-04-13 16:02:54

+0

是的,這是我正在參考,你應該在內容加載AJAX後使用它,也許我現在不是如何jquery處理「$('#content')。html(html);」但是你應該在html內容設置後解析() – 2012-04-13 16:12:06