Namespace issues when implementing mediator.js

StackOverflow https://stackoverflow.com/questions/11545956

Question

I have a web page (php) which handles a series of ajax forms and simple js hide/show divs based on content from an external upload to be used by registered members of an organization. In order to build a more maintainable and extendable site, I have been looking into using architectural patterns to prevent unending jQuery chaining; namely, the mediator pattern.

Has anyone used Jack Lawson's Mediator.js? Basically, you can Subscribe with the Mediator to listen on a "channel" (namespaces) with a function to be run when something is Published on that same channel (and even check a predicate true/false function before responding, if needed).

The Goal: The mediator.js api seems like it has great potential as well as forcing me to implement a valid xhtml document and use namespaces correctly. Implementing a mediator pattern seems like a great way to decouple the javascript code and make a complicated web-app much more maintainable and extendable in the future.

The Frustration: I believe I understand both namespaces and the mediator pattern as implemented by the mediator.js api. I have been able to successfully publish DOM attribute events through a mediator on specific "channels" (namespaces) and Subscribe to those channels and react to them - even using the mediator.js method of testing a "predicate" on that channel in order to ascertain whether a response is necessary. But my CSS is now incapable of recognizing elements due to the new namespaces.

I created namespaces like this:

<xmlns:active='http://www.xxx.com/tracks/active'  
xmlns:completed='http://www.xxx.com/tracks/completed'  
xmlns:inactive='http://www.xxx.com/tracks/inactive'>

and then applying them to html elements, like:

<active:div ...>stuff</active:div>

I changed the css file accordingly:

active|div {   css formatting }

Still, the page's css formatting is broken.

The doctype portion of the rendered page looks like:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

I am not entirely sure this isn't required, but I have tried adding:

<? header('Content-Type: application/xhtml+xml'); ?>

Which produces an XML parsing error of:

XML Parsing Error: not well-formed

which points to the equal sign in this namespace definition xmlns:active='http://www.xxx.com/tracks/active' as the problem, but every doc I read shows this as being correct syntax.

Questions:

  1. Why is my CSS broken after implementing the namespaces I showed above?
  2. Why, when I add the <? header('Content-Type: application/xhtml+xml'); ?> in the header, do I get the parsing error mentioned?

Thank you for any help.

Was it helpful?

Solution

  1. Why is my CSS broken after implementing the namespaces I showed above?

    The namespaces can only be resolved within your CSS when you add @namespace declarations corresponding to your XML namespaces. This is described in the spec.

    Make sure your stylesheet has the following statement, placed at an appropriate location (directly after all @charsets and @imports):

    @namespace active 'http://www.xxx.com/tracks/active';

    If you have styles for the rest of your namespaces, you'll need to include those as well:

    @namespace completed 'http://www.xxx.com/tracks/completed';
@namespace inactive 'http://www.xxx.com/tracks/inactive';

  2. Why, when I add the <? header('Content-Type: application/xhtml+xml'); ?> in the header, do I get the parsing error mentioned?

    This is because when you add the header, your XHTML page is served as an XML-serialized document. Incidentally, this is how XHTML pages are supposed to be served, as XHTML is derived from XML. If you don't include the header, servers will generally send them as text/html instead, which means your XHTML runs through an HTML tag soup parser and not an XML parser.

    XML parsing rules are very strict; a single syntax error will prevent your entire document from rendering. Since you appear to have a malformed xmlns declaration, that prevents your XHTML page from being rendered properly. On the other hand, given the flexibility and leniency of HTML syntax rules, a browser won't spit any error messages even if it encounters serious syntax problems in your markup — it'll just try to waltz its way through the errors and make guesses at what the intended DOM structure was.

    As for the error itself, your xmlns attributes look like they should be part of the opening html tag instead of their own element, since they are attributes:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:active="http://www.xxx.com/tracks/active"  
      xmlns:completed="http://www.xxx.com/tracks/completed"  
      xmlns:inactive="http://www.xxx.com/tracks/inactive">

    Lastly, you need that header! Without it, your XHTML won't be parsed The Way It Should Be™, and therefore your CSS namespaces won't work either.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top