Polymer how to bind paper-input value to iron-ajax
Question
The following is my page code
<!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 got the ajax call being made and a call to GPPractices.ashx is being made. What I am trying to do is pass two parameters to this page. One is Command and has the value 'search', the other parameter is whatever is input into the paperInput called searchCriteria.
The trouble is instead of getting two parameters Command and Criteria. I am getting an empty QueryString and it does not look like buildSearchRequest is ever called.
So how can I get it so that if I type say 'abba' into the paper-input the query string should be
Command=search&criteria=abba
2 answers
solution1
8 2015-06-26 08:15:51
I put a simplified working version of your code below. Here are some notes:
This declaration
ajaxParams: { type: String, computed: 'buildSearchRequest();' },is a property definition and has to go inside
propertiesobject.Callback values such as
computed: 'buildSearchRequest();'look like functions but they aren't actual code, and need no trailing
;Your computed function needs to have an argument to tell it when to recompute. I modified it to look like this:
computed: 'buildSearchRequest(searchCriteria)'and I bound
searchCriteriato the inputvalue.Event handlers in Polymer code use
on-notation, soonkeypress="handleKeyPress(event);"should be
on-keypress="handleKeyPress"iron-ajax error notification is via event called
error, sohandleerror="handleError"should be
on-error="handleError"I added the
stringifybit and the output of the params just so you could see it calculating as you type, it's not necessary for your use case.Only a tiny handful of elements are void in HTML (need no closing tag). You should avoid doing
<tag-name/>because it will cause trouble eventually.
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>
HTH
solution2
0 ACCPTED 2015-06-25 20:53:50
I got it to work. 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 works.
searchPractice: function () {
try {
this.$.GPSearch.params = {
Command: 'Search',
Criteria: this.$.searchCriteria.value
};
this.$.GPSearch.generateRequest();
}
catch (e) {
alert("Whoops! " + e.message);
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.