spree/spree — pull request #1789 by lilleyt (2012-07-19 15:48:22+00:00)
Title: Move noscript blocks out of paragraph - deface breaks such invalid html

I ran across this issue when I added an override to the spree/checkout/_address view.

Simply by virtue of adding a deface override to that view (irrespective of what you're overriding), the resulting html renders in such a way that it breaks checkout.js, which is responsible for showing/hiding the state field of the billing and shipping addresses based on whether or not a country has states configured.

This results in the state picker not properly converting to a text input when the user's chosen country does not have states configured for it.

I tracked down the cause to invalid html in the view itself. Evidently, deface's processing "corrects" the invalid html, causing the output to no longer have the structure that the selector in checkout.js expect, so the functions defined there never get called.

The offending tag is the noscript block that lies in the paragraph that houses the state select/input field. According to the [html4 dtd](http://www.w3.org/TR/html4/sgml/dtd.html#block), noscript is a block-level element (unlike

, moving the paragraph contents outside of the paragraph and the checkout.js selector's p#bstate/sstate.

The simplest fix is to move the noscript block outside and below the paragraph. I've tested this and it works both when the browser supports javascript as well as when javascript is turned off.