Back to Y!OS Suggestions Forum
0

Defect report: No ID munging of LABEL element's FOR attribute

An HTML label element can have a for attribute whose value is an element ID.
http://www.w3.org/TR/html401/interact/forms.html#h-17.9.1

In my Open App, cajoling is breaking the association between labels and controls because control IDs get cajoled, but the IDs in label elements' for attribute values do not.

For example, I start with this:

<input type="radio" name="foo" value="bar" id="bar-radio" />
<label for="bar-radio">Bar</label>

...and I get this:

<input type="radio" name="foo" value="bar" id="bar-radio-yap-box-0-6d4495d1-yap-md-XELf7L4g" />
<label for="bar-radio">Bar</label>

...so the label doesn't work.

I'm not sure whether this is a defect in Caja or Y!OS, but I hope it gets fixed.

Thanks,
Jared

by
Report Abuse
7 Replies
  • Update: This appears to be a Y!OS defect related to <yml:form>. When I just insert my sample HTML using .innerHTML, the ID gets cajoled consistently for both the input and the label.
    Report Abuse
    0
  • Hi Jared, can you please attach the full sample code for how you're setting the form? I'm running tests using the input params you provided and I am seeing the label for attribute and the input cajole properly. I've tried this under the following instances:
    - within a normal form
    - within a normal form inserted through innerHTML
    - within a yml:form tag
    - within a yml:form tag inserted through innerHTML

    Thanks,
    Jon

    QUOTE (Jared @ Apr 15 2009, 05:15 PM) <{POST_SNAPBACK}>
    Update: This appears to be a Y!OS defect related to <yml:form>. When I just insert my sample HTML using .innerHTML, the ID gets cajoled consistently for both the input and the label.
    Report Abuse
    0
  • Thanks for looking into this. My case is one you didn't try -- I'm seeing the problem in a <yml:form> returned in a <yml:form insert="foo"> response.

    In landing page:
    CODE
    	<yml:form params="trade" method="GET" insert="trade-form">
    		<input type="text" name="symbol" />
    		<input type="submit" value="Trade" />
    	</yml:form>


    In trade form response:
    CODE
    	<yml:form params="place" method="POST">
    		...
    		<input type="radio" name="ordertype" value="market" id="market-radio" />
    		<label for="market-radio">Market</label>
    		...
    	</yml:form>
    Report Abuse
    0
  • No worries - hopefully we can get some resolution for this. I've seen this type of problem before (but with yml:a). Let me set up a use case for this and file a bug. I know you're under some tight deadlines for your application so I don't want to set your expectations too high - this more than likely will not be an available fix within your app creation timeframe.

    I'll post back with bug details once everything has been set up.

    - Jon

    QUOTE (Jared @ Apr 16 2009, 11:08 AM) <{POST_SNAPBACK}>
    Thanks for looking into this. My case is one you didn't try -- I'm seeing the problem in a <yml:form> returned in a <yml:form insert="foo"> response.

    In landing page:
    CODE
    	<yml:form params="trade" method="GET" insert="trade-form">
    		<input type="text" name="symbol" />
    		<input type="submit" value="Trade" />
    	</yml:form>


    In trade form response:
    CODE
    	<yml:form params="place" method="POST">
    		...
    		<input type="radio" name="ordertype" value="market" id="market-radio" />
    		<label for="market-radio">Market</label>
    		...
    	</yml:form>
    Report Abuse
    0
  • Thanks for the alternate sample, I was able to duplicate the issue that you were seeing and have filed it as a defect bug (bug #2691807 for your reference). This probably won't roll out in the next platform upgrade but may make it in a future revision.

    - Jon
    Report Abuse
    0
  • Sure. Thanks for the prompt feedback. Just curious -- is the Y!OS bug database public?

    For the benefit of others, yhe workaround I've decided upon is including the second form in the original page -- hidden initially, then shown when the first form is submitted. The relevant section of my code that implements this is here:

    CODE
    listen($("trade-button").parentNode, "submit", function(e) {
      var symbol = $("trade-symbol-textbox").value.replace(/\s/, '');
    if (symbol) {
    		$("trade-symbol").parentNode.reset();
    		$("trade-quote").innerHTML = "Loading...";
    		$("trade-wrapper").className = "trade-expanded";
    		$("trade-symbol").value = symbol;
    	} else {
    		e.preventDefault();
    		return false;
    	}
    });
    Report Abuse
    0
  • Good workaround - we've had to do similar things in our app development to bypass some of the platform issues. Unfortunately the bug tracker is not public - there have been talks about having a public bug tracker but not final decision on that has been made yet - for now we troll the forums for new bugs and issues.
    Report Abuse
    0
✕ This forum is locked.
Ask a Question

Recent Posts

in Y!OS Suggestions