I have used following script :
<input class="typeahead" type="text" id = "input">
$('#input').typeahead([{name: 'name',remote: 'planets.json',}]);
JSON file
{"name" : {"value" : ["4729", "Siva", "Prakash"]},"planets" : {"value" : ["Mercury", "Venus", "Pluto"]}}
While typing on the input box , its display two Json array name value[name , plants]. anyway in my code i have mention name as 'name' only. so it has to return that value from 'name' JSON array only ?
In planets.json it is name->value, or planets->value. Init the typeahead like this instead :
<input type="text" id="input" data-provide="typeahead">
$.getJSON("planets.json", function(json) {
$('#input').typeahead({
source : json.name.value
});
});
or json.planets.value, if you want planets
Related
we can use pattern(regex) for inputs control
like that :
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
My question is can i user Pattern in #html.Editor ?
I tried to use this way:
#Html.Editor("country_code", null, new { htmlAttributes = new { #class = "form-control" , required = "required" , pattern="[A-Za-z]{3}"} })
But pattern="[A-Za-z]{3}" does not recognize
<paper-dialog id="post" entry-animation="scale-up-animation" exit-animation="fade-out-animation">
<div class="find-area">
<paper-textarea on-input="find" id="find_textarea" class="find-place-text" label="Find your place" maxlength="250"></paper-textarea>
</div>
<div class="map-area">
<google-map id="[[map]]"
api-key="000000000myapi000000"
latitude="[[lat]]"
longitude="[[lon]]"
fit-to-markers>
</google-map>
<google-map-search id="google_search"
globalSearch="true"
map="[[map]]"
results="[[results]]">
</google-map-search>
</div>
<paper-button on-tap="[[upload]]">Accept</paper-button>
<label>coords:[[ results::lat ]], [[ results::lon ]]</label>
<label>query:[[ query ]]</label>
<label>map:[[ map ]]</label>
<label>results:[[results]]</label>
</paper-dialog>
<script>
function _showPosition(position) {
try {
x.latitude = position.coords.latitude;
x.longitude = position.coords.longitude;
}catch (err){
alert(err+'; position:'+position)
}
}
function showError(error) {
alert('error:'+ error)
}*/
function _submit(event) {
Polymer.dom(event).localTarget.parentElement.submit();
}
Polymer({
is: 'profile-new-post',
properties: {
enable : {
type: Boolean,
value: true
},
lat : {
value : 37.77493
},
lon : {
value : -122.41942
},
query : {
type : String,
value : ""
},
results : {
type : Array
},
map : {
type : Object
}
},
func : function (e) {
this.map = this.$.map;
post.open();
},
find : function (e) {
this.$.google_search.query = this.$.find_textarea.value;
this.query = this.$.google_search.query;
this.$.google_search.search();
this.lat = this.$.google_search.results.latitude;
this.lon = this.$.google_search.results.longitude;
//alert(this.$.google_search.results.latitude + '; ' + this.$.google_search.results.longitude)
},
I'm trying to use [[]] brackets because of django use {{}}. Map, results and coords are empty at output lables. It shows map with San Francisco but when i try to print text in input it doesn't want to search. The aren't any errors in console. I've saw tutorial video from google about this, but there was old version of Polymer and many things like {{ $.element.atribute }} inside element head doesn't work (it doesn't know what '$' is). Maybe someone can explain for me what's the biggest difference between [[ ]] and {{ }}, because i can't understand it from official tutorial?
Solve: to solve it, i must put source from inside dialog to new template with property is="dom-bind.
<p><paper-button raisedButton on-tap="upload">Upload</paper-button></p>
<paper-button id="dialogbutton" on-tap="func">Post</paper-button>
<paper-dialog id="post" entry-animation="scale-up-animation" exit-animation="fade-out-animation">
<template is="dom-bind">
<div class="find-area">
<paper-input value="{{ input_query }}" on-input="find" id="find_textarea" class="find-place-text" label="Find your place" maxlength="250"></paper-input>
</div>
<div class="map-area">
<google-map-search
id="google_search"
map="{{ map }}"
query="{{ input_query }}"
results="{{results}}"
on-google-map-search-results="searchingComplite">
</google-map-search>
<google-map
map="{{map}}"
latitude="{{results[0}.latitude}}"
longitude="{{results[0}.longitude}}">
</google-map>
</div>
<paper-button on-tap="upload">Accept</paper-button>
<label>coords:{{ lat }}, {{ lon }}</label>
<label>query:{{ query }}</label>
<label>map:{{ map }}</label>
<label>results:{{ results }}</label>
</template>
There are a couple of issues here:
Yes, the [[]] brackets are the problem here because they enforce one-way binding. That means that the results from the google-map-search can't propagate upwards and the labels are empty. You need to change the results=[[results]] to results={{results}} to enable two-way binding
For declerative event handlers, you don't need any brackets. So this line <paper-button on-tap="[[upload]]">Accept</paper-button> should be ?<paper-button on-tap="upload">Accept</paper-button>
To access sub-properties of an data bound object you need to use dot notation (.). This line <label>coords:[[ results::lat ]], [[ results::lon ]]</label> should be changed to <label>coords:[[ results.lat ]], [[ results.lon ]]</label>
I would also change lat and lon to computed properties which either return default values (alternatively just use attributes on your google-map element for that) or the values from your search result.
I've got a strange situation where my template is not rendering every field
In this template everything within the #each renders correctly.
The first {{photographer}} in the h2 is blank, however. Same template. Any ideas?
This happens the same way with a different template too.
this can be seen at http://photo-story.meteor.com/photog/Dean
full code at https://github.com/deanwenick/cf07-stories
Thanks a lot
'<template name="photog">
<h2>These are {{photographer}}'s stories</h2>
{{#each photog}}
<img src="{{photos.[0]}}" alt="great image from a story">
<div class="caption">
<h3>{{storyName}}</h3>
<p>Photographer: {{photographer}}</p>
<p>Editor: {{editor}}</p>
</div>
{{/each}}
</template>'
The photographer's name isn't available outside of the {{#each}} section of the template because the data returned from your photog route's query has no top-level photographer field:
{
"photographer" : "Dean",
"editor" : "Dean",
"votes" : 0,
"photos" : [
"/pics/wenick_20131110_171.jpg",
"/pics/wenick_20131110_182.jpg"
],
"storyName" : "D2BS West 2013",
"_id" : "GCYR9MnYrrvxRSBQB"
}
{
"photographer" : "Dean",
"editor" : "Dean",
"votes" : 1,
"photos" : [
"/pics/wenick_20130409_149.jpg",
"/pics/wenick_20130409_158.jpg"
],
"storyName" : "Bill's Party",
"_id" : "tCrFAm7X6vFSbiadC"
}
You can add another returned data value in the photog route (in client/helpers/router.js) so that it looks like this:
return {
photog: Stories.find( {photographer: this.params.photographer} ),
photographer: this.params.photographer
};
...and then ensure that the line referencing the photographer's name (in client/views/stories/photog.html) is this:
<h2>These are {{photographer}}'s stories</h2>
The whole template is called on an object that is not shown. Lets all call this object top. I assume it looks like this:
{
"photog": [
{
"photographer": "name",
"editor": "name",
"photos": []
},
{
"photographer": "name2",
"editor": "name2",
"photos": []
}
]
}
The {{#each}} loops through the called photog array. Inside the each the variable scope is changed so that you can directly access {{photographer}}.
But outside of the each, which {{photographer}} should the template reference? It doesn't know. One solution would be to hard wire this with a template helper. Add something like this to your javascript:
Template.photog.photographer = function()
{
return "the name";
}
I am using a Rowexpander inside a ExtjsGrid. RowExpander's template has text area which is used to get values from the user.
Below is my code.How can I read the value
var expander = new Ext.ux.grid.RowExpander({
tpl : new Ext.Template(
'<p><b></b><div class="abc"> <input type="textarea" id = "hans_" name ="hans_" value = "{comment}"</ div></p><p></p><p>{promptMsg}</p>'
),
listeners:
{
expand: function(ex, record, body, rowIndex){
},
collapse: function(ex, record, body, rowIndex){
}
}
});
Solved ...
Below is the solution
Give a dynamic names to textarea of template
'<p><b></b><div> <textarea rows="2" cols="100" id = "{qnNum}" name ="{qnNum}" > {comment} </textarea><b></b></ div></p><p></p>'
Read the values
document.getElementById(record.data.qnNum);
Using the doc, I can set my own helper for the layout surrending my field, but I'd like to personalize also some fields given by play.
The main reason is for Twitter Bootstrap 2, where I need to change (in checkbox.scala.html)
#input(field, args:_*) { (id, name, value, htmlArgs) =>
<input type="checkbox" id="#id" name="#name" value="#boxValue" #(if(value == Some(boxValue)) "checked" else "") #toHtmlArgs(htmlArgs.filterKeys(_ == 'value))>
<span>#args.toMap.get('_text)</span>
}
to :
<label class="checkbox">
<input type="checkbox" name="#name" id="#id" value="#boxValue" #(if(value == Some(boxValue)) "checked" else "") #toHtmlArgs(htmlArgs.filterKeys(_ == 'value)) />
#args.toMap.get('_text)
</label>
How can I do that ?
Thanks for your help!
I finally did it like this :
I created a package views.helpers.form, that contains :
bootstrap.scala.html :
#(elements: helper.FieldElements)
<div class="control-group#if(elements.hasErrors) { error}">
<label class="control-label" for="#elements.id">#elements.label(elements.lang)</label>
<div class="controls">
#elements.input
#elements.infos(elements.lang).map { info =>
<span class="help-inline">#info</span>
}
#elements.errors(elements.lang).map { error =>
<span class="help-block">#error</span>
}
</div>
checkbox.scala.html :
#**
* Generate an HTML input checkbox.
*
* Example:
* {{{
* #checkbox(field = myForm("done"))
* }}}
*
* #param field The form field.
* #param args Set of extra HTML attributes ('''id''' and '''label''' are 2 special arguments).
* #param handler The field constructor.
*#
#(field: play.api.data.Field, args: (Symbol,Any)*)(implicit handler: helper.FieldConstructor, lang: play.api.i18n.Lang)
#boxValue = #{ args.toMap.get('value).getOrElse("true") }
#helper.input(field, args:_*) { (id, name, value, htmlArgs) =>
<label class="checkbox">
<input type="checkbox" id="#id" name="#name" value="#boxValue" #(if(value == Some(boxValue)) "checked" else "") #toHtmlArgs(htmlArgs.filterKeys(_ == 'value))>
#args.toMap.get('_text)
</label>
div>
</div>
And in my template, all I have to do is :
#import helper.{FieldConstructor, inputText, inputPassword} #** Import the original helpers *#
#import helpers.form.checkbox #** Import my helpers *#
#implicitField = #{ FieldConstructor(helpers.form.bootstrap.f) }
And voilà! It works!
It will be simpler to just write your own tag with the code you want and use it instead of the provided helper. It will simplify potential issues related to overwritting platform tags.