Wednesday, December 3, 2014

Re: 3.0b3 - label[for] & input[id] discrepancies

Oops. Yes, i goofed. i'm looking right at it in the docs. >.<

Well, here's what i did...
i created an extension FormHelper class, adding a public domId function that returns the protected _domId value. Checkbox isn't generating a wrapping label, nor a DOM-valid ID, so i'm providing the field's name in dot-notation to label() & checkbox(), and calling $this->Form->domId on the name for the checkbox's id attribute. The for & id match. It's not exactly as elegant as how other inputs handle things, but i can live with it.

Thanks for the help.
-joe


On Wednesday, 3 December 2014 02:15:17 UTC-5, José Lorenzo wrote:
The first argument for label is not "for", it is "fieldName".... From the "fieldName" the "for" attribute is inferred. If you wish to provide you own for attribute, then use label('field_name', 'Label text', ['for' => 'field-id']);

On Wednesday, December 3, 2014 6:14:34 AM UTC+1, Joe Theuerkauf wrote:
Thanks for responding José.

To address the first message, i understand i have to provide the attributes if i build the elements separately. That's what i thought i was doing. The first argument of label() is the [for] attribute (notice i didn't provide any options to label() except 'escape'=>false to render the inner HTML correctly). The variable i set previous to that gets the _domId() treatment. Then in the checkbox call, the $attrId variable is untouched for [id]. The _domId() method isn't public, so i can't treat my variable when using it as the [id]. The result is it doesn't match the label's [for]. It seems like the [id] attribute should always get the _domId() treatment, but currently it looks like _domId() is only applied to the auto-generated [id]. If i provide my own, the auto-generated is skipped, and mine isn't converted - and thus match the label's [for].

Also, as i noted in my original, i tried using just the checkbox call with a 'label' key, and the label was instead used as an attribute, no tag was generated to wrap the checkbox. It may have been unclear in the way i posted it, because it was a secondary issue.

This:
$this->Form->checkbox('checkboxName', ['label' => 'Some Checkbox']);
or
$this->Form->checkbox('checkboxName', ['label' => ['text' => 'Some Checkbox']]);

Produces:
<input type="checkbox" name="checkboxName" label="Some Checkbox">
rather than:
<label for="checkbox-name"><input type="checkbox" id="checkbox-name" name="checkboxName">Some Checkbox</label>

The other inputs don't seem to have that label problem, but i don't know if checkbox is the only one doing this (or why).

The basic structure i'm trying to achieve is something like:
<div>
    <label for="associated-checkbox-1">
        <input type="checkbox" id="associated-checkbox-1" name="associated[checkbox][1]">
    </label>
    <input type="text" name="associated[checkbox][1][value]">
</div>

So, getting to your second message: since the label tag wasn't being generated, and because i needed a little extra customization (the text input is generated/required for some of the checkboxes), i went with building the elements separately. The Form helper is very flexible & i'd like to use it's capabilities, but i wasn't sure how to get the results i needed using the templating system (especially the additional text input).

Which brings me back to my question: if i'm providing the attributes myself, but Form helper is converting some of them with _domId() but not others, how do i get the [for] to match the [id] (and both be DOM-valid)?

Thanks!
-joe


On Tuesday, 2 December 2014 03:03:46 UTC-5, José Lorenzo wrote:
Why not use the form tempting system instead? The Form helper is very flexible in the way that it allows you to create your html

On Tuesday, December 2, 2014 9:01:06 AM UTC+1, José Lorenzo wrote:
If you use label() and checkbox() separately, you re responsible for passing the correct attributes to those 2 functions. For example, for label() you will have to provide the 'for' attribute and for checkbox() the 'id' attribute.
When using the input() function, the label and the checkbox will be generated for you with a matching id for both tags

On Tuesday, December 2, 2014 5:21:47 AM UTC+1, Joe Theuerkauf wrote:
i'm a little confused about how labels & inputs are assigned for/id pairs in FormHelper.

Here's the code i have (it's inside a foreach of an entity collection):

$attrId = 'Listing.ItemAttr.' . $attr->id;
echo
  $this->Html->div('columns small-16 medium-8',
    $this->Form->label($attrId, // [for] attribute
      $this->Form->checkbox(
        $attrId, // [name] attribute
        [
           'id' => $attrId, // [id] attribute - if i skip this for checkbox inputs, i don't get an [id] attribute.
           // 'label' => $attr->name >> turns into <input type="checkbox" label="Attribute Name">
           // other checkbox attributes
        ]
      ) . $attr->name,
      [
         'escape' => FALSE
      ]
    ) // end label
);

The resulting HTML:

<div class="columns small-16 medium-8">
  <label for="listing-itemattr-3">
    <input type="checkbox" id="Listing.ItemAttr.3" name="Listing[ItemAttr][3]">Attribute Name
  </label>
</div>

The label passes the [for] attribute through FormHelper::_domId, which i'd expect. But the [id] attribute doesn't appear to get the same treatment. i changed the checkbox() call to input() and the same ID string was assigned. It looks like an auto-generated ID is passed through _domId, but that only gets into the attributes if 'id' isn't already set in that array.

i also discovered that in the checkbox() method, a 'label' key is turned into an attribute of the input, not used to generate a wrapping <label> element as with most other inputs. Peculiar. So i'm doing this manual structure (which is fine, i also need to customize some other parts of the HTML anyway).

Question 1: In FormHelper::input(), shouldn't the ID attribute be adjusted with _domId after the $options array is complete? Or is there an issue in checkbox() that it's not outputting the generated ID to HTML?

Question 2: Any suggestions how to get the wrapping label's [for] to match the checkbox's [id] until one of the above is addressed?

Thanks.
-joe t.

--
Like Us on FaceBook https://www.facebook.com/CakePHP
Find us on Twitter http://twitter.com/CakePHP

---
You received this message because you are subscribed to the Google Groups "CakePHP" group.
To unsubscribe from this group and stop receiving emails from it, send an email to cake-php+unsubscribe@googlegroups.com.
To post to this group, send email to cake-php@googlegroups.com.
Visit this group at http://groups.google.com/group/cake-php.
For more options, visit https://groups.google.com/d/optout.

No comments: