I would like to paginate the iron ajax response but I didn't succeed until now. Any help
<template is="dom-bind">
<iron-ajax auto url="test2.json"
params = '{"A":"5", "B":"888"}'
handle-as="json" last-response="{{signups}}"></iron-ajax>
<vaadin-grid items="{{signups}}">
<table>
<colgroup>
<col name="A"/>
<col name="B"/>
</colgroup>
</table>
</vaadin-grid>
</template>
Try something like params = "[[_getParams(A,B,page)]]", then everytime you page++ a new call will be made with the latest params from _getParams()
Related
I have the following table:
<vaadin-grid id="temp" style=" height:70vh;">
<table>
<colgroup>
<col name="Column1"/>
<col name="ColumnTime"/>
</colgroup>
<thead>
<tr>
<th >Column1</th>
<th >ColumnTime</th>
</tr>
</thead>
</table>
</vaadin-grid>
and my datasource:
{
"Column1": "My Name",
"ColumnTime": "<iron-icon icon='image:timelapse' style='cursor:pointer'></iron-icon>"
}
The problem is that the Vaadin-Grid does not deploy the Iron-Icon:
I have noticed that it is because it is within a SPAN element; Which is automatically added by Vaadin, any idea how to make the Iron-Icon deploy?
You can also use Data Renderers: https://cdn.vaadin.com/vaadin-core-elements/master/vaadin-grid/demo/formatting.html
You could try the HTML Renderer:
grid.getColumn("ColumnTime").setRenderer(new HtmlRenderer());
Please take a look at the upcoming v2.0.0 with actual template support.
https://cdn.vaadin.com/vaadin-grid/2.0.0-alpha1/demo/
I created xquery function which returns a table:
declare function local:table($collection as xs:string*, $interface as xs:string?, $date as xs:string?) as node() {
<table border="1">
<thead>
<tr>
<th>Inteface Name</th>
<th>Test Date</th>
<th>Test Result</th>
<th>Report Link</th>
</tr>
</thead>
<tbody>
{
for $child in xmldb:get-child-resources($collection)
let $doc := fn:doc(fn:concat($collection, '/', $child))
where (fn:ends-with($child, '.xml'))
and (($doc//*:interfaceName/text() eq $interface) or empty($interface))
and (($doc//*:reportDate/text() eq $date) or empty($date))
order by $doc//*:reportDate/text() descending
return
<tr>
<td>
{$doc//*:interfaceName/text()}
</td>
<td>
{$doc//*:reportDate/text()}
</td>
<td>
{$doc//*:testResult/text()}
</td>
<td>
<li>
<!--{$child} -->
{$child}
</li>
</td>
</tr>
}
</tbody>
</table>
I also added a few input controls on the page. One of them looks like:
<InterfaceName constraint="true" readonly="false" required="false" relevant="true">
<value>test</value>
</InterfaceName>
<xf:bind nodeset="InterfaceName">
<xf:bind nodeset="value" type="string"/>
<xf:input id="InterfaceName" ref="InterfaceName/value" incremental="true">
<xf:label></xf:label>
<xf:hint>xxxxxYYYZZZ</xf:hint>
<xf:help>Enter interface name</xf:help>
<xf:alert>Enter interface name</xf:alert>
</xf:input>
I also added a button to the webpage:
<trigger1 constraint="true" readonly="false" required="false" relevant="true">
<value></value>
</trigger1>
<xf:submission id="s-send"
replace="instance"
resource="echo:test"
method="get">
</xf:submission>
<div>
<xf:trigger id="trigger1" ref="trigger1/value" incremental="true">
<xf:label>Filter output</xf:label>
<xf:hint>a Hint for this control</xf:hint>
<xf:help>help for trigger1</xf:help>
<xf:send submission="s-send"/>
</xf:trigger>
</div>
On this button click I need to somehow pass parameters form those input controls to xquery function and return the table to the webpage. Entire webpage is of type xQuery (it builds html) and run with eXist-db.
Could you help me with this, please?
Thank you.
You'll need four elements to achieve your goal:
An <xf:instance id="result" > to store the result of calling your xquery. Make sure to add an id attribute to identify the instance further.
An <xf:submission> to call your xquery an store the result in the instance. This is the submission you'll call in the <xf:send> and may look like this:
<xf:submission id="s-send" method="get" replace="instance" instance="result">
<xf:resource value="concat('myxquery.xq?interface=',InterfaceName/value)"/>
</xf:submission>
Note that the concat function is used to build the xquery url, including parameters.
An <xf:output value="instance('result')" mediatype="application/xhtml+xml"> to show the contents of the result instance. The mediatype="application/xhtml+xml" attribute is needed to display the html table.
In the server side, you can't call an xquery function directly, you need to write an xquery (myquery.xq) that calls the function and extracts the parameters from the URL.
Take a look to this sample https://en.wikibooks.org/wiki/XQuery/Getting_URL_Parameters
I'm creating dynamic data driven tables with Polymer 1.0 using data binding:
<tbody>
<template is="dom-repeat" items="{{instInfo}}" as="instItem">
<tr>
<td rowspan="{{instItem.rowSpan}}">{{instItem.name}}</td>
</tr>
<template is="dom-repeat" items="{{instItem.rows}}" as="row">
<tr>
<template is="dom-repeat" items="{{row}}" as="rowItem">
<td>{{rowItem}}</td>
</template>
</tr>
</template>
</template>
</tbody>
All of the data bindings above work fine except for the td rowpsan (line 4). When I use a real number, all is well.
Is data binding to an html attribute possible?
Use attribute$="{{value}}" rather than attribute="{{value}}".
Per the polymer documentation:
To bind to an attribute, use $= rather than =. This results in a call to:
element.setAttribute(attr, value);
As opposed to:
element.property = value;
Is it possible to apply ng-click in AngularJS to a table column? I tried the following, which doesn't seem to do the trick.
<table>
<colgroup>
<col ng-repeat="item in items" ng-click="myFunction(item)"> </col>
</colgroup>
<thead>
<tr>
<th ng-repeat="item in items"> {{item.title}} </th>
</tr>
</thead>
<tbody>
<tr>
<td ng-repeat="item in items"> {{item.info}} </td>
</tr>
</tbody>
</table>
It is not possible do it in the way you have tried. You may register the ng-click on every td element. Another possibility may be registering the ng-click at the table element and use the original dom event to determin wich column was clicked. You can access the event in this way: ng-click="myFunction($event)" then in the controler:
$scope.myFunction = function(e){
console.log(e);
}
see this post How to find row and col number of a cell in table if you would like to go this way...
I'm trying to get a specific value from a table cell and pass is to a controller. But it doesn't seem to be working. I show you some of my codes:
This is in the controller:
def searchUser = {
String abc = request.getParameter("harrow")
println(abc)
}
This is in the html page:
<form>
<div style="height: 250px; overflow: scroll; width: 100%;">
<table id="normal">
<g:each in = "${result}">
<tr id="btn">
<td width=10% >${it.ID}</td>
<td width=25% id="harrow">${it.username}</td>
</tr>
</g:each>
</table>
</div>
<input type ="submit" name ="abc" id="opener">
</form>
EDIT
AJAX:
$("#edittable").on('click', function() {
$.ajax({
url: URL,
data: $(this).serialize(),
type: "POST",
success: function(html){
//do something with the `html` returned from the server here
$("#edit1").html(html).dialog("open")
},
error: function(jqXHR, textStatus, errorThrown){
alert('error: ' + textStatus + ': ' + errorThrown);
}
});
return false;//suppress natural form selection
});
I can get the value to pass to the controller, but right now it only retrieves the first row of values rather than the other. Is there something wrong with my AJAX codes? Thank you guys so much.
So to show details of the row, one of the approaches can be:
CONTROLLER METHODS
def rows = [
[id:1, name:'name1'],
[id:2, name:'name2'],
[id:3, name:'name3']
]
def show(){
[results:rows]
}
def showLine(Long id){
render rows.find {it.id == id }
}
VIEW
<html>
<head>
<g:javascript library="jquery" />
<r:layoutResources />
</head>
<body>
<table>
<thead>
<tr>
<th>Action</th>
<th>Id</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<g:each in="${results}" status="i" var="r">
<tr>
<td><g:remoteLink value="Details" id="${r.id}" action="showLine" update="lineDetails">Details</g:remoteLink></td>
<td>${r.id}</td>
<td>${r.name}</td>
</tr>
</g:each>
</tbody>
</table>
<div id="lineDetails">
</div>
</body>
</html>
Basically you call showLine method using AJAX and passing row object id. Then you search for the object and render it back. Rendered data is put into div under the table. It's up to you if you use onclick, button or link in the table. It's also up to you how to show details on results page - use jquery dialog, or something else. Hope it helps