locked
Issues with navigating back, controls unstyled/missing RRS feed

  • Question

  • I have a Navigation app with two pages: home  and  page2.   In home.js  ready: event, I navigate to another page:

    ...

    ready: function (element, options) {
        setImmediate(function () {
            WinJS.Navigation.navigate("/pages/page2/page2.html");
        });

    ...

    On page 2, user clicks a button and is redirected back to home:

    function btnSubmitTermsClick() {
        setImmediate(function () {

          //WinJS.Navigation.back(1);
          WinJS.Navigation.navigate("/pages/home/home.html");
        });

    }

    Upon returning back to home, the ready event fires and all code works appropriately, however there some controls that are not displaying correctly (styling) and some not displaying at all.  When I breakpoint and look in DOM Explorer - I see the controls and their correct styles.  No exception that I am aware of, the js code all runs and sets properties, etc. of the html controls...they just don't display.

    If I skip over my initial navigate to page 2 and just load home page, it works and renders correctly.

    Any ideas?

    Tuesday, January 8, 2013 6:29 PM

Answers

  • When this happens to me, it's usually because some of my CSS selectors from the page 2's CSS file are being applied to objects on page 1, since the navigation model seems to keep all CSS and javascript files active at the same time once they are loaded. Later-loaded CSS files take precedence, which is why your page 1 would be messed up.

    If you have some overlap with class names or element ids on both pages, it can cause this sort of problem, so I would recommend making sure both are distinct on your pages.

    Tuesday, January 8, 2013 7:27 PM

All replies

  • When this happens to me, it's usually because some of my CSS selectors from the page 2's CSS file are being applied to objects on page 1, since the navigation model seems to keep all CSS and javascript files active at the same time once they are loaded. Later-loaded CSS files take precedence, which is why your page 1 would be messed up.

    If you have some overlap with class names or element ids on both pages, it can cause this sort of problem, so I would recommend making sure both are distinct on your pages.

    Tuesday, January 8, 2013 7:27 PM
  • fixed.  page2.html was referencing ui-dark.css instead of ui-light.css.  Changing that on page2  fixed home styling. 

    Tuesday, January 8, 2013 8:37 PM