post a combination value instead of many drop-down values - drop-down-menu

i am working on a project where a clerk like professional will make/edit classes time table for educational institute.
so in a day-period cell there are many drop-downs for selecting teacher, classroom/lab, batch of students, subject etc.
and this whole combination of values can be repeated many places in the grid.
so i want to post a single value combining all these 4-5 values through POST data in FORM for that cell location.
what approach should i use?
EDIT:
Oh! Yes, i am actually using PHP and angularjs and this is sample code in html
<table border="1" width="90%" height="90%" style="margin:10px">
<thead>
<tr>
<td>
Day
</td>
<td ng-repeat="hour in chours">
{{hour.name}}
<br>
{{hour.stime}}--{{hour.etime}}
<br>
<input type="checkbox" ng-model="hour.noclass" /> No class {{hour.noclass}}
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="day in weekdays">
<td>
{{day.name}}
</td>
<td ng-repeat="hour in day.hours">
<div ng-show="hour.noclass=='false'" name="cell[{{day.name}}][{{hour.name}}][]">
<select name="cars">
<option ng-model="dd" ng-repeat="sub in subjects">{{sub.name}}</option>
</select>
{{dd}}
</div>
</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
and this is in js file
var App = angular.module('tteditApp',[]);
App.controller('editCtrl', function($scope){
$scope.chours=[
{'name':'1','stime':'800','etime':'855','noclass':'true'},
{'name':'2','stime':'855','etime':'950','noclass':'true'},
{'name':'3','stime':'800','etime':'855','noclass':'false'},
{'name':'4','stime':'800','etime':'855','noclass':'false'},
{'name':'5','stime':'800','etime':'855','noclass':'false'},
{'name':'6','stime':'800','etime':'855','noclass':'false'},
{'name':'7','stime':'800','etime':'855','noclass':'false'},
{'name':'8','stime':'800','etime':'855','noclass':'false'},
{'name':'9','stime':'800','etime':'855','noclass':'false'},
{'name':'10','stime':'800','etime':'855','noclass':'false'}];
$scope.subjects=[{'name':'CLOUD'},{'name':'CC'},{'name':'ISS'},{'name':'DCT'},{'name':'DMW'},{'name':'VLSI'},{'name':'SEMINAR'},{'name':'PROJECT'},{'name':'WEB DEV'}];
$scope.weekdays=[{'name':'Monday','hours':$scope.chours},{'name':'Tuesday','hours':$scope.chours},
{'name':'Wednesday','hours':$scope.chours},{'name':'Thursday','hours':$scope.chours},{'name':'Friday','hours':$scope.chours}
,{'name':'Saturday','hours':$scope.chours}];
});

Related

Thymeleaf - Loop values into textarea

I've been stack with a problem in Thymeleaf, that is, looping values into a textarea. My controller provides me with a list/collection via the model binding:
model.addAttribute("response", getDefectMessage.getMessage());
getDefectMessage.getMessage() returns the following (please see image below), in which I only need description in this case.
In my HTML, I am able to display the index and count of the provided data retrieved from the model (please see sample code below).
<tbody>
<tr th:each="res, stat : *{response}">
<td th:text="${stat.count}" />
<td>
<textarea type="text" th:text="${res[__${stat.index}__].description}"></textarea>
</td>
</tr>
</tbody>
Having said that, I get a SpringEL expression exception when rendering (please see image below).
Exception evaluating SpringEL expression: "res[0].description" (defect_details:24)
Been a newbie in Thymeleaf, may I please get assistance in how I can go about displaying values from a list into a textarea. (Thanks in advance).
res represents a DefectDto. So you access it fields like res.defectDescription
<tbody>
<tr th:each="res, stat : *{response}">
<td th:text="${stat.count}" />
<td>
<textarea type="text" th:text="${res.defectDescription}">
</textarea>
</td>
</tr>
</tbody>
Or if DefectDto has a method getDescription() then you can do
<tbody>
<tr th:each="res, stat : *{response}">
<td th:text="${stat.count}" />
<td>
<textarea type="text" th:text="${res.description}">
</textarea>
</td>
</tr>
</tbody>

Listing job offers (schema.org’s JobPosting)

