Best way to make a ajax POST of form / data

[kas...@easyspeedy.com]

Hi

I am very new to polymer and wondering what the best approach is to post json data back to a server. 

I have tried with polymer-ajax without much success but got it working with jquery:

saveForm: function() {
 $.ajax({
      url:"/users/"+this.user.id,
      type: "POST",
      data : this.user
      }
 )
}

But is there a better way to handle forms and post data to a server using polymer?

As a side information I use http://www.playframework.com/ as server

TIA

Kasper

[Eric Bidelman]

Hey Kasper,

Do you have an example of what's not working? I've used polymer-xhr in the past to create a <a> that performs a POST onclick. It's one level lower than using polymer-ajax, but works:

https://github.com/GoogleChrome/chromium-dashboard/blob/master/static/elements/delete-link.html#L18:L21

You could do something similar for a form post. You'll need to include the JSON data

as the body given to polymer-xhr.

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[kas...@easyspeedy.com]

Hi

Tanks for your suggestion. 

My problem is that it is not JSON I receive on the server when I user polymer-ajax. As an example my body part (using "POST" method) it is formated as a querysting instead:

id=3&email=kasper%40testing.com&credential=%5Bobject%20Object%5D

My test component looks like this:
 

<link rel="import" href="../../polymer-v0.0.20131010/polymer-elements/polymer-ajax/polymer-ajax.html">

<polymer-element name="user-form2" attributes="user">

    <template>

            <form id="myForm">

                <fieldset>

            <label>

                id

                <input value="{{user.id}}"/>

            </label>

            <label>

                email

                <input value="{{user.email}}"/>

            </label>

            <label>

                username

                <input value="{{user.credential.username}}"/>

            </label>

            <label>

                password

                <input value="{{user.credential.password}}"/>

            </label>

            <button on-click="saveForm">Save</button>

        </fieldset>

        </form>

        <polymer-ajax id="postUpdates" url="/users/{{user.id}}" handleAs="json" params="{{user}}" response="{{users}}" method="POST"></polymer-ajax>

    </template>

    <script>

        Polymer('user-form2', {

                    saveForm: function() {

                      this.$.postUpdates.url= encodeURI("/users/"+this.user.id);

                      this.$.postUpdates.params= this.user;

                      this.$.postUpdates.go();

                    },

                    created: function () {

                        this.user = {

                            id: "",

                            email: "",

                            credential: {

                                username: "",

                                password: ""

                            }

                        }

                    }

                }

        )

    </script>

</polymer-element>

What I'm looking for is the "best solution" for form / data posts including validation (both server side and client side) in polymer?

I thinking about implementing http://jquerytools.org/demos/validator/index.html in a polymer component, but is this the right way to go or is there a better approach using polymer?

[Eric Bidelman]

Thanks. I see what's going on now. The problem is with polymer-ajax. It doesn't properly serialize nested objects/arrays. This is why your credential object is ending up as [object Object] in the encode form data. I've filed https://github.com/Polymer/polymer-elements/issues/33 to address this.

In addition, I should have pointed you to the example below (which actually uses a <form>). To ajaxify the form, you'll need something like <form onsubmit="return false">. This sample also gives you an idea on how to do form validation using the constraints api.

https://github.com/GoogleChrome/chromium-dashboard/blob/master/static/elements/chromedash-userlist.html#L36:L59

[Philippe Charrière]

a possible way from @sjmiles (it works fine for me) : https://github.com/Polymer/polymer-elements/issues/33

[cvsnp...@gmail.com]

Hi Eric Bidelman 

This is Praveen Chinta, UI Developer. As of now i need to work with Polymer Forms for my project So kindly Guide me to work with Forms Using Polymer Element Tags.

[Eric Bidelman]

Have a look at https://github.com/garstasio/ajax-form

On Mon, Dec 1, 2014 at 1:54 AM, <cvsnp...@gmail.com> wrote:

Hi Eric Bidelman 

This is Praveen Chinta, UI Developer. As of now i need to work with Polymer Forms for my project So kindly Guide me to work with Forms Using Polymer Element Tags.

Follow Polymer on Google+: plus.google.com/107187849809354688692

---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/574087cb-524a-4ed1-95cf-4fbd7e301a2c%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.