Recently, I created an HTML page for handling Password Reset functionality on our website. We have decided to make POST calls to the server and are implementing it using polymer. Below is a snippet of the code:
<dom-module id="user-password-reset">
<template>
<div class="popup">
<h5 class="popup-heading">Forgot Password</h5>
<div class="popup-body">
<div class="form-group">
<label for="FormInput-UserEmail">Provide your Email Address</label>
<input type="email" class="form-control" id="FormInput-UserEmail" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8de3ece0e8cde8f5ece0fde1e8a3eee2e0">[email protected]</a>" value="{{ email::input }}">
</div>
<br/>
<div class="text-center">
<button type="button" class="btn" on-click="onSubmit">Reset Password</button>
</div>
</div>
</div>
<core-ajax
id="AjaxPost"
auto="false"
url="/api/user/email"
method="POST"
content-type="application/json"
handle-as="json"
on-core-response= _handleAjaxPostResponse
on-core-error= _handleAjaxPostError
></core-ajax>
</template>
<script>
Polymer({
is: 'user-password-reset',
behaviors: [
Polymer.IronOverlayBehavior
],
properties: {
email: { type: String },
},
onSubmit: function( event ) {
this.$.AjaxPost.params = JSON.stringify( { email: this.email } );
console.log( this.$.AjaxPost );
this.$.AjaxPost.go();
},
_handleAjaxPostResponse: function( event ) {
/* Do Something */
},
_handleAjaxPostError: function( event ) {
/* Do Something */
},
});
</script>
</dom-module>
In the console :
<core-ajax id="AjaxPost" auto="false" url="http://localhost:8080/api/user/email" method="POST" content-type="application/json" handle-as="json" class="style-scope user-password-reset"></core-ajax>
An error message is displayed:
Uncaught TypeError: this.$.AjaxPost.go is not a function
I am seeking advice on how to resolve this issue. What steps should I take next?