Question

我正在观察Worklight 6.1应用程序的一些奇怪行为。我有一个页面（登录页面），没有显示任何jQuery样式表效果。该页面确实拉起并在功能上很好，但它看起来不像我的其他页面。

这是奇怪的事情..当我在Worklight设计器中查看页面时，我看到页面是使用jQuery样式表呈现的。但是，当我在预览模式或设备上运行时，漂亮的按钮图标广告标题（jQuery Mobile）消失了。

这是我正在做的......

我有一个带有两个DIV标签的HTML文件的应用程序，这是我的两个页面。我有一个适配器，它有一个受保护的程序，并应用了安全测试。我已经创建了一个自定义登录处理程序来使用自定义编码的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>

以下是Worklight Studio中的内容。（很漂亮）

这是我在模拟器或预览模式下运行时实际看到的内容。（丑陋而朴素）

更新

所以..我在Chrome中加载了它并看了一下开发人员工具。我看到加载页面时出错。奇怪..似乎认为有一个非授权错误

我必须在评论部分发布错误消息的链接，因为我是新手，我只能发布2个链接。我无法弄清楚为什么这一页加载jQuery样式表时出现问题。（参见评论中的链接）

更新2

我发现了一些额外的细节，但我似乎仍然无法弄清楚这一点。

我将默认页面（实际上只是一个HTML文件中的DIV标记）更改为其他页面。我很困惑为什么会这样，但显然应用了jQuery样式表的唯一页面是DEFAULT页面。所有其他页面在功能上都有效，但未应用jQuery样式表。那为什么会这样？我无法弄清楚为什么......

Answer 1

我现在让我的应用程序正常运行..

这是解决方案..

在我的应用程序中，我最初尝试更改页面（只是更改为在同一HTML中显示不同的DIV），如下所示，但它没有使用JQuery样式表呈现页面。

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

我发现如果我用上面的代码替换了它，它就会按预期工作。我现在能够从当前页面转换到新页面，现在我的页面中的所有元素都使用JQuery样式表进行渲染

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

Worklight 6.1 - jQuery样式表未应用于我的某个页面

1 个答案: