2014-02-12 24 views
0

我正在使用我的Worklight 6.1應用程序觀察一些奇怪的行爲。我有一個頁面(登錄頁面),沒有顯示任何jQuery樣式表效果。頁面確實拉起來,功能上沒問題,但它看起來不像我的其他頁面。Worklight 6.1 - jQuery樣式表不適用於我的某個頁面

這是奇怪的事情..當我看着Worklight設計器中的頁面時,我看到頁面使用jQuery樣式表呈現。但是,當我在預覽模式或設備上運行這個漂亮的按鈕圖標廣告標題(jQuery Mobile)已經消失。

下面是我在做什麼...

我有一個HTML文件中的應用程序有兩個DIV標籤,這是我的兩頁。我有一個適配器,它具有應用了安全測試的受保護過程。我創建了一個自定義登錄處理程序來使用自定義編碼的Java類來驗證我的應用程序。處理程序將首先檢查所請求的資源是否受到保護,如果是,將會(顯示/隱藏)正確的DIV。

應用程序試圖在init方法中調用受保護的資源,因此在啓動時應用程序首先會拋出登錄屏幕。這是我看到我的問題的地方。真奇怪的是,一旦我成功登錄,我就會被引導到另一個頁面,並且該頁面沒問題。這只是登錄頁面顯示不正確。

這是我在挑戰處理程序中的代碼。

customAuthenticatorRealmChallengeHandler.handleChallenge = function(response){ 
var authStatus = response.responseJSON.authStatus; 

if (authStatus == "required"){ 
    $('#addActivity').hide(); 
    $('#AuthBody').show(); 
    $('#passwordInputField').val(''); 
    if (response.responseJSON.errorMessage){ 
     alert(response.responseJSON.errorMessage); 
    } 
} else if (authStatus == "complete"){ 
    $('#AuthBody').hide(); 
    $('#addActivity').show(); 
    customAuthenticatorRealmChallengeHandler.submitSuccess(); 
} 
}; 

這裏是我的HTML

<!DOCTYPE HTML> 
<html> 
     <head> 
      <meta charset="UTF-8"> 
      <title>MobileTAcT</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"> 
      <link rel="shortcut icon" href="images/favicon.png"> 
      <link rel="apple-touch-icon" href="images/apple-touch-icon.png"> 
      <link href="jqueryMobile/jquery.mobile-1.3.1.css" rel="stylesheet"> 
      <link href="jqueryMobile/jquery.mobile.theme-1.3.1.css" rel="stylesheet"> 
      <link href="jqueryMobile/jquery.mobile.structure-1.3.1.css" rel="stylesheet"> 
      <link rel="stylesheet" href="css/MobileTAcT.css"> 
      <script>window.$ = window.jQuery = WLJQ;</script> 
      <script src="jqueryMobile/jquery.mobile-1.3.1.js"></script> 
     </head> 
     <body id="content" style="display: none;"> 
    <div data-role="page" id="addActivity"> 
     <div data-role="header" id="header" data-position="fixed"> 
      <h3>Add Activity</h3> 
     </div> 
     <div data-role="content" style="padding: 50px"> 
      <div class="ui-grid-solo"> 
       <div class="ui-block-a"> 
        <label for="text">*Activity name:</label> <input type="text" 
         name="activtyName" id="activityName"> 
       </div> 

       <div class="ui-block-a"> 
        <label for="text">*Capabilities:</label><select name="capabil" id="capabil"> 

         <option value="option">One</option> 
         <option value="option">TWO</option>  
        </select> 
       </div> 
       <div class="ui-block-a"> 
        <label for="text">*Activity type:</label><select 
         name="activityType" id="activityType"> 
         <option value="option">BLAH</option> 
         <option value="option">YO</option> 

        </select> 
       </div> 
       <div class="ui-block-a"> 
        <label for="text0">MyNumber:<br>Leave field 
         blank 
        </label> <input type="text" name="sID" id="sID"> 
       </div> 
       <div class="ui-block-a"> 
        <label for="text">Customer name:</label><input type="text" 
         name="cName" id="cName"> 
       </div> 
      </div> 
      <hr> 
      <div class="ui-grid-a"> 
       <div class="ui-block-a"> 
        <a href="#addActivity" data-role="button" id="submitBtn">Submit</a> 

       </div> 
       <div class="ui-block-b"> 
        <a href="#mainMenu" data-role="button" id="button3">Cancel</a> 
       </div> 
      </div> 
     </div> 
    </div> 


<div data-role="page" id="AuthBody"> 
     <div data-role="header" id="header1" data-position="fixed"> 
      <h3>Mobile TAcT</h3> 
     </div> 
     <div data-role="content" style="padding: 50px"> 

      <div id="loginForm"> 
        Username:<br/> 
        <input type="text" id="usernameInputField" /><br /> 
        Password:<br/> 
        <input type="password" id="passwordInputField" /><br/>  
        <input type="button" id="loginButton" value="Login" /> 
        <input type="button" id="cancelButton" value="Cancel" /> 
      </div> 

     </div> 
    </div> 


    <script src="js/initOptions.js"></script> 
      <script src="js/MobileTAcT.js"></script> 
      <script src="js/messages.js"></script> 
      <script src="js/CustomAuthenticatorRealmChallengeHandler.js"></script> 
     </body> 
</html> 

這裏是什麼樣子的工作燈工作室。 (尼斯和漂亮)

這是我實際看到的,當我在模擬器或預覽模式下運行它。 (醜和滑動)

UPDATE

所以..我在Chrome加載這一點,看了看一個開發工具。我發現加載頁面時出現錯誤。奇怪..似乎以爲有沒有授權的錯誤

我不得不張貼評論部分的錯誤消息的鏈接,因爲我是一個新手,我只被允許發佈2個鏈接。我無法弄清楚爲什麼這個頁面在加載jQuery樣式表時遇到了問題。 (見註釋中的鏈接)

更新2

我已經發現了一些額外的細節,但我似乎仍不能算出這個。

我將默認頁面(實際上只是一個HTML文件中的DIV標籤)更改爲不同的頁面。我對此感到困惑,但顯然,應用了jQuery Stylesheet的ONLY頁面是DEFAULT頁面。所有其他頁面都可以正常工作,但jQuery樣式表不適用。爲什麼會這樣?我想不通爲什麼...

+0

因此,請添加圖像的鏈接,而不是...? imgur,imageshack,一些服務... –

+0

好主意....剛剛上傳的圖片鏈接! –

+0

打開Chrome開發工具的控制檯,你看到了什麼錯誤? –

回答

2

我現在有我的應用程序工作正常..

下面是解..

在我的應用我最初試圖改變網頁(只是改變顯示在同一個HTML中有不同的DIV),但它並不是使用JQuery樣式表呈現頁面。

$('#NewPage').show(); 
    $('#CurrentPage').hide(); 

我發現如果我用上述代碼取代了我的上面的代碼,它就像預期的那樣工作。我現在能夠從當前頁面轉換到新頁面,並且現在使用JQuery樣式表呈現頁面中的所有元素。

$.mobile.changePage('#NewPage'); 
+0

請將此答案標記爲「已回答」, –

相關問題