I am observing some strange behavior with my Worklight 6.1 application. I have one page (login page), that does not show any jQuery stylesheet effects. The page does pull up and functionally it's fine, but it does not look like any of the rest of my pages.
Here's the odd thing.. When I look at the page in the Worklight designer, I see the page is rendered with the jQuery stylesheet. However, when I run this in preview mode or on a device the pretty button icons ad header (jQuery Mobile) are gone.
Here is what I am doing...
I have a application with one HTML file with two DIV tags, which are my two pages. I have an adapter that has a protected procedure with a security test applied. I have created a custom login handler to authenticate my application using a custom coded Java class. The handler will first check to see if the resource requested is protected and if so, it will (show / hide) the right DIV.
The application tries to call a protected resource within the init method, so at startup the application first throws up the login screen. This is where I see my problem. The really odd thing is that once I successfully log in, I am directed to a different page and that page is fine. It's just the login page that is not displaying correctly.
Here is my code in the challenge handler.
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();
}
};
Here is my 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>
Here is what it looks like in Worklight Studio. (Nice and pretty)
Here is what I actually see when I run it in the simulator or preview mode. (Ugly and plain)
UPDATE
So.. I loaded this in Chrome and took a look a the developer tools. I see that there is a error when loading the page. Strange.. seems as thought there is an NOT AUTHORIZED ERROR
I had to post the link to the error message in the comments section because I am a newbie and I am only allowed to post 2 links. I can't quite figure out why this one page has problems loading the jQuery stylesheet. (See the link in the comments)
UPDATE 2
I have discovered some additional detail, but I still can't seem to figure this out.
I changed the default page (which is actually just a DIV tag within one HTML file) to a different page. I am puzzled as to why this is the case, but apparently the ONLY page that has the jQuery Stylesheet applied is the DEFAULT page. All other pages functionally work but the jQuery stylesheet is NOT applied. Why would that be? I can't figure out why…