I have a page with list of jobs jobs offers and every job in list is link to page with job offer.
And I have a problem with Microdata, and my question is, which variant is better?
First variant:
<table itemscope itemtype="http://schema.org/JobPosting">
<tr>
<td itemprop="title" itemtype="http://schema.org/JobPosting" itemscope>job 1</td>
</tr>
<tr>
<td itemprop="title" itemtype="http://schema.org/JobPosting" itemscope>job 2</td>
</tr>
<tr>
<td itemprop="title" itemtype="http://schema.org/JobPosting" itemscope>job 3</td>
</tr>
</table>
Second variant:
<table>
<tr itemscope itemtype="http://schema.org/JobPosting">
<td itemprop="title"><a href..>job 1</a></td>
</tr>
<tr itemscope itemtype="http://schema.org/JobPosting">
<td itemprop="title"><a href..>job 2</a></td>
</tr>
<tr itemscope itemtype="http://schema.org/JobPosting">
<td itemprop="title"><a href..>job 3</a></td>
</tr>
</table>
Your first variant means: There is a JobPosting which has three titles. Each of these titles consists of another JobPosting.
Your second variant means: There are three JobPostings, each one has a title.
So you want to go with your second variant.
Note that you have an error on your current page. Instead of the example contained in your question, on your page you use itemprop="title" on the a element. But then the href value is the title, not the anchor text.
So instead of
<td>
<a itemprop="title" href="…" title="…">…</a>
</td>
<!-- the value of 'href' is the JobPosting title -->
you should use
<td itemprop="title">
<a class="list1" href="…" title="…">…</a>
</td>
<!-- the value of 'a' is the JobPosting title -->
And why not use the url property here?
<td itemprop="title">
<a itemprop="url" href="…" title="…">…</a>
</td>
The second one. The first one is describing a table as JobPosting which isn't a JobPosting.

ng-repeat and the mouseover event

