I want to call the searchByID() when the table cell values are iteratively loaded:
Here is what I have already and I would like to search the DB and return the value for the ID. (This is done by my searchByID()) All i care about how it is rendered
Code snippet:
<template id="course-table-rows-template" repeat="{{item in response.entries}}">
<tr>
<td>
{{item.id}}
<form is="ajax-form" action="/add_to_wishlist?course_id={{item.id}}" method="get" id="add-course">
<button id="wishlist_add_button" on-click="{{handleWishlistClick}}">+ Wishlist</button>
</form>
</td>
<td>{{item.title}}</td>
<td>{{item.description}}</td>
<!--{{item.primary_category_id}}-->
<td>
<form is=""ajax-form" action="> How do I call the searchByID on load? I dont want to create a button and do an on click</form>
</td>
<td>{{item.primary_subcategory_id}}</td>
</tr>
</template>
What I want to do: Use the item.primary_subcategory_id and query the DB, and put that value in the .
LMK if you need more code for explanation.
You can listen to domReady event. It will be fired if all dom elements ready to query. More info about Polymer event you can check it at https://www.polymer-project.org/0.5/docs/polymer/polymer.html#lifecyclemethods
Related
Simple question really, but how can I setup the typeahead to work in a table that works off of a different table than my typeahead?
For Example, I have a foreign key in a table and I want to let the users select this key based on the respective NAME value in the foreign key's primary table.
Code Example:
<table class="table table-bordered table-hover table-striped rwd-table" id="page-wrap">
<thead>
<tr>
<th>Primary ID</th>
<th>Foreign Key (As Name)</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="p in PrimaryTable" id="display">
<td data-th="ID">{{p.PrimaryID}}</td>
<td>
<input id="ForeignKeyName"
type="text"
ng-model="p.ForeignKeyID"
uib-typeahead="f.ForeignKeyID as f.ForeignKeyName for f in ForeignKeyTable | filter:$viewValue"
class="form-control">
</td>
</tr>
</tbody>
With this example, I would want the users to see the "Foreign Key (As Name)" As the Name value instead of the ID value. The trick is that I also want the underlying value to be the ID and have it mapped to match the original value, as notified by the ng-model.
UPDATE: Another question I had that was in line with the previous one is how do I setup my ng-model to show the ForeignKeyTable.ForeignKeyName in place of the PrimaryTable.ForeignKeyID?
This would be similar ( I imagine) to how the uib-typeahead matches the ForeignKeyTable.ForeignKeyID and ForeignKeyTable.ForeignKeyName but with the two seperate tables?
What I would desire is to be able to put ng-model: PrimaryTable.ForeignKeyID as ForeignKeyTable.ForeignKeyName
First thing would be updating PrimaryKeyTable rows every time user selects value in typeahead. You'll have to catch selected item and manually assign its ForeignKeyId value to the row of PrimaryTable.
The way to do it is to add typeahead-on-select directive to your typeahead and bind it to the function that assigns the values for you.
It would look like this:
HTML
<tr ng-repeat="p in PrimaryTable" id="display">
<td data-th="ID">{{p.PrimaryID}}</td>
<td>
<input id="ForeignKeyName"
type="text"
ng-model="selectedItem" <!-- could be anything really for we will not use it here -->
uib-typeahead="f.ForeignKeyID as f.ForeignKeyName for f in ForeignKeyTable | filter:$viewValue"
typeahead-on-select="onSelect($item, $model, $label, p)"
class="form-control">
</td>
</tr>
Inside your controller
$scope.onSelect = function($item, $model, $label, primaryKeyTableRow) {
primaryKeyTableRow.ForeignKeyId = $item.ForeignKeyId;
}
Next step is to display name property value of ForeignKeyTable row that corresponds to ForeignKeyId from PrimaryKeyTable in each row. Since we have to filter ForeignKeyTable to find suitable item it would be a good idea to put that logic inside the controller. For there are multiple rows in which we want to display corresponding name, we'll have to filter the ForeignKeyTable for each row separately. This is where ng-controller for ng-repeat comes in handy. What we'll do is bind new controller for each table row generated by ng-repeat and put some logic inside that controller. In HTML it would look like this:
<tr ng-repeat="p in primaryKeyTable" ng-controller="itemController">
<!-- ... -->
</tr>
And we'll have to define new controller in JS file:
app.controller('itemController', function() {
// ...
});
Now we can have separate logic for each row in the table. So that's a place to filter ForeignKeyTable to find corresponding item and display it's name.
Since whole code is kind of big I've put it in the plunker:
http://plnkr.co/edit/xccgnpxoPHg6vhXWPwZn?p=preview
See what you can do with it.
I have a list of object and iterating that list using ng-repeat to generate table row. each td contains source name and checkbox. I want to bind the checkbox with a property which is not available into list. how that is possible? The list is like that:-
scope.reasons = [
{sourceName:'Lack of rainfall'},
{ sourceName: 'Change in land use' },
{sourceName:'Change in Land Cover'}
];
and the HTML code is like that:-
<table>
<tr ng-repeat="source in reasons">
<td>{{source.sourceName}}</td>
<td><input type="checkbox" ng-checked="source.postAdequate"></td>
</tr>
</table>
You can do this using the ng-model attribute, ng-change is just for the checking purposes that is change detection.
<table>
<tr ng-repeat="source in reasons">
<td>{{source.sourceName}}</td>
<td>
<input type="checkbox" ng-model="source.postAdequate" ng-change="changeDet()">
</td>
</tr>
</table>
Demo Fiddle
Hope this helps
Try this:
<input type="checkbox" ng-model="source.postAdequate">
See here jsfiddle link:
https://jsfiddle.net/avnesh2/5cpm48tc/2/
But it will add source.postAdequate: true/false only if you click, remains objects will remains same.
So if you want to add source.postAdequate: true/false in all add in $scope.reasons before only.
Hope this will help you.
Using ng-model instead of ng-checked will add property internally when checkbox is changed
<input type="checkbox" ng-model="source.postAdequate"></td>
If you must have that property on all objects iterate the array and add it
scope.reasons.forEach(function(item){
item.postAdequate = false
})
Can you loop the scope object once to initially set postAdequate:false for all items. Then bind that object in checkbox ng-model.
angular.forEach($scope.reasons, function(e,i){
e.postAdequate = false;
});
html code
<table>
<tr ng-repeat="source in reasons">
<td>{{source.sourceName}}</td>
<td>
<input type="checkbox" ng-model="source.postAdequate" ng-click="clickfunction(source.postAdequate)">
</td></tr>
</table>
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
HTML
<input type="search" placeholder="Filter" ng-model="searchstr" ng-change="details()">
<table style="width:831px;overflow:auto">
<tr ng-repeat="d in details" ng-if="$index%3==0">
<td style="height:232px;width:164px;" ng-if="details[$index]">{{details[$index].CourseName}}<br>{{details[$index].Professor}}<br>{{details[$index].CourseDuration}}</td>
<td style="height:232px;width:164px;" ng-if="details[$index+1]">{{details[$index+1].CourseName}}<br>{{details[$index+1].Professor}}<br>{{details[$index+1].CourseDuration}}</td>
<td style="height:232px;width:164px;" ng-if="details[$index+2]">{{details[$index+2].CourseName}}<br>{{details[$index+2].Professor}}<br>{{details[$index+2].CourseDuration}}</td>
</tr>
</table>
js file
$scope.data=function()
{
$scope.details=$filter("filter")($scope.details,$scope.searchstr);
}
I have tried like above but only for the first time its displaying
I got it.I just changed the slight logic in js file.I am posting it as it may be helpful to somebody else.
First i just copied the $scope.details to d and filtered with the temp variable d.
$scope.searchstr="";
var d=$scope.details;
$scope.data=function()
{
$scope.details=$filter("filter")(d,$scope.searchstr);
}
You don't need the $scope.data function. You use the builtin angular filter like
<tr ng-repeat="d in details | filter:searchstr" ng-if="$index%3==0">
<form action='./index.php' method='post' class='form'>
<table>
<tr>
<td>$error</td>
</tr>
<tr>
<td>Username:</td>
<td><input type='text' name='user' /></td>
</tr>
<tr>
<td>Password:</td>
<td><input type='password' name='password' /></td>
</tr>
<tr>
<td></td>
<td><input type='image' src='./images/loginbtn.jpg' name='loginbtn' value='Login' alt='Submit Form'/></td>
</tr>
</table>
</form>
The above code is code from my (work in progress) website. I'm using the "image" input type as it allows me to use an image as a button. The thing I'm having trouble with here, is putting in some code that allows me to put another image in for when I mouse over it. This code is enclosed in a PHP tag and set to the variable "$form". This is so I can echo it out and run some other PHP code with it easily.
Is there any CSS that I could use to put in another picture for when I mouse over the button? Am I maybe making this more complicated than it seems?
For native javascript you can use onmouseover as per this example:
http://jsfiddle.net/42E99/
apologies for the long image urls, hope it doesn't confuse.
EDIT
CSS: http://jsfiddle.net/dZ2qL/ using hover to change background image.
2nd EDIT
http://jsfiddle.net/dZ2qL/3/
Use a <div> instead of <input> and also added some lines to the css.
background-color:transparent;
border: 0px solid;
Take a look at this >>fiddle<<
Here is a short jquery code demo:
First you need to include jquery
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
then you include this piece of code:
<script>
$(document).ready(function() {
$("#test").hover(
function () {
$(this).attr('src','http://www.seobook.com/images/smallfish.jpg');
},
function () {
$(this).attr('src','http://www.google.com/images/srpr/logo4w.png');
}
);
});
</script>
and in your html, you set id or class to your element (it must be the same with the one in the sample script, value is test in my example.
<input id="test" type='image' src='http://www.google.com/images/srpr/logo4w.png' name='loginbtn' value='Login' alt='Submit Form'/>