Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Polymer iron-form post questions

I have been trying to use iron-form with a post method and i have some doubts on how does it works or even if I should be using it at all in some cases. So I am trying to find the answer to the following questions:

  1. From what I understand, iron-form is only used for Ajax requests, so to make a regular post (that refreshes the page), I should not be using it, right? (True/False)

  2. If I do not use the is='iron-form', is there any other way to validate fields for paper-input for example?

  3. (Now this is what confuses me the most.) Using the iron-form with the post method, I only get the form data as "formData: [object Object]", which makes things totally useless on the backend that does not get the form element values ever.

    Such behaviour can be seen on the iron-form demo page https://elements.polymer-project.org/elements/iron-form?view=demo:demo/index.html

    Is there any way to send a post using iron-form and keep the regular post behaviour?

On searching on StackOverflow, this thread seems to take care of a similar problem Sending form with POST method and Polymer iron-form?, although the 'fix' did not work for me as I seem to be using the 1.0.8 version.

bower iron-form#^1.0.0 validate 1.0.8 against git://github.com/PolymerElements/iron-form.git#^1.0.0

The reason for the formData: [object Object] So it seems that the problem is solved in iron-ajax#1.0.4 I am using bower with PolymerElements/iron-elements as a dependency that only bumps until the version 1.0.0 of iron-ajax, once i forced iron-ajax to use v1.0.4 the the Payload from the form post seems to be corrected.

This issue is what drove me there https://github.com/PolymerElements/iron-ajax/pull/80

like image 662
0Ds0 Avatar asked Aug 13 '15 16:08

0Ds0


1 Answers

  1. This is entirely up to your use-case. If you want the page to reload after a post success, one way to do that would be to use the iron-ajax on-response method and just call a function that refreshes the page

html

<iron-ajax
    auto
    url="http://gdata.youtube.com/feeds/api/videos/"
    params='{"alt":"json", "q":"chrome"}'
    handle-as="json"
    on-response="handleResponse"
    debounce-duration="300"></iron-ajax>

js e.g. something like

function handleResponse(){ location.reload(); }

or you could use this idea from robdodson and duplicate all of your form inputs, having each polymer element binding data into a matching hidden regular form element.

  1. There's a bunch of ways, here is one http://plnkr.co/edit/2C7KmE?p=preview

    <numbers-input></numbers-input>
    
    <polymer-element name='numbers-input'>
      <template>
        <paper-input-decorator id='myPaperInput' label='Number' error='numbers only' floatingLabel autovalidate>
          <input is='core-input' pattern='^[0-9]*$'>
        </paper-input-decorator>
      </template>
      <script>Polymer();</script>
    </polymer-element>
    
  2. hmm, not sure about the cause of that. Seems a bad demo/bug. I took a look at the source code but didn't see anything obvious. I wonder if iron-ajax is actually required or something? https://elements.polymer-project.org/elements/iron-ajax could be

like image 198
wesww Avatar answered Oct 21 '22 20:10

wesww