this seems like a scope problem, but i am not sure. my goal is to highlight a single row in a table. that implies that any previously highlighted row is returned to an unhighlighted state. the rows are created with the ng-repeat directive, like this:
<div id="myFedContents" style="height:320px" ng-controller="Controller2" class="scroller">
<table border="0" class="span12 table table-condensed" style="margin-left:0px" id="tblData">
<thead>
<tr><th>Year</th><th>Name</th><th>Useful Flag</th></tr>
</thead>
<tbody id="allRows">
<tr ng-repeat="item in itemlist | filter:thisText" ng-style="myStyle"> <td class="span1" valign="top"><a tabindex="-1" href="#">{{item.year}}</a></td>
<td id="{{item.id}}"> <a tabindex="-1" href="#" ng-click="myStyle={'background-color':'#cccccc'};">{{item.name}}</a>
</td> <td>
{{item.usefulflag}
</td> </tr>
</tbody>
</table>
</div>
i have code in a .js file that looks like this:
$("tr").mouseenter(function(){
alert("mouseenter");
});
the row in the table header reacts with the alert, but there is no reaction from the rows created by ng-repeat. how do i correct?
You can actually achieve this effect by using an ng-class in conjuction with ng-mouseenter and ng-mouseleave like so:
<div id="myFedContents" style="height:320px" ng-controller="Controller2" class="scroller">
<table border="0" class="span12 table table-condensed" style="margin-left:0px" id="tblData">
<thead>
<tr>
<th>Year</th>
<th>Name</th>
<th>Useful Flag</th>
</tr>
</thead>
<tbody id="allRows">
<tr ng-repeat="item in itemlist | filter:thisText" ng-style="myStyle" ng-class="highlightclass" ng-mouseenter="highlightclass='highlight'" ng-mouseleave="highlightclass=''">
<td class="span1" valign="top"><a tabindex="-1" href="#">{{item.year}}</a>
</td>
<td id="{{item.id}}"> <a tabindex="-1" href="#" ng-click="myStyle={'background-color':'#cccccc'};">{{item.name}}</a>
</td>
<td>
{{item.usefulflag}
</td>
</tr>
</tbody>
</table>
</div>
In this case you don't need the jquery syntax. If you haven't already you should also read https://stackoverflow.com/a/15012542/281335.

How do you implement a generic CRUD grid using knockout.js?

I have a very nice grid with Create, Retrieve, Edit and Delete functionality. I am using knockout.js on the client and WebAPI on the back end.
I would like to extend this to a number of different objects. Essentially I have a List<T> where T is an MVC view model and the knockout view and view model should be able to work out what they should look like based on T.
Does anyone know of a simple way to display any viewmodel (with specific controls for editing based on the viewmodel itself - eg datepicker for dates, input for string, drop downs etc) in a grid format and have generic CRUD functions.
Below is an example of the exiting HTML I am using (for a specific object):
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Value Date</th>
<th>Position Date</th>
<th>Book</th>
<th>Currency</th>
<th>Currency Base</th>
<th>Amount1</th>
<th>Amount2</th>
<th>Position Type</th>
<th style="width: 100px; text-align:right;" />
</tr>
</thead>
<tbody data-bind=" template:{name:templateToUse, foreach: pagedList }"></tbody>
</table>
and the templates look like this:
<script id="itemsTmpl" type="text/html">
<tr>
<td data-bind="text: valueDate.formattedDate"></td>
<td data-bind="text: positionDate.formattedDate"></td>
<td data-bind="text: book"></td>
<td data-bind="text: currency"></td>
<td data-bind="text: currencyBase"></td>
<td data-bind="text: amount1"></td>
<td data-bind="text: amount2"></td>
<td data-bind="text: positionType"></td>
<td class="buttons">
<a class="btn" data-bind="click: $root.edit" href="#" title="edit"><i class="icon-pencil"></i></a>
<a class="btn" data-bind="click: $root.remove" href="#" title="remove"><i class="icon-trash"></i></a>
</td>
</tr>
</script>
<script id="editTmpl" type="text/html">
<tr>
<td><input data-bind="datepicker: valueDate.formattedDate, datepickerOptions: { dateFormat: 'yy/mm/dd' }"/></td>
<td><input data-bind="datepicker: positionDate.formattedDate, datepickerOptions: { dateFormat: 'yy/mm/dd' }"/></td>
<td><input data-bind="value: book"/></td>
<td><input data-bind="value: currency"/></td>
<td><input data-bind="value: currencyBase"/></td>
<td><input data-bind="value: amount1"/></td>
<td><input data-bind="value: amount2"/></td>
<td><input data-bind="value: positionType"/></td>
<td class="buttons">
<a class="btn btn-success" data-bind="click: $root.save" href="#" title="save"><i class="icon-ok"></i></a>
<a class="btn" data-bind="click: $root.cancel" href="#" title="cancel"><i class="icon-remove"></i></a>
</td>
</tr>
</script>
I would like the View as well as the View Model to be generic and not "hard-coded" as above. I am sure someone else must have done something like this.
One solution would be that:
AJAX call gets a list of JSON viewmodels
If list is empty then do not display anything
If list has items, pick first item and go through properties
Start constructing the view on the client by looping through proprties
Append the string as a DOM element to the main DIV
Wireup knockout
There are problems with this approach. What if a property is null for the first object but exists in another? If so we do not setup the element for it.
A better option is to use content negotiation to get a dedicated template:
So GET /api/customers will return customers but if you request text/knockout-template+html then you get back a knockout template as string and then you append to DIV and wireup knockout. So server can generate template using reflection or customise for some models.

how to determine xpaths for ajax element

I need to detemine xpath for element mainForm:queryConfigure:fetchReport.
<span id="mainForm:queryConfigure:j_id18">
<table id="mainForm:queryConfigure:j_id19"
class="showReportTable" align="center">
<tbody>
<tr>
<td>
<input id="mainForm:queryConfigure:fetchReport" type="image"
src="images/show_report.gif" name="mainForm:queryConfigure:fetchReport"/>
</td>
</tr>
</tbody>
</table>
</span>
I tried
selenium.click("//input[#id='mainForm:queryConfigure:fetchReport'][#type='image'][#src='images/show_report.gif']");
and
selenium.click("//input[#id='mainForm:queryConfigure:fetchReport']");
One more case:
<div class="tabUnselectedText" align="center">
Notifications
</div>
Id and name attribute values are acceptable locators for method click. See locating elements in the documentation.
selenium.click('mainForm:queryConfigure:fetchReport');

Resources