IBM Worklight - App displays properly in browser but not when previewing in the MBS

Question

I am writing a Worklight Hybrid application and utilizing jQuery Mobile in it.

The HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</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 rel="stylesheet" href="jqueryMobile/jquery/jquery.mobile-1.3.1.css">
            <link rel="stylesheet" href="css/itemDetails.css">
            <script>window.$ = window.jQuery = WLJQ;</script>
            <script src="jqueryMobile/jquery/jquery-1.9.1.js"></script>
            <script src="jqueryMobile/jquery/jquery.mobile-1.3.1.js"></script>
            <script src="js/itemDetails.js"></script>

</head>
<body >
    <div data-role="page" id="detailsPage">
     <div data-role="header" id="itemDetailsNavBar">
     <a href="#leftPanel" data-role="ui-icon-list-panel" data-corners="false" id="listButtonLeft"></a>
     <h1>Item Details</h1>
     <a href="index.html" data-role="ui-icon-edit" data-corners="false" id="editButtonRight"></a>
     </div>
    </div> 

    <script src="js/initOptions.js"></script>
<script src="js/messages.js"></script>
<script src="modules/core/MenuPanel.js"></script>
</body>
</html>

The CSS:

@CHARSET "UTF-8";


#itemDetailsNavBar
{
    background: #ffb400 !important;
    height: 44px;
    padding-top: 20px;
}

#listButtonLeft {
    background: transparent url("images/list.png");
    box-shadow: none;
    data-corners :"false";
    margin-top: 19px;
    border: none;    
}

#editButtonRight {
    background: transparent url("images/edit.png");
    box-shadow: none;
    data-corners :"false";
    margin-top: 15px;
    border: none;
}

When previewing in a browser I see it properly:

enter image description here

But when previewing via Worklight Console's MBS, this is what I am getting:

enter image description here

Well that should not be in the css, since it's not a css rule. You should only use that as an html attribute which it seems you already have. — myajouri, Nov 21 '13 at 12:31
This is Worklight 6.0, right? There is already jquery built-in, you do not need to include this line: -- it is also not jquery mobile, so why put it in that folder? also, this file is not even being used because you did not remove the line above it, which means that the app is still using the built-in jquery. — Idan Adar, Nov 21 '13 at 15:22
Also your CSS does not contain any special characters, why do you specify the @charset in it? — Idan Adar, Nov 21 '13 at 15:25
Also, that is not the iOS Simulator, but Worklight Console's MBS. Open the chrome dev tools and check if there are any errors. — Idan Adar, Nov 21 '13 at 15:28
Your code works fine for me in the MBS. Just a few notes: As Idan said, you should either have the line importing WL's jQuery, or import your own jQuery, but not both. Do you really mean to be using HTML 4.0.1? Are you using Chrome or FireFox, and do you have Useragent Switching enabled in the MBS? — David Dhuyveter, Nov 21 '13 at 18:23
@IdanAdar I used chrome and safari to preview it. If I remove the Jquery import line then Jquery does not seem to work, I mean it gives me Cant Find variable $. — Satheesh, Nov 22 '13 at 06:33
Upload your project somewhere so it can be downloaded and examined. — Idan Adar, Nov 22 '13 at 06:34
@IdanAdar https://www.dropbox.com/s/ll9yo1t0wav8tvu/common.zip ,let me know. — Satheesh, Nov 22 '13 at 06:40
No, this is not good. Export the Worklight PROJECT from Eclipse, otherwise I cannot build it. — Idan Adar, Nov 22 '13 at 06:46
@IdanAdar I found the issue, it is because of the CSS. If I add styles directly to html they seem to work fine. — Satheesh, Nov 27 '13 at 10:21
@satheeshwaran, That's weird... then there is an issue with the way you link your CSS to the HTML. Can you please write this as an answer? — Idan Adar, Dec 05 '13 at 17:34
@IdanAdar I fixed the issue, will post the answer right away! — Satheesh, Dec 06 '13 at 05:24

score 1 · Accepted Answer · answered Dec 06 '13 at 05:27

I removed the CSS from the head and added it just before the body end tag and everything seems to work fine both in simulator and the MBS.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    </head>
    <body >
        <div data-role="page" id="detailsPage">
         <div data-role="header" id="itemDetailsNavBar">
         <a href="#leftPanel" data-role="ui-icon-list-panel" data-corners="false" id="listButtonLeft"></a>
         <h1>Item Details</h1>
         <a href="index.html" data-role="ui-icon-edit" data-corners="false" id="editButtonRight"></a>
         </div>
        </div> 

   <link rel="stylesheet" href="css/itemDetails.css">
   <script src="js/itemDetails.js"></script>
   </body>
   </html>

IBM Worklight - App displays properly in browser but not when previewing in the MBS

1 Answers1