Polymer how to link input paper value with iron-ajax
Below is the code of my page
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>GP and Practice search</title> <!-- Scripts -->
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="elements/elements.html" />
<link rel="stylesheet" type="text/css" href="Styles/styles.css" />
<link rel="stylesheet" type="text/css" href="Styles/home.css"/>
<!-- google fonts definitions -->
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
</head>
<body unresolved class="fullbleed layout vertical">
<dom-module id="page-scafolding">
<template>
<paper-drawer-panel elevation="1">
<paper-header-panel main mode="waterfall-tall">
<paper-toolbar id="mainToolbar">
<paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>
<span class="flex"></span>
<paper-icon-button icon="search" on-tap="srchandler" id="srchandler"></paper-icon-button>
<input type="text" id="searchText" hidden$="{{hideSearch}}" onkeypress="handleKeyPress(event);" />
<div class="middle paper-font-display2 app-name ident">Search</div>
</paper-toolbar>
<paper-material elevation="1" class="contentContainer" >
<div id="Content" >
<span>
<paper-input id="searchCriteria"
class="searchBox"
label="Code or name of the GP or Practice you are looking for?" />
</span>
<div style="text-align:center; padding:10px;">
<paper-button tabindex="0" raised="true" class="colorful" on-click="searchPractice">Search for Practice</paper-button>
<paper-button tabindex="0" raised="true" class="colorful" on-click="searchPractice">Search for GP</paper-button>
</div>
<div id="SearchResult">
<template is="dom-repeat" items="{{data}}">
<p><span>{{item.Name}}</span> (<span>{{item.PracticeCode}}</span>)</p>
</template>
</div>
</div>
</paper-material>
<iron-ajax id="GPSearch"
url="/GPPractices.ashx"
handle-as="json"
last-response="{{data}}"
params='{{ajaxParams}}'
handleerror="handleError">
</iron-ajax>
</paper-header-panel>
</paper-drawer-panel>
</template>
<script>
Polymer({
is: "page-scafolding",
ready: function () {
this.hideSearch = true;
this.$.searchText.keyup(function (e) {
alert('off to search for something!');
});
},
ajaxParams: {
type: String,
computed: 'buildSearchRequest();'
},
buildSearchRequest: function () {
return {
Command: 'Search',
Criteria: this.$.searchCriteria
}
},
srchandler: function () {
// search for contents of search box is showing, otherwise show it.
if (!this.hideSearch)
{
alert('off to search for something!');
}
else {
this.hideSearch = !this.hideSearch;
if (!this.hideSearch) {
this.$.searchText.focus();
}
}
},
searchPractice: function () {
try {
this.$.GPSearch.generateRequest();
}
catch (e) {
alert("Whoops! " + e.message);
}
},
handleError: function (request, error) {
alert('Whoops! ' + error);
}
});
</script>
</dom-module>
<page-scafolding />
</body>
</html>
I have an ajax call and a call to GPPractices.ashx is called. What I am trying to do is pass two parameters to this page. One is Command and is set to "search", the other is whatever is entered in paperInput called searchCriteria.
The problem is not getting the two parameters Command and Criteria. I get an empty QueryString and it doesn't look the way buildSearchRequest ever gets called.
So how can I get it so that if I type the word "abba" in paper input the query string should be
Command=search&criteria=abba
source to share
I got it working. Not sure if this is officially the best way, but by changing the code of the searchPractice function to the following, the correct QueryString is sent and the search is performed.
searchPractice: function () {
try {
this.$.GPSearch.params = {
Command: 'Search',
Criteria: this.$.searchCriteria.value
};
this.$.GPSearch.generateRequest();
}
catch (e) {
alert("Whoops! " + e.message);
}
}
source to share
I've posted a simplified working version of your code below. Here are some notes:
-
This ad
ajaxParams: { type: String, computed: 'buildSearchRequest();' },
- this is the definition of the property and must pass inside the object
properties
. -
Callback values such as
computed: 'buildSearchRequest();'
look like functions, but they are not actual code and do not need completion
;
-
Your computed function must have an argument to tell it when it needs to be recalculated. I changed it like this:
computed: 'buildSearchRequest(searchCriteria)'
and I tied
searchCriteria
to the entrancevalue
. -
Event handlers in Polymer code use the notation
on-
, soonkeypress="handleKeyPress(event);"
it should be
on-keypress="handleKeyPress"
-
The iron-ajax error notification via the event is called
error
, sohandleerror="handleError"
it should be
on-error="handleError"
-
I added a bit
stringify
and parameter output just so you can see that it is computed as you type, this is not necessary for your use case. -
HTML is missing just a tiny fraction of the elements (no end tag). You should avoid
<tag-name/>
it because it will cause problems in the long run.
Live: http://jsbin.com/sorowi/edit?html,output
<dom-module id="page-scafolding">
<template>
<paper-input
label="Code or name of the GP or Practice you are looking for?"
value="{{searchCriteria}}">
</paper-input>
<br>
<div style="text-align:center; padding:10px;">
<paper-button tabindex="0" raised="true" style="background-color: lightblue;" on-click="searchPractice">Search for Practice</paper-button>
</div>
<iron-ajax id="GPSearch"
url="/GPPractices.ashx"
handle-as="json"
last-response="{{data}}"
params="{{ajaxParams}}"
on-error="handleError">
</iron-ajax>
<br><br>
ajaxParams: <span>{{stringify(ajaxParams)}}</span>
<div id="SearchResult">
<template is="dom-repeat" items="{{data}}">
<p><span>{{item.Name}}</span> (<span>{{item.PracticeCode}}</span>)</p>
</template>
</div>
</template>
<script>
Polymer({
is: "page-scafolding",
properties: {
ajaxParams: {
type: String,
computed: 'buildSearchRequest(searchCriteria)'
}
},
stringify: JSON.stringify,
buildSearchRequest: function (criteria) {
return {
Command: 'Search',
Criteria: criteria
};
},
searchPractice: function () {
this.$.GPSearch.generateRequest();
},
handleError: function(e) {
alert('Whoops! ' + e.detail);
}
});
</script>
</dom-module>
NTN
source to share