Remote reloaded and added to DOM on each visit

7 posts, 1 answers
  1. Alex Smith
    Alex Smith avatar
    17 posts
    Member since:
    Dec 2009

    Posted 24 Oct 2013 Link to this post

    *EDIT* The title should be "Remote view reloaded and added to DOM on each visit" but I can't edit the post title.

    I am currently experiencing some dreadful behavior where each time I navigate to a remote view the entire contents are re-requested and added to the DOM. I am working on an app with several remote views and each time I transition from one to the other and back the state is lost because the entire contents are added to the DOM again (rather than just showing the view that was already loaded). 

    I am using both app.navigate("path.to.remote.view"); and <a href="path.to.remote.view"> and the behavior is exhibited in both cases. I have no request params, the urls are identical each time.

    I am guessing there is something fundamental and simple at the root, but I can't resolve this issue.

    Thanks
  2. Alex Smith
    Alex Smith avatar
    17 posts
    Member since:
    Dec 2009

    Posted 25 Oct 2013 Link to this post

    After some playing around I have identified this issue is related to requireJS.

    If I create the kendo application in a <script> tag on my index page like this, the app works correctly with remote views.
    kidcheck = new kendo.mobile.Application($(document.body), {
                    skin: "flat",
                    transition: "fade"
                });
    However, if I follow the pattern of the Kendo Music Store and have the main.js module invoke the init method on the app.js module I get the behavior where all remote views are requested over and over.

    main.js
    var app;
    require.config({
        paths: {
            jQuery: "../lib/jquery/jquery.min",
            kendo: "../lib/kendo/kendo.mobile.min"
        },
        shim: {
            jQuery: {
                exports: "jQuery"
            },
            kendo: {
                deps: ["jQuery"],
                exports: "kendo"
            }
        },
          urlArgs: "bust=" + (new Date()).getTime() // Don't cache during development.
    });
     
    require(["app"], function(application)
    {
        $(function() {
            app = application;
            application.init();
        });
    });
    app.js
    define(["jQuery", "kendo", "utils"], function($, kendo, utils) {
        var init = function() {
     
            console.log("Initializing kendo app");
            var theApp = new kendo.mobile.Application($(document.body), {
                    skin: "flat",
                    transition: "fade"
                });
            utils.init(theApp);
        };
         return { init : init};
    });

    What am I doing wrong?
  3. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2596 posts

    Posted 28 Oct 2013 Link to this post

    Hi Alex,

    In general when a remote view is loaded, when you subsequently show the same view, it should not perform additional requests by default. There is an reload option that will make the view to be reloaded every time the application navigates to it. Maybe you have this option set? Please check the following example:

    http://docs.kendoui.com/getting-started/mobile/application#remote-view-that-is-refreshed-on-every-request 

    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  4. Alex Smith
    Alex Smith avatar
    17 posts
    Member since:
    Dec 2009

    Posted 01 Nov 2013 Link to this post

    The data-reload option is not set on any view in my application.
  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2596 posts

    Posted 05 Nov 2013 Link to this post

    Hi Alex,

    I have tried to reproduce the issue but to no avail. Could you please check the project attached and edit it so it can reproduce the scenario that you are describing, so we can take a look at it.

    Thank you in advance for your cooperation.
     
    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Answer
    Alex Smith
    Alex Smith avatar
    17 posts
    Member since:
    Dec 2009

    Posted 05 Nov 2013 Link to this post

    I discovered the problem in my application. I had both my require js main entry point AND kendo mobile scripts included in my entry page.

    <script data-main="js/app/main" src="js/lib/require.js"></script>
    ...
    ...
    <script src="js/lib/kendo/kendo.all.min.js"></script>
    Once I removed the kendo.all.min.js include I stopped getting this behavior.
  7. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2596 posts

    Posted 06 Nov 2013 Link to this post

    Hi Alex,

    I am glad that you have managed to find the problem inside your project.

    If you have any questions regarding the functionality of Kendo UI, please do not hesitate to contact us.

    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top