locked
Bug with css/js when navigating

    Question

  • I've noticed that as I navigate around in my app, the top level default.html acquires and holds onto every single css and js file that any individual Page loads.  This is causing issues as CSS is colliding between different pages.  This seems like a bug.  If it isn't or I need to call some extra command that fully unloads the previous page, including its CSS/JS then that documentation hasn't been easy to find.
    Friday, August 17, 2012 12:17 AM

All replies

  • The key is to prefix all selectors with the id or class assigned to the particular page in your page specific CSS files. 

    .main-page #btnFoo

    instead of just

    #btnFoo


    weichhold.com

    Friday, August 17, 2012 7:37 AM
  • Oliver is correct.  You need to scope your CSS for the individual pages if you have different CSS for each page.  For the JS files you should be using anonymous functions (the default if you use the templates and wizards) and there will be no name collision.  Wrapping your code in an anonymous global function is a good coding practice because it limits the scope of your code and avoids polluting the global namespace.

    -Jeff


    Jeff Sanders (MSFT)

    Friday, August 17, 2012 12:48 PM
    Moderator
  • I'm familiar with that process.  I was hoping that with all the other cleverness going on the system would have been designed to unload old css...  I'll probably just switch over to the multi page implementation rather than the single page implementation and have a master page for each general template.  Then the content pages loaded into the master templates won't have any of their own css.
    Friday, August 17, 2012 4:32 PM