Login Register

CSS via dynamically inserted <link> in parent LayoutContainer -- ContentPane problem -- am I doomed?

Hi there.

I wonder if I am working against dojo's scriptScope but I am unsure. The (simplified) document is:

<head>
   <link> <!-- stylsheet for current 'page' -->
</head>
   <!-- menu items here -->

   <!-- AJAX loaded html fragments go in this: -->
   <div dojoType="dijit.layout.LayoutContainer">
      <div dojoType="dijit.layout.ContentPane" id="clientPage" layoutAlign="client"></div>
   </div>

Each 'page' for clientPage has a .php file, a .css file and a .js file. The idea is to load these parts in dynamically as requested from clicking the menu.

When a menu item is clicked, I'm doing these steps:

  1. <link> element in main document's <head> is removed via dojo.query().orphan()
  2. dijit.byId('clientPage').setContent(); to clear the content
  3. Using xhrGet, PHP script reports on existance of .php,.css,.js files for a particular document name.
  4. On success, the callback function adds a new <link> element pointing to the .css
  5. dijit.byId('clientPage').setHref(varPageName);

Does this actually work for me? Yes it does, but only once. I can check the DOM source and the <link> really is being deleted+changed, all files are successfully 'loaded', except the CSS doesn't appear to be parsed -- or else scriptScope is working against me?

If this is the case - what is your advice? I would prefer to keep my .php,.css,.js setup the same (i.e. for each 'page' that could be shown in clientPage, there is each of these documents)

For those who have more experience than me, please advise as to most sensible course of action ;)

Wow it's 3am....

Thank you

James