Topic
  • 15 replies
  • Latest Post - ‏2012-11-16T10:49:17Z by SystemAdmin
SystemAdmin
SystemAdmin
2327 Posts

Pinned topic Worklight Main Page and erros if you access a different page

‏2012-11-07T08:48:34Z |
Hello,
i have 2 pages, login.html and main.html.

In my application-descriptor.xml i defined as MainPage login.html. If i try to directly access main.html it throws an error: 'Uncaught ReferenceError: WL is not defined ' on the body onload event of the main.html page.

Must worklight environment pass through his first page to work properly?

Then there is another thing. If i already logged in, and i do a $.mobile.changePage("main.html"), when the script of main try to call an adapter it throws th error:
Uncaught TypeError: Cannot use 'in' operator to search for 'SUPPORT_COOKIES' in null

Just as said here:
http://www.ibm.com/developerworks/forums/thread.jspa?threadID=460738&tstart=15
  • SystemAdmin
    SystemAdmin
    2327 Posts

    Re: Worklight Main Page and erros if you access a different page

    ‏2012-11-07T15:51:47Z  
    That error tends to happen when you're not "importing" the Worklight's JavaScript files. For example, the page that's giving you the error is probably missing something like this in the head tag:

    
    <link href=
    "wlclient/css/wlclient.css" rel=
    "stylesheet"> <script type=
    "text/javascript"> 
    // Define WL namespace. var WL = WL ? WL : 
    {
    }; 
    /** * WLClient configuration variables. * Values are injected by the deployer that packs the gadget. */ WL.StaticAppProps = 
    { 
    "APP_DISPLAY_NAME": 
    "qunitapp", 
    "APP_SERVICES_URL": 
    "\/apps\/services\/", 
    "APP_VERSION": 
    "1.0", 
    "ENVIRONMENT": 
    "iphone", 
    "LOGIN_DISPLAY_TYPE": 
    "embedded", 
    "WORKLIGHT_ROOT_URL": 
    "\/apps\/services\/api\/qunitapp\/iphone\/" 
    };</script> <script src=
    "wlclient/js/cordova.js"></script> <script src=
    "common/js/wljq.js"></script> <!-- More Script Tags here, check the source of the page that works under the 
    
    native code folder -->
    
  • SystemAdmin
    SystemAdmin
    2327 Posts

    Re: Worklight Main Page and erros if you access a different page

    ‏2012-11-07T16:50:38Z  
    That error tends to happen when you're not "importing" the Worklight's JavaScript files. For example, the page that's giving you the error is probably missing something like this in the head tag:

    <pre class="jive-pre"> <link href= "wlclient/css/wlclient.css" rel= "stylesheet"> <script type= "text/javascript"> // Define WL namespace. var WL = WL ? WL : { }; /** * WLClient configuration variables. * Values are injected by the deployer that packs the gadget. */ WL.StaticAppProps = { "APP_DISPLAY_NAME": "qunitapp", "APP_SERVICES_URL": "\/apps\/services\/", "APP_VERSION": "1.0", "ENVIRONMENT": "iphone", "LOGIN_DISPLAY_TYPE": "embedded", "WORKLIGHT_ROOT_URL": "\/apps\/services\/api\/qunitapp\/iphone\/" };</script> <script src= "wlclient/js/cordova.js"></script> <script src= "common/js/wljq.js"></script> <!-- More Script Tags here, check the source of the page that works under the native code folder --> </pre>
    As a side note, you may want to consider using a "Single Page Template":
    http://jquerymobile.com/demos/1.2.0/docs/pages/page-anatomy.html

    For example, here you have 2 pages in the same html file and use javascript to switch between them:

    
    <body>   <!-- Start of first page --> <div data-role=
    "page" id=
    "foo">   <div data-role=
    "header"> <h1>Foo</h1> </div><!-- /header -->   <div data-role=
    "content"> <p>I
    'm first in the source order so I'm shown as the page.</p> <p>View internal page called <a href=
    "#bar">bar</a></p> </div><!-- /content -->   <div data-role=
    "footer"> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page -->     <!-- Start of second page --> <div data-role=
    "page" id=
    "bar">   <div data-role=
    "header"> <h1>Bar</h1> </div><!-- /header -->   <div data-role=
    "content"> <p>I
    'm the second in the source order so I'm hidden when the page loads. I
    'm just shown if a link that references my id is beeing clicked.</p>             <p><a href=
    "#foo">Back to foo</a></p> </div><!-- /content -->   <div data-role=
    "footer"> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page --> </body>
    
  • SystemAdmin
    SystemAdmin
    2327 Posts

    Re: Worklight Main Page and erros if you access a different page

    ‏2012-11-08T03:44:49Z  
    That error tends to happen when you're not "importing" the Worklight's JavaScript files. For example, the page that's giving you the error is probably missing something like this in the head tag:

    <pre class="jive-pre"> <link href= "wlclient/css/wlclient.css" rel= "stylesheet"> <script type= "text/javascript"> // Define WL namespace. var WL = WL ? WL : { }; /** * WLClient configuration variables. * Values are injected by the deployer that packs the gadget. */ WL.StaticAppProps = { "APP_DISPLAY_NAME": "qunitapp", "APP_SERVICES_URL": "\/apps\/services\/", "APP_VERSION": "1.0", "ENVIRONMENT": "iphone", "LOGIN_DISPLAY_TYPE": "embedded", "WORKLIGHT_ROOT_URL": "\/apps\/services\/api\/qunitapp\/iphone\/" };</script> <script src= "wlclient/js/cordova.js"></script> <script src= "common/js/wljq.js"></script> <!-- More Script Tags here, check the source of the page that works under the native code folder --> </pre>
    it seems that the script fragment are generated by worklight studio during build and deployment, can we update it by manual? after worklight upgrade to latest version will this part be changed?
  • SystemAdmin
    SystemAdmin
    2327 Posts

    Re: Worklight Main Page and erros if you access a different page

    ‏2012-11-08T08:08:08Z  
    it seems that the script fragment are generated by worklight studio during build and deployment, can we update it by manual? after worklight upgrade to latest version will this part be changed?
    "it seems that the script fragment are generated by worklight studio during build and deployment,"

    Correct.

    "can we update it by manual?"

    You can, not sure if you should, you probably have to if you want different pages in different files. If you have all your html in 1 file this is not an issue.

    "after worklight upgrade to latest version will this part be changed?"

    It can change when you upgrade Worklight.
  • SystemAdmin
    SystemAdmin
    2327 Posts

    Re: Worklight Main Page and erros if you access a different page

    ‏2012-11-08T15:26:18Z  
    Ok for the WL that is not defined, i solved. But for the other problem, is there any suggestion?

    I attach a screenshot of the exact line of code that throws th error. It happens only when i close my "Preview as common resource" tab of my browser and then i newly access the console and open it.
  • SystemAdmin
    SystemAdmin
    2327 Posts

    Re: Worklight Main Page and erros if you access a different page

    ‏2012-11-08T15:49:04Z  
    Ok for the WL that is not defined, i solved. But for the other problem, is there any suggestion?

    I attach a screenshot of the exact line of code that throws th error. It happens only when i close my "Preview as common resource" tab of my browser and then i newly access the console and open it.
    Um, this is purely anecdotal but maybe it helps:

    I remember I got that error (or one very similar) once. I had a separate page with just unit tests and got that error when I tried to test adapters with invokeProcedure.

    What solved it for me was making sure -all- the code that worklight generates and adds to the header is there (and is correct). Including:

    
    <script type=
    "text/javascript"> 
    // Define WL namespace. var WL = WL ? WL : 
    {
    }; 
    /** * WLClient configuration variables. * Values are injected by the deployer that packs the gadget. */ WL.StaticAppProps = 
    { 
    "APP_DISPLAY_NAME": 
    "qunitapp", 
    "APP_SERVICES_URL": 
    "\/apps\/services\/", 
    "APP_VERSION": 
    "1.0", 
    "ENVIRONMENT": 
    "iphone", 
    "LOGIN_DISPLAY_TYPE": 
    "embedded", 
    "WORKLIGHT_ROOT_URL": 
    "\/apps\/services\/api\/qunitapp\/iphone\/" 
    };</script> <!-- mode generated code here -->
    


    That's for the iPhone environment, it changes a bit per-environment.

    Does it work in other environments (iPhone, Android) or does it always fail with the error ('SUPPORT_COOKIES is null')?
  • SystemAdmin
    SystemAdmin
    2327 Posts

    Re: Worklight Main Page and erros if you access a different page

    ‏2012-11-08T16:08:01Z  
    Um, this is purely anecdotal but maybe it helps:

    I remember I got that error (or one very similar) once. I had a separate page with just unit tests and got that error when I tried to test adapters with invokeProcedure.

    What solved it for me was making sure -all- the code that worklight generates and adds to the header is there (and is correct). Including:

    <pre class="jive-pre"> <script type= "text/javascript"> // Define WL namespace. var WL = WL ? WL : { }; /** * WLClient configuration variables. * Values are injected by the deployer that packs the gadget. */ WL.StaticAppProps = { "APP_DISPLAY_NAME": "qunitapp", "APP_SERVICES_URL": "\/apps\/services\/", "APP_VERSION": "1.0", "ENVIRONMENT": "iphone", "LOGIN_DISPLAY_TYPE": "embedded", "WORKLIGHT_ROOT_URL": "\/apps\/services\/api\/qunitapp\/iphone\/" };</script> <!-- mode generated code here --> </pre>

    That's for the iPhone environment, it changes a bit per-environment.

    Does it work in other environments (iPhone, Android) or does it always fail with the error ('SUPPORT_COOKIES is null')?
    It happens with all environments and that files are included in that page (see attachment).

    I call the invocation procedure of the adapter on the pageinit event, could be too early and need to wait a few milliseconds? (maybe some worklight js are not loaded).
  • SystemAdmin
    SystemAdmin
    2327 Posts

    Re: Worklight Main Page and erros if you access a different page

    ‏2012-11-08T16:39:58Z  
    It happens with all environments and that files are included in that page (see attachment).

    I call the invocation procedure of the adapter on the pageinit event, could be too early and need to wait a few milliseconds? (maybe some worklight js are not loaded).
    This thread talks abput a very similar error:
    http://www.ibm.com/developerworks/forums/thread.jspa?messageID=14877137
  • SystemAdmin
    SystemAdmin
    2327 Posts

    Re: Worklight Main Page and erros if you access a different page

    ‏2012-11-08T18:14:09Z  
    It happens with all environments and that files are included in that page (see attachment).

    I call the invocation procedure of the adapter on the pageinit event, could be too early and need to wait a few milliseconds? (maybe some worklight js are not loaded).
    "could be too early and need to wait a few milliseconds?"

    You should wait until wlComminInit is called, before executing any Worklight JS code.

    Can you try a couple of things?

    • Add a setTimeout to the code that fails

    
    var codeIWantToCall = function() 
    { ...  
    };   setTimeout(codeIWantToCall, 5000); 
    //play with the number, now it's 5 seconds
    


    Did anything change? (it worked, new error, ...)
  • SystemAdmin
    SystemAdmin
    2327 Posts

    Re: Worklight Main Page and erros if you access a different page

    ‏2012-11-09T10:25:24Z  
    "could be too early and need to wait a few milliseconds?"

    You should wait until wlComminInit is called, before executing any Worklight JS code.

    Can you try a couple of things?

    • Add a setTimeout to the code that fails

    <pre class="jive-pre"> var codeIWantToCall = function() { ... }; setTimeout(codeIWantToCall, 5000); //play with the number, now it's 5 seconds </pre>

    Did anything change? (it worked, new error, ...)
    I put it and there is no change.
    I understand that this problem occurs when i test my App previously on the common resource and then i use the mobile browser simulator of android/iphone.

    Could be some problem of localStorage? Because i need to use it before the call of the adapter, and the EncryptedCache too.

    Maybe by saving data on Common Resources' localStorage could generate some conflict on Android mobile Browser Simulator's localStorage.
  • SystemAdmin
    SystemAdmin
    2327 Posts

    Re: Worklight Main Page and erros if you access a different page

    ‏2012-11-15T09:46:31Z  
    "could be too early and need to wait a few milliseconds?"

    You should wait until wlComminInit is called, before executing any Worklight JS code.

    Can you try a couple of things?

    • Add a setTimeout to the code that fails

    <pre class="jive-pre"> var codeIWantToCall = function() { ... }; setTimeout(codeIWantToCall, 5000); //play with the number, now it's 5 seconds </pre>

    Did anything change? (it worked, new error, ...)
    UPDATE:
    I created a more simple project that make a call to an adapter in the $(document).on("pageshow", "#idOfDivPage", ...)

    If i simply call the name of the function it will throw the error.
    If i put a timeout like this:

    var codeIWantToCall = function() { ... };

    setTimeout(codeIWantToCall, 50); //play with the number, now it's 5 seconds

    It works even with 50ms of waiting.

    I wonder why this happen.
  • SystemAdmin
    SystemAdmin
    2327 Posts

    Re: Worklight Main Page and erros if you access a different page

    ‏2012-11-15T16:10:14Z  
    UPDATE:
    I created a more simple project that make a call to an adapter in the $(document).on("pageshow", "#idOfDivPage", ...)

    If i simply call the name of the function it will throw the error.
    If i put a timeout like this:

    var codeIWantToCall = function() { ... };

    setTimeout(codeIWantToCall, 50); //play with the number, now it's 5 seconds

    It works even with 50ms of waiting.

    I wonder why this happen.
    "It works even with 50ms of waiting. I wonder why this happen."

    My guess is that every time you change from page1.html to page2.html you have to re-load a lot of JavaScript and DOM elements, that takes times. I don't think you would have any of these issues if you have a single html with different divs: http://jquerymobile.com/demos/1.2.0/docs/pages/page-anatomy.html (See Multi-page template structure).
  • SystemAdmin
    SystemAdmin
    2327 Posts

    Re: Worklight Main Page and erros if you access a different page

    ‏2012-11-15T16:41:55Z  
    "It works even with 50ms of waiting. I wonder why this happen."

    My guess is that every time you change from page1.html to page2.html you have to re-load a lot of JavaScript and DOM elements, that takes times. I don't think you would have any of these issues if you have a single html with different divs: http://jquerymobile.com/demos/1.2.0/docs/pages/page-anatomy.html (See Multi-page template structure).
    But now i created only a single page.

    Maybe when jQuery trigger the event "pageShow" the page isn't already loaded so the WL isn't initialised.

    Could be?
  • SystemAdmin
    SystemAdmin
    2327 Posts

    Re: Worklight Main Page and erros if you access a different page

    ‏2012-11-15T17:51:06Z  
    But now i created only a single page.

    Maybe when jQuery trigger the event "pageShow" the page isn't already loaded so the WL isn't initialised.

    Could be?
    Can you check if WL is defined or not before calling the adapter inside the pageshow event callback? (If it's not, move the code somewhere WL is ready to be used like wlCommonInit)

    
    alert(WL); 
    //or console.log alert(typeof WL); 
    //or WL.Logger.debug
    
  • SystemAdmin
    SystemAdmin
    2327 Posts

    Re: Worklight Main Page and erros if you access a different page

    ‏2012-11-16T10:49:17Z  
    Can you check if WL is defined or not before calling the adapter inside the pageshow event callback? (If it's not, move the code somewhere WL is ready to be used like wlCommonInit)

    <pre class="jive-pre"> alert(WL); //or console.log alert(typeof WL); //or WL.Logger.debug </pre>
    I put these console.log before the adapter call whent it throws the error (without the timeout) and they said:

    [code]
    alert(WL) = object Object
    alert(typeof WL) = object
    [code]
    In this case the adapter is not called.

    Even whne i put the timeout and it works the alerts say the same thing.

    So WL is defined.