admin管理员组文章数量:1419673
The following is my page code
<!DOCTYPE html>
<html xmlns="">
<head>
<title>GP and Practice search</title> <!-- Scripts -->
<script src="bower_ponents/webponentsjs/webponents-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=':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,
puted: '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
The following is my page code
<!DOCTYPE html>
<html xmlns="http://www.w3/1999/xhtml">
<head>
<title>GP and Practice search</title> <!-- Scripts -->
<script src="bower_ponents/webponentsjs/webponents-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./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,
puted: '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
Reset to default 8I put a simplified working version of your code below. Here are some notes:
This declaration
ajaxParams: { type: String, puted: 'buildSearchRequest();' },is a property definition and has to go inside
propertiesobject.Callback values such as
puted: 'buildSearchRequest();'look like functions but they aren't actual code, and need no trailing
;Your puted function needs to have an argument to tell it when to repute. I modified it to look like this:
puted: '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./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,
puted: '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
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);
}
}
本文标签： javascriptPolymer how to bind paperinput value to ironajaxStack Overflow
版权声明：本文标题：javascript - Polymer how to bind paper-input value to iron-ajax - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745311762a2652966.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论