CODEWITHSUNDEEP
polymer
Luminai
Luminai

Reputation: 27

Iron ajax not working

I'm trying to get iron-ajax working but thus far without success. I have added the component to my bower.json, ran bower install, imported it in the html file I want it to use in and tried to add it to a template.

Usually my IDE auto-completes all Polymer tags just fine but this one just won't work. When I open the page I get the following error: Uncaught ReferenceError: Invalid left-hand side in assignment which points to the " this.$.add-contact.contentType = "application/json";" line, see below.

I am wondering if the element is properly imported or if I'm missing something obvious.

Here's my code:

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-input/paper-input.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
<dom-module id="contact-form">
    <template>
        <style>
        </style>
        <h1>My New Contact</h1>
        <paper-input label="Name" value="{{name}}"></paper-input>
        <paper-input label="Phone Number:" value="{{telnr}}"></paper-input>
        <paper-button on-tap="addContact">Add Contact</paper-button>
        <iron-ajax id="add-contact"
                   method="POST"
                   url="/cgi-bin/add-contact.py"
                   handle-as="json"
                   on-response="addContact_ResponseHandler">>

        </iron-ajax>
    </template>
    <script>
        Polymer({
            is: "contact-form",

            addContact: function () {
                this.$.add-contact.contentType = "application/json";

                this.$.add-contact.body = {naam: this.name, telnr: this.telnr};

                this.$.add-contact.generateRequest();

                console.log("Contact: " + this.name+ ", " + this.telnr);
            }

            addContact_ResponseHandler:
                function(request_confirm) {
                    console.log("Response: " + request_confirm);
                }
        });
    </script>
</dom-module>

Upvotes: 0

Views: 439

Answers (1)

tony19
tony19

Reputation: 138226

this.$.add-contact is actually equivalent to this.$.add - contact (a subtraction of a symbol named contact from the element with an ID of add (neither of which exist).

To access <iron-ajax id="add-contact"> imperatively, use this.$['add-contact'].

Upvotes: 2

Related Questions