Icenium Device Simulator - Refresh / Redraw Issues with JQuery load() function.

9 posts, 0 answers
  1. Keith
    Keith avatar
    22 posts
    Member since:
    Sep 2010

    Posted 19 Feb 2013 Link to this post

    I am working on a simple demo app to test being able to store each "view" in a separate .html file and then using the JQuery load() function to dynamically load them into the main index.html file at app startup. The intent is to separate the content of each view so that individual developers may work independently and views may be used across multiple projects. In general, this functionality seems to work but I am getting weird refresh / redraw issues with the Icenium Device Simulator. For example, if I update one of the view .html files and click save the simulator updates but CSS / Javascript is not applied correctly to the refreshed page (i.e. buttons are not styled and not clickable). The issue can be corrected on views (other than the main view loaded by default) by clicking the "reload" button on the simulator. I have yet to figure out how to fix the issue on the main default view. I have provided a code snippet below for reference.

    index.html
    -----------------
    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <meta charset="utf-8" />
            <script src="cordova.js"></script>
            <script src="kendo/js/jquery.min.js"></script>
            <script src="kendo/js/kendo.mobile.min.js"></script>
            <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
            <script src="scripts/hello-world.js"></script>

            <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
            <link href="styles/main.css" rel="stylesheet" />
        </head>
        <body>
            <div data-role="view" id="tabstrip-home" data-title="Hello World!"><div id="welcomeContent"></div></div>
            <div data-role="view" id="tabstrip-uiinteraction" data-title="UI Interaction"><div id="homeContent"></div></div>
            <div data-role="view" id="tabstrip-geolocation" data-title="Geolocation"><div id="locationContent"></div></div>
            

            <div data-role="layout" data-id="mobile-tabstrip">
                <header data-role="header">
                    <div data-role="navbar">
                        <span data-role="view-title"></span>
                    </div>
                </header>

                <div data-role="footer">
                    <div data-role="tabstrip">
                        <a href="#tabstrip-home" data-icon="home">Home</a>
                        <a href="#tabstrip-uiinteraction" data-icon="share">UI Interaction</a>
                        <a href="#tabstrip-geolocation" data-icon="globe">Geolocation</a>
                    </div>
                </div>
            </div>

            <script>
                $('#welcomeContent').load('views/WelcomeView.html');
                $('#homeContent').load('views/HelloView.html');
                $('#locationContent').load('views/LocationView.html');
                var app = new kendo.mobile.Application(document.body, { transition: "slide", layout: "mobile-tabstrip" });
            </script>
        </body>
    </html>


    WelcomeView.html
    ----------------------
    <h1>Welcome!</h1>
    <p>
    Icenium&trade; enables you to build cross-platform device applications regardless of your
    development platform by combining the convenience of a local development toolset with the
    power and flexibility of the cloud.
    </p>

    <div class="buttonArea">
    <a id="startNewWorkoutButton" class="button" data-role="button" data-click="startNewWorkout" data-icon="refresh">Start New Workout</a>
    </div>


    HelloView.html
    ------------------------
    <h1>Say Hello!</h1>
    <div id='helloWorldInput'>
    <label for="txtName" style="display: inline-block;">Enter your name:</label>
    <input type="text" id="txtName" value="" />
    </div>
    <div id='helloWorldText' style="display:block;"></div>
    <div class="buttonArea">
    <a id="resetButton" data-role="button" data-click="sayHelloReset" data-icon="refresh">Reset</a>
    <a id="submitButton" data-role="button" data-click="sayHello" data-icon="compose">Submit</a>
        
    </div>

    <br />
    <div class="buttonArea">
    <a id="testButton" data-role="button" data-click="sayHello" data-icon="compose">Test</a>
    </div>


    LocationView.html
    -------------------------
    <h1>My Location</h1>
    <div id="geoLocationContainer">
    <div id="myLocation">Unable to get location information. Please check your network connection and try again.</div>
    <a id="refreshMap" data-role="button" data-click="getLocation" data-icon="refresh">Refresh Location</a>
    <div id="map_canvas"></div>
    </div>
  2. Jordan
    Admin
    Jordan avatar
    197 posts

    Posted 22 Feb 2013 Link to this post

    Hello Keith,

    What you need in your scenario is called remote view you can read about Kendo Mobile Remote View in their documentation.

    But in short using your example:
    1. Leave the welcome view content in-place at the first view and remove the other two views.
     2. Change your footer to:

    <!-- Index View -->
    <div data-role="view" data-title="Hello World!">
        <h1>App Home</h1>
        <div class="buttonArea">
            <a id="startNewWorkoutButton" class="button" data-role="button" data-click="startNewWorkout" data-icon="refresh">Start New Workout</a>
        </div>
        <a  class="button"  href="HelloView.html" data-icon="share">UI Interaction</a>
    </div>
     
    <!-- App Layout -->
    <div data-role="layout" data-id="mobile-tabstrip">
        <header data-role="header">
            <div data-role="navbar">
                <span data-role="view-title"></span>
            </div>
             
        </header>
     
        <div data-role="footer">
            <div data-role="tabstrip">
                <a href="index.html" data-icon="home">Home</a>
                <a href="views/HelloView.html" data-icon="share">UI Interaction</a>
                <a href="views/LocationView.html" data-icon="globe">Geolocation</a>
            </div>
        </div>
    </div>

    3. Than make your HelloView.html & LocationView.html like one bellow:
    (Each remote view has to have a 
    wrapper with data-role="view" data-title="????")

    <div data-role="view" data-title="UI Interaction">
        <h1>UI Interaction</h1>

    </div>


    Greetings,
    Jordan
    the Telerik team

    Share feedback and vote for features on our Feedback Portal.
    Want some Kendo UI online training - head over to Pluralsight.
  3. Keith
    Keith avatar
    22 posts
    Member since:
    Sep 2010

    Posted 25 Feb 2013 Link to this post

    Ok... the remote views thing is exactly what I was looking for. However, I am still seeing some weird initial state issues with the remote views. In my test app I simply moved the "Geolocation" view into a separate HTML file and loaded it in the manner you suggested. The view did load but the map was not displayed. Once I hit the refresh button the map was properly displayed. I am assuming this is because the remote view is not loaded till it is first displayed so the method used to initial the map did not find the view element to be updated. Is there any way to force these remote views to load at device startup just as if they were all part of the main view?
  4. Jordan
    Admin
    Jordan avatar
    197 posts

    Posted 26 Feb 2013 Link to this post

    Hi again Keith,

    What you need to is comment the map initialization from onDeviceReady and instead do that on view beforeShow event like this:

    @/scripts/hello-world.js
    // PhoneGap is ready
    function onDeviceReady() {
        //getLocation();
        navigator.splashscreen.hide();
    }
    @/views/geolocation-view.html
    <div data-role="view" id="tabstrip-geolocation" data-title="Geolocation" data-before-show="getLocation">


    All the best,

    Jordan
    the Telerik team

    Share feedback and vote for features on our Feedback Portal.
    Want some Kendo UI online training - head over to Pluralsight.
  5. Keith
    Keith avatar
    22 posts
    Member since:
    Sep 2010

    Posted 26 Feb 2013 Link to this post

    Perfect! I had been using AppMobi till I discovered Icenium and the "data-before-show" attribute was a key piece of functionality that seemed to be missing in Kendo UI. I guess that I need to read the help a little closer next time. Thanks again for all the help!
  6. Tom
    Tom avatar
    16 posts
    Member since:
    Jan 2013

    Posted 15 Mar 2013 Link to this post

    Hey,

    I have the exact problem but when using jQueryMobile.  Would you have any thoughts on how to get an external page to refresh with styles applied using jQueryMobile.

    Thanks so much,
    Tom
  7. David Silveria
    David Silveria avatar
    234 posts
    Member since:
    May 2006
  8. Tom
    Tom avatar
    16 posts
    Member since:
    Jan 2013

    Posted 19 Mar 2013 Link to this post

    Thanks for the links.  I don't believe they solve the problem.  I'm not in control of loading elements from Ajax and I really don't want to turn off Ajax loading of external pages as I want the transitions.  Maybe I'm shooting for something that is not possible.  If I remember correctly on my last jqm web app, when you link to external pages and then refresh I thought it refreshed back to the initial page.  I'm probably missing something but, if a user can refresh the browser and get messed up css, that would be a pretty bad user experience. 

    I'm not sure what is different with what I have currently for Phonegap app.  Right now I believe the issue will only occur during development.  It happens in the simulator when Refresh is clicked on an external page and in Icenium Ion when the current app is on an external page and then I refresh with 3 fingers or by QR Code load.

    Any thoughts on how to resolve or help me change my thinking.  I very well could be thinking about this problem in the wrong way.

    Thanks much,
    Tom
  9. David Silveria
    David Silveria avatar
    234 posts
    Member since:
    May 2006

    Posted 19 Mar 2013 Link to this post

    Frankly I have not fully reviewed the two links from my previous post, rather my intent was to point you to a more generic information resource such as stackoverflow, because your inquiry seems to be related to JQuery rather than directly related to the icenium product in which forums we post now.

    Sorry if my intent was misunderstood and you expected a link to a direct answer.
Back to Top