Proper handling of Paper elements

[eximius313]

There are three Paper elements not handled correctly by Ajax Form 2.0.0
1)Paper checkbox

<core-label for="#myPaperCheckbox">
    <paper-checkbox id="myPaperCheckbox" name="myPaperCheckbox" checked></paper-checkbox>
Text</core-label>

Even though paper checkbox have - like regular checkbox - an "checked" attribute, Ajax form doesn't take it into consideration. One have to do a workaround like this:

document.querySelector('#myForm').addEventListener('submitting', function(e) {
    var formData = e.detail.formData;
    var myPaperCheckbox = document.getElementById('myPaperCheckbox');
    if (!myPaperCheckbox.checked) {
        formData[myPaperCheckbox.id] = '';
    } else {
        formData[myPaperCheckbox.id] = myPaperCheckbox.checked;
    }
}

2)Paper checkbox group
Same here:

<div id="myPaperCheckboxes" class="checkbox-group">
    <core-label for="#myPaperCheckboxes_OPTION1"><paper-checkbox id="myPaperCheckboxes_OPTION1" name="myPaperCheckboxes[]" value="OPTION1" checked></paper-checkbox>Option 1</core-label>
    <core-label for="#myPaperCheckboxes_OPTION2"><paper-checkbox id="myPaperCheckboxes_OPTION2" name="myPaperCheckboxes[]" value="OPTION2"></paper-checkbox>Option 2</core-label>
</div>

The workaround is:

document.querySelector('#myForm').addEventListener('submitting', function(e) {
    var formData = e.detail.formData;
    var myPaperCheckboxes = [];
    [].forEach.call(document.querySelectorAll("#myPaperCheckboxes paper-checkbox[checked]"), function(el,i){
        myPaperCheckboxes.push(el.getAttribute("value"));
    });
    formData[myPaperCheckboxes.id+'[]']=myPaperCheckboxes;
}

And last, but not least, paper radio group, which has standard "selected" attribute is not working as well:

<paper-radio-group id="myPaperRadioGroup " selected="OPTION1">
    <paper-radio-button name="OPTION1" label="Option 1"></paper-radio-button>
    <paper-radio-button name="OPTION2" label="Option 2"></paper-radio-button>
</paper-radio-group>

The workaround:

document.querySelector('#myForm').addEventListener('submitting', function(e) {
    var formData = e.detail.formData;
    var myPaperRadioGroup = document.getElementById('myPaperRadioGroup');
    if (!myPaperRadioGroup.selected) {
        formData[myPaperRadioGroup.id] = '';
    } else {
        formData[myPaperRadioGroup.id] = myPaperRadioGroup.selected;
    }
}

Can you please fix it?
Kind regards

[rnicholus]

ajax-form needs some way to easily identify custom checkbox/radio elements without hard-coding custom element names. The best way to do this seems to be to rely on a role attribute. The value of this attribute can be either "checkbox" or "radio". Your custom elements should have proper role attributes anyway, in order to make your page more accessible.

So, everything should work fine (according to the unit tests) assuming you have the proper role attribute on your elements. I'll open a case to remind me to make this clearer in the documentation in the next release.

[eximius313]

They have such roles (added in JS by polymer):

role="checkbox"

and

role="radio"

and yet, they're still ignored by Ajax Form

[rnicholus]

Then there must be some other issue specific to your setup that is not obvious by looking at your markup. Role based checkbox and radio button handling absolutely works in Ajax form as far as I can tell, and the automated browser tests back this up. If you are seeing something different and are able to conclusively determine that there is an issue with this library, please provide a link when this can be reproduced live.

On Mon, May 25, 2015 at 5:25 PM, Kamil [email protected] wrote:

They have such roles (added in JS by polymer):

role="checkbox"

and

role="radio"

and yet, they're still ignored by Ajax Form

Reply to this email directly or view it on GitHub:
#63 (comment)

[eximius313]

How I can send you a PM with access?

[rnicholus]

Please create a publicly accessible instance that reproduces the issue. You can use, for example, jsfiddle, jsbin, or something similar.

On Mon, May 25, 2015 at 6:25 PM, Kamil [email protected] wrote:

How I can send you a PW with access?

Reply to this email directly or view it on GitHub:
#63 (comment)

[eximius313]

I see it impossible to add polymer elements and ajax-form library dependences in jsfiddle or jsbin.
But if you wrap my examples in

<script src="components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="components/ajax-form/ajax-form.html">
<link rel="import" href="components/paper-radio-group/paper-radio-group.html">
<link rel="import" href="components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="components/paper-radio-button/paper-radio-button.html">

<form action="/myForm" method="POST" is="ajax-form" id="myForm">
MY CODE HERE
</form>

you will have a complete example.

Could you please look at it?

[rnicholus]

Sorry, I really don't have time. If you want me to investigate further, please provide a public link to an example where I can quickly reproduce. It would be helpful to hear why exactly your case isn't working and what is wrong with the code, since there is unit test coverage.

On Thu, May 28, 2015 at 8:03 AM, Kamil [email protected] wrote:

I see it impossible to add polymer elements and ajax-form library dependences in jsfiddle or jsbin.
But if you wrap my examples in

<script src="components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="components/ajax-form/ajax-form.html">
<link rel="import" href="components/paper-radio-group/paper-radio-group.html">
<link rel="import" href="components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="components/paper-radio-button/paper-radio-button.html">
<form action="/myForm" method="POST" is="ajax-form" id="myForm">
MY CODE HERE
</form>

you will have a complete example.

Could you please look at it?

Reply to this email directly or view it on GitHub:
#63 (comment)