How to group data with fixed header template in list view? Here is my sample code:
jsfiddle
FYI, I don't have server grouping. I want to display data by sample_number and date_collected. Can anyone help with this.
JSON Data:
d{analytical_value:1002.0, data_collected:01/14/14, parameter:Density #15C, sample_number:"1"}
here is my updated code sample.
I've passed the I've passed the array d from the returned data to the template.
Note, in my sample, I'm use the hardcoded data you sent and not data from the service.
<div data-role="view" id="foo" data-init="mobileListViewHeadersInit">
<ul id="list"></ul>
</div>
<script id="tmp" type="text/x-kendo-template">
#: __type # <br />
#: date_collected #<br />
#: parameter #<br />
#: analytical_value #
</script>
<script>
var app = new kendo.mobile.Application(document.body);
var ds = {"d":[{"__type":"Service1.Sample:#MobileWCFService","analytical_value":"1002.0 ","date_collected":"01\/14\/14","letter":"1","parameter":"Density # 15°C "},{"__type":"Service1.Sample:#MobileWCFService","analytical_value":"464.0 ","date_collected":"01\/14\/14","letter":"1","parameter":"Viscosity # 50 °C "}]};
function mobileListViewHeadersInit(){
$("#list").kendoMobileListView({
dataSource: kendo.data.DataSource.create({data: ds.d}),
template: $("#tmp").html()
});
}
</script>
Related
Need to check format of the value of a textfield inside the Javascript.
I am using thymeleaf for rendering the page.
To achieve this I plan to use th:id and use this inside Javascript (similar to document.getElementById and read the value. But I donot know how to get the value of the textfield inside the javascript as I am doing an iteration..
Below is the scenario
While iterating through a Map<String,Field> (where Field is a class containing two elements fieldValueList (List) and timeField(boolean) check for the format of the textField entered in the page, (format of the textfield should be hh:mm:ss) need to be done in javascript. I used id for reading the value, but donot know how to get the value of the textfield inside the javascript.
The code for the page is
<fieldSet th:each="fieldKey,fieldKeyIndex : *{recipeFieldMap.keySet()}">
<div class="fieldDiv" th:each="fieldVal,field : *{recipeFieldMap[__${fieldKey}__].fieldValueList}">
<span class="fieldSpan" th:if="*{recipeFieldMap[__${fieldKey}__].timeField}">
<input type="text" th:id="|text_${fieldKeyIndex.index}_${field.index}|" th:field="*{recipeFieldMap[__${fieldKey}__].fieldTimeValueList[__${field.index}__].displayStr}" onchange="checkTimeStr()">
<script th:inline="javascript">
/*<![CDATA[*/
function checkTimeStr() {
// Something like this.. to read the value
//var value = document.getElementById('/* text_${groupKeyIndex.index}_${field.index} */').value;
//alert(value)
}
/*]]>*/
</script>
</span>
<span class="fieldSpan" th:unless="*{recipeFieldMap[__${fieldKey}__].timeField}">
<input type="text" th:field="*{recipeFieldMap[__${fieldKey}__].fieldValueList[__${field.index}__]}">
</span>
</div>
</fieldSet>
enter image description here
try this:
<script th:inline="javascript">
[[${field.index}]]
</script>
I'm trying to update a property in a polymer element with data from an ajax api call. I have something similar working elsewhere in the app where users are able to add packages dynamically.
Anyone know what I'm doing wrong here?
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="address-input.html">
<link rel="import" href="package-list.html">
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
<dom-module id="step-one">
<style>
</style>
<template>
<section id="addresses">
<div class="container">
<div class="row">
<h5>Addresses</h5>
<address-input></address-input>
</div>
</div>
</section>
<section id="packages">
<div class="container">
<div class="row">
<h5>Packages</h5>
<package-list></package-list>
</div>
</div>
</section>
<section id="submit-shipping-info">
<div class="container">
<div class="row">
<a class="waves-effect waves-light btn col s12 m12 l12" id="submit" on-click="submitInfo">Submit</a>
<template is="dom-repeat" items="{{options}}">
<p>{{item.rates}}</p>
</template>
</div>
</div>
</section>
</template>
</dom-module>
<script>
Polymer ({
is: 'step-one',
properties: {
options: {
type: Object,
notify: true,
value: []
}
},
submitInfo: function(e) {
e.preventDefault();
//add dimensions of all packages to the dimensions array
var dimensions=[];
$('#packages .package-card').each(function(){
var weight= $(this).find('.weight').val();
var length= $(this).find('.length').val();
var height= $(this).find('.height').val();
var width= $(this).find('.width').val();
var dimension={width:width,length:length,height:height,weight:weight};
dimensions.push(dimension);
});
//capture address data
var from = $('#fromAddress').val();
var to = $('#toAddress').val();
//URL that processes getting a URL
var getQuoteURL = '../v2/API/get_rates.php';
var stuff = [];
jQuery.ajax({
type: "POST",
dataType: "json",
cache: false,
url: getQuoteURL,
data:{
from:from,
to:to,
dimension:dimensions
}
}).done(function(data){
$.each(data['rates'], function(i, rate ) {
stuff.push({carrier:rate.carrier});
return stuff;
});
//show step two when ajax call completes
$('.step-two').removeClass('hide').addClass('show');
console.log(stuff);//I can see all objects I need to pass to the 'options' property
return stuff;
});
this.push('options',stuff);//doesn't seem to update the 'options' property with these as a value
}
});
</script>
I'm able to console.log the array i'm trying to use, but when I try to push it to the 'options' property, it won't update.
Consider using Polymer built in methods instead of jQuery.
1. A button to submit a request.
<paper-button on-click="handleClick">Send a package</paper-button>
2. AJAX requests using <iron-ajax> element!
<iron-ajax id="SendPkg"
url="my/api/url"
method="POST"
headers='{"Content-Type": "application/json"}'
body={{packageDetails}}
on-response="handleResponse">
</iron-ajax>
3. Handle the on-click event,
On click, select <iron-ajax> by ID and call <iron-ajax>'s generateRequest()
Use either data binding or Polymer's DOM API to get the package's width, height ...etc
handleClick: function() {
this.packageDetails = {"width": this.pkgWidth, "height": this.pkgHeight };
this.$.SendPkg.generateRequest();
},
4. Handle the response
handleResponse: function() {
//Push data to options...
},
return stuff;
});
this.push('options',stuff);//doesn't seem to update the 'options' property with these as a value
should be
return stuff;
this.push('options',stuff);//doesn't seem to update the 'options' property with these as a value
)};
otherwise
this.push('options',stuff);
is executed before data has arrived
The solution ended up being to put this into a variable:
var self = this;
then in the ajax .done() replace the value of the object with the new object from the ajax call.
self.options = stuff;
I guess you have to put "this" into a variable before you can overwrite it's values. Then the other issue was that I was trying to use .push() to add to it, but really all I needed to do was replace it. (Using self.push('options',stuff); didn't seem to work as far as adding to an object)
I'm using an input field with google places autocomplete. I' ve set autocomplete to predict only cities but I'm stuggling to find a simple way to get the unique place_id of the selected city. I don't want to use it with google maps. I need it just to identify with a unique value the selected city.. Thanks in advance..
Here's my JS:
<script src="maps.googleapis.com/maps/api/js?libraries=places"; type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
var options = { types: ['(cities)'] };
var input = document.getElementById('searchCity');
var autocomplete = new google.maps.places.Autocomplete(input,options);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
And here's my PHP:
<form method="GET" action=<?php echo $_SERVER['PHP_SELF'];?>>
<input id="searchCity" type="text" size="50"
placeholder="Enter a City" autocomplete="on" name="city">
<br>
<?php if (!empty($_GET['city']) ) {
echo $_GET['city'];
} else {
echo "not set";
}
unset($_GET['city']); ?>
</form>
<!-- Here I would like to show the place_id of the selected city-->
</div>
You don't need PHP to display the place details. You just need a Javascript event handler for place_changed.
E.g. add this code to your initialize function:
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
var form = input.parentElement;
form.appendChild(document.createTextNode("Place ID is " + place.place_id));
});
These samples from Google's docs contain complete examples of using the place_changed event. They're worth looking at:
https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete
https://developers.google.com/maps/documentation/javascript/examples/places-placeid-finder
I am migrating segments of Spring MVC code into AngularJS and hit the following problem:
In Spring, there is a nice tag that will take a Collection (or Map) of items and a property path to magically generate a list of checkboxes and have the selected ones checked;
<form:checkboxes path="selectedItems" items="${items}" />
where selectedItems is a List of value and items is Map of value and name.
Yes I can display all the checkboxes using this code:
<span ng-repeat="(key, value) in items" >
<input type="checkbox" ng-value="key" > <label class="label" >{{value}}</label>
</span>
But the trick is how we can auto select the checkboxes based on the values in the selectedItems and then bind it when the user select/unselect other items?
Directive give your html tag more power. I wrote a simple directive which will take a property "items" to generate a list of checkboxes and checked the selected ones according to item's status.
HTML: define data in your controller and add tag < checkboxes >
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Angular test</title>
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="js/app.js"></script>
<div ng-controller="CheckboxesCtrl">
<checkboxes items="items"></checkboxes>
<button ng-click="changeData()">change data</button>
</div>
</body>
</html>
App.js define controller and directive
var app = angular.module('myApp',[]);
app.controller('CheckboxesCtrl',function($scope){
//fake data
$scope.items = [{label:"A",checked:true},{label:"B",checked:true},{label:"C",checked:false}];
//data binding test
$scope.changeData = function(){
$scope.items[0].checked=false;
$scope.items[0].label="changed A";
}
});
//checkboxes directive
app.directive('checkboxes',function(){
return {
restrict: "E",
scope:{
items: "="
},
template: '<div ng-repeat="item in items">'+
'<input type="checkbox" ng-value="{{item.label}}" ng-checked="item.checked" />'+
' <lable class="label"> {{item.label}} </label>'+
'</div>'
};
});
I used ng-checked directive to process checkbox status binding. You could try my test JSFiddle.
Hope this is helpful for you.
Basically the template wont render to a ScrollView using kendo.render(template, response) but WILL work with content = template(response) - BUT this has no styling in view -- see comment below
How to make the template render with kendo stylign in view?
BTW response from api call is JSON:
{"event_id":"5","stamp":"2013-01-24 06:00:00","type":"Event Type","loc":"Location","status":"1"}
<!-- eventDetail view -------------------------------------------------------------------------------------------------->
<div data-role="view" id="view-eventDetail" data-show="getEventDetailData" data-title="eventDetail">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
<a data-align="right" data-role="button" class="nav-button" href="#view-myEvents">Back</a>
</div>
</header>
<div id="eventDetail" data-role="page"></div>
</div>
<script id="eventDetail-template" type="text/x-kendo-template">
--><form id="addEventForm"><p>
<input name="event_type" id="event_type" data-min="true" type="text" value="#= type #" />
</p>
<p>
<input name="event_loc" id="event_loc" data-min="true" type="text" value="#= loc #" />
</p>
<p>
<input name="event_date_time" id="event_date_time" data-min="true" type="datetime" value="#= stamp#" />
</p>
<p>
Share this
<input data-role="switch" id="event_share" data-min="true" checked="checked" value="1"/></p>
<p>
<input type="button" id="eventCancelButton" style="width:30%" data-role="button" data-min="true" value="Cancel" />
<input type="submit" id="eventDoneButton" style="width:30%" data-role="button" data-min="true" value="Done" />
</p></form><!--
</script>
<script>
//eventDetail engine
function getEventDetailData(e) {
$.ajax({
url: 'http://localhost/mpt/website/api/event_details.php?',
type: "GET",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: { userID: 2, eventID: e.view.params.id },
success: function(response) {
console.log(response);
var template = kendo.template($("#eventDetail-template").html()),
content = template(response);//works but no kendo css
//content = kendo.render(template, response);not working
$("#eventDetail")
.kendoMobileScrollView()
.data("kendoMobileScrollView")
.content("<!--" + content + "-->");
}
});
}</script>
The widget classes (like km-button) are not added until the widget is initialized.
The template() and render() functions just return the template as a string with the data replaced (replaces #=foo# with the value of the foo property) but does not init all the widgets. In fact, it coldn't initialize the widgets if it wanted to singe it just returns a text string, not DOM elements. The initialization of the widgets is usually done by the parent widget that is using the template.
render() is not working in your case because its 2nd argument is supposed to be an array. All it does is call the given template function once per item in the array and concatenate the results. If you instead did:
var content = kendo.render(template, [response]); // wrap response in an array
it would return the same text string as template(response). It just provides a way to apply the same template to many items at once.
Normally when you create a widget, in your case calling .kendoMobileScrollView() you would expect it to turn any HTML contents of that element into widgets too, but it looks like the ScrollView widget doesn't do this. I think its intent may have been to just display pages of static content, not other widgets.
There is a Kendo method that isn't listed in the docs, kendo.mobile.init(contents); that you might be able to use to turn your template string into widgets. When I tried it in a jsFiddle it threw some error for me, but you could try something like:
var content = template(response); // apply response to template
var contentElements = $(content); // turn the string into DOM elements
kendo.mobile.init(contentElements); // turn elements into widgets (this throws error for me)
$("#eventDetail").html(contentElements); // add contents to the desired element
$("#eventDetail").kendoMobileScrollView(); // create the scroll view
Also, what is with the end and begin comment bits hanging off the ends of the template? I don't see why those are needed. Might be better to remove them.
The ScrollView widget is supposed to take a series of <div> elements as its children. It then pages between them as you swipe left/right across the control. I don't see you adding a series of <div>s anywhere.