I am unable to apply slice or substr to GId due to the following error message:
Uncaught TypeError: Unable to process binding "foreach: function (){return waititem }"
Message: Unable to process binding "style: function (){return { color:GId.slice(0,1) =='TR'?'black':'red'} }"
Message: undefined is not a function
Html
<table>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
</thead>
<tbody data-bind="foreach: waititem">
<tr data-bind="style: { color: GId.slice(0,1) == 'TR'? 'black' : 'red' }">
<td data-bind="text: PId"></td>
<td data-bind="text: PName"></td>
</tr>
</tbody>
</table>
How can I apply slice to check for the presence of a particular substring and style the row respectively?
You are using the slice method in your style binding wrongly. You need to use the syntax of slice as
slice(start, end)
where start has default of 0 for initial position and end will be the end character. In your scenario the slice will return a string of length 1 as you have used slice(0,1) but you are comparing with 'TR' which is of length 2. Instead of that you need to use slice(0, 2) === 'TR'.
<tr data-bind="style: { color: GId.slice(0,2) == 'TR'? 'black' : 'red' }">
<td data-bind="text: PId"></td>
<td data-bind="text: PName"></td>
</tr>
DEMO
Related
please assist with the below. I am trying to display an arraylist returned from the controller and display it to an Html table but I get the above error.
here is my controller code:
#GetMapping(value="/chart" )
public List<List<CanvasjsChartData.DataPointModel>> chart(Model modelMap) {
List<List<CanvasjsChartData.DataPointModel>> dataPointsList = canvasjsChartService.getCanvasjsChartData();
modelMap.addAttribute("dataPointsList", dataPointsList);
System.out.println("dataPointsList");
return dataPointsList;
}
and this is the table I want to display my list in
<table class="table" id="dataTable" style="width:100%">
<thead>
<th>Level</th>
<th>Occurences</th>
</thead>
<tbody>
<tr th:each="item :${dataPointsList}">
<td th:text="${item.LEVEL}"> </td>
<td th:text="${item.OCCURENCES}"> </td>
</tr>
</tr>
</tbody>
I know for sure the ArrayList has the data I require as shown below I dont know why its giving me the error
Your debug shows you have an List<List<CanvasjsChartData.DataPointModel>> (two Lists inside of each other) -- when your HTML is expecting List<CanvasjsChartData.DataPointModel>. You should fix that in your controller/model by only returning a single list.
You could also display your HTML like this (where you loop over the 0th element of the outer array):
<tr th:each="item :${dataPointsList[0]}">
<td th:text="${item.LEVEL}" />
<td th:text="${item.OCCURENCES}" />
</tr>
I'm adding dataTable to my coldFusion project, but it is returning: Uncaught TypeError: f is undefined
Code:
<table id="webPosttable" cellpadding="5" cellspacing="0">
<thead>
<tr>
<th>DATE</th>
<th>CK</th>
<th>NAME</th>
<th>IN</th>
<th>RATE</th>
<th>COST</th>
</tr>
</thead>
<tbody>
<cfoutput query="myQuery">
<cfset totalreportin = totalreportin + val(counter)>
<cfset totalreportcost = rate*counter + totalreportcost>
<tr>
<TD>#inserteddate#</TD>
<TD>#ck#</TD>
<TD>#fullname#</td>
<TD>#counter#</TD>
<td>#decimalformat(rate)#</td>
<td>#dollarformat(rate*counter)#</td>
</tr>
</cfoutput>
</tbody>
<tfoot>
<cfoutput>
<tr>
<TD colspan="3">TOTAL:</TD><td>#totalreportin#</td><TD></td><td>#dollarformat(totalreportcost)#</td>
<TD colspan="3">AVERAGE:</TD><td><Cfif incomingreport.recordcount GT 0>#decimalformat(val(totalreportin/incomingreport.recordcount))#<Cfelse>0</CFIF></td>
</tr>
<tr>
<td></td><td><Cfif totalreportin GT 0>#dollarformat(totalreportcost/totalreportin)#<cfelse>0</cfif></td>
</tr>
</cfoutput>
</tfoot>
</table>
<script>
$('#webPosttable').DataTable({
"lengthChange": false,
"paging": false,
"bInfo" : false,
"dom": '<"pull-left"f><"pull-right"l>tip'
});
</script>
Does anyone know what if something is missing in my table structure or javascript datable settings?
Thanks
The problem won't be in your Coldfusion code, it will be the structure of your <tfoot> content. The number of columns in the tfoot doesn't match the number of columns in the rest of your table. Even the two trs within your tfoot don't match each other.
Comment out the tfoot temporarily to test whether it works without, then balance up the columns and put it back in.
eg:
<tfoot>
<cfoutput>
<tr>
<TD>TOTAL:</TD>
<td>#totalreportin#</td>
<td></td>
<td>#dollarformat(totalreportcost)#</td>
<TD>AVERAGE:</TD>
<td><Cfif incomingreport.recordcount GT 0>#decimalformat(val(totalreportin/incomingreport.recordcount))#<Cfelse>0</CFIF></td>
</tr>
<tr>
<td colspan="5"></td>
<td><Cfif totalreportin GT 0>#dollarformat(totalreportcost/totalreportin)#<cfelse>0</cfif></td>
</tr>
</cfoutput>
</tfoot>
If you still have errors after that then I'd advise updating the question to include the code showing which version of jQuery+datatables you're including and where and how you're including it. You may also need to wrap your script in a $(document).ready( function () { ...
I have this table like this
var tdCnt=0;
$('table tr').each(function(){
$('<input />', {
type : 'checkbox',
id : 'td' + tdCnt,
class : 'dt-checkboxes',
value : name
}).appendTo($(this).find("td").eq(0));
tdCnt++;
});
.dt-checkboxes {
float :left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td></td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td></td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
</tr>
<tr>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
</tr>
</table>
I just want to click the inputs where the 4th td is empty how can I achieve that?
this is the code im using, but it keeps clicking the ones that are not empty
(//input[#type='checkbox' and //td[4]/descendant::div[string-length()=0]])[$counter]
or this one
(//input[#type='checkbox' and //td[4][not(text())]])[2]
and neither works, it keeps clicking the ones that are not empty how can I achieve this?
Thank you for all your help
To complete, 3 ways to select an empty td element (in your case : the fourth) :
//tr/td[4][.=""]
//tr/td[4][string-length()=0]
//tr/td[4][not(text())]
Regarding your sample data, you have one checkbox per tr element. To select 'inputs where the 4th td is empty', you can use :
//tr/td[4][.=""]/preceding::input[1][#type='checkbox']
//tr/td[4][.=""]/../td/input[#type='checkbox']
The first will look for the empty td element, then its first preceding input element containing a specific attribute.
The second will look for the empty td element, then the child of its parent (ie : the input element).
or if I fix your second try :
//input[#type='checkbox'][ancestor::tr[1]/td[4][.=""]]
Look anywhere for an input element whith a specific attribute. And where the fourth td element, child of its first tr ancestor, is empty.
Output : 2 inputs nodes
I am having a little trouble with this one.
Using the approach discussed in this -- https://jasonwatmore.com/post/2019/06/18/angular-8-simple-pagination-example
Use-case difference is, my data all comes from database. So I have had to use a model class and all. But, due to some problem, I am getting the same data [1st row from db] in all the rows. Let me post the code I used --
ANGULAR
method inside my component to get data from service class
newsTopics: NewsTopic[];
pageOfItems: Array<NewsTopic>;
getAllNewsTopics() {
this.userService.getAllTopics()
.subscribe((data: NewsTopic[]) => {
this.newsTopics = (data as NewsTopic[]).map((x, i) => ({ Id: (i + 1), TopicId: data[0].TopicId, TopicName: data[0].TopicName, TopicInfo: data[0].TopicInfo, IssueStartDate: data[0].IssueStartDate, IssueCloseDate: data[0].IssueCloseDate, NewsCategory_Id: 0 }));
})
}
my model class
export class NewsTopic
{
Id: number;
TopicId: string;
TopicName: string;
TopicInfo: string;
IssueStartDate: Date;
IssueCloseDate: Date;
NewsCategory_Id: number;
}
the method in service class itself
getAllTopics(){
var reqHeader = new HttpHeaders({ 'No-Auth': 'True' });
return this.http.get<NewsTopic[]>(this.rootUrl + '/api/NewsTopic/GetAllNewsTopics', { headers: reqHeader });
}
my html for showing the data and the pagination control
<div class="card-body">
<table class="table table-striped" id="newstopics_tbl">
<thead>
<tr style="background:linear-gradient(50deg, #d9fcfc, #dafbde)">
<th>Topic ID</th>
<th>Topic Name</th>
<th>Topic Info</th>
<th>Start Date</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let nt of pageOfItems">
<td><b>{{nt.TopicId}}</b></td>
<td>{{nt.TopicName}}</td>
<td>{{nt.TopicInfo}}</td>
<td>{{nt.IssueStartDate}}</td>
</tr>
</tbody>
</table>
</div>
<div class="card-footer pb-0 pt-3" style="background:linear-gradient(50deg, #d9fcfc, #dafbde); margin-top:15px">
<jw-pagination [items]="newsTopics" (changePage)="onChangePage($event)"></jw-pagination>
</div>
My guess is, the problem lies in the getAllNewsTopics() method, where I am trying to fill and map the array of objects and assign to the variable. Something wrong there. If you see the original example from the link, they used a .fill(0) also. In my case I tried doing .fill(data[0]) however result is the same, ie. only first record, repeated multiple times.
What is the trick I am missing? Can someone just point me out.
Much needed, Thanks,
EDITS --
These are the changes->
getAllNewsTopics() {
var reqHeader = new HttpHeaders({ 'No-Auth': 'True' });
return this.http.get<NewsTopic[]>(this.rootUrl + '/api/NewsTopic/GetAllNewsTopics', { headers: reqHeader })
.subscribe((data: NewsTopic[]) => {
this.newsTopics = data;
});
}
and
<div class="card-body">
<table class="table table-striped" id="newstopics_tbl">
<thead>
<tr style="background:linear-gradient(50deg, #d9fcfc, #dafbde)">
<th>Topic ID</th>
<th>Topic Name</th>
<th>Topic Info</th>
<th>Start Date</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let nt of pageOfItems" style="cursor:pointer" (click)="NewsArticleAdd(nt)">
<td (click)=""><b>{{nt.TopicId}}</b></td>
<td style="color:mediumvioletred;" (click)="">{{nt.TopicName}}</td>
<td (click)="">{{nt.TopicInfo}}</td>
<td (click)="">{{nt.IssueStartDate}}</td>
</tr>
</tbody>
</table>
</div>
<div class="card-footer pb-0 pt-3" style="background:linear-gradient(50deg, #d9fcfc, #dafbde); margin-top:15px">
<jw-pagination [items]="newsTopics" (changePage)="onChangePage($event)"></jw-pagination>
</div>
That does the trick. Works as expected,
I have this table:
<iframe title="ManageLegs">
<table title="Leg Details">
<tr>
<th class="headerRow">
<div>PAX</div>
</th>
<th class="headerRow">
<div>Leg</div>
</th>
</tr>
<tr>
<td>
<input type="text"></input>
</td>
<td>
<input type="checkbox"></input>
</td>
</tr>
</table>
</iframe>
Accessing the textbox is working fine, but I can´t figure out how to check the checkbox.
I use the following code in my PageObject class:
in_iframe(:title => 'ManageLegs') do |frame|
table(:leg_details, title: 'Leg Details', :frame => frame)
text_field(:pax) { leg_details_element['1']['PAX'].text_field_element }
text_field(:aircraft) { leg_details_element['1']['Aircraft'].text_field_element }
text_field(:show_leg_on_quote_pdf) { leg_details_element['1']['Leg'].checkbox_element }
end
Which I am calling like this:
on(CharterInquirySavedPage).pax = "2"
on(CharterInquirySavedPage).check_show_leg_on_quote_pdf
It is working fine for setting the pax-textbox, but fails when trying to check the checkbox:
NoMethodError: undefined method `check_show_leg_on_quote_pdf' for #<CharterInquirySavedPage:0x00000004cfd420>
The text_field accessor is for text fields, which are input elements with type "text" and other text-like input fields such as "email".
Inputs of type "checkbox" are considered checkboxes. It is the checkbox accessor that creates the check_ method. In other words, you want the following definition for the checkbox:
checkbox(:show_leg_on_quote_pdf) { leg_details_element['1']['Leg'].checkbox_element }