when i click my table row , i get info object passed to function $root.goToEvent. But i want to pass the upper level of that object , in this case events[[1]] together with info and rules. Screens and code are attached. thanks in advance.
HTML
<table class="mainTable" style="width:820px" border="1" data-bind="with: dataToShow">
<tr>
<td width="200px" valign="top">
<!-- Events List -->
<table class="events" >
<thead><tr><th >События</th></tr></thead>
<tbody id="eventsTable" data-bind="foreach: events">
<!-- ko with: info -->
<tr id="trEvent" data-bind="css: { selected : $data==$root.chosenEvent()}, click: $root.goToEvent">
<td data-bind="text: event_title"></td>
</tr>
<!-- /ko-->
</tbody>
</table>
OBJECT:
https://flic.kr/p/nvsrQB
One option it to bind your function with the appropriate context (this) and initial argument.
Something like:
data-bind="click: $root.goToEvent.bind($root, $parent)"
This would call goToEvent with the value of this set to $root and the first argument being the parent context (an event object in your code).
Related
I want to append an element to a specific element when the user clicks the button. The scenario goes like this. Is there another way to deal with that kind of problem?
<table>
<tbody>
<tr>
<td>
One
<button>delete</button>
<button x-on:click="edit(passIdToFunc)">edit</button>
</td>
</tr>
<tr id="one" style="display: hidden"></tr>
<!-- append x-teleport dom node to here when current value is id = one -->
<tr>Two</tr>
<tr id="two" style="display: hidden"></tr>
<tr>Three</tr>
<tr id="three" style="display: hidden"></tr>
...
</tbody>
</table>
<!--
For the initial render, or if there is no table data,
I would like to append it to somewhere else with display none.
-->
<template x-teleport="computedString">
...
</template>
This looks like the wrong usage for x-teleport, though it's not clear from the example where you are teleporting to. You can just use x-show to toggle display:none if that's what you're looking for.
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>
Using bootstrap table; the code below returns an empty getElementById for topic_name value, but if I move the 'input' outside of the thead it works. What is happening and how do I get this to work within thead?
<table id="table" class="table table-striped">
<thead>
<tr>
<th data-field="topic">
<input type="text" name="topic_name" id="topic_name">
<a onclick="topicButton()" href="##">this</a>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>some info here...</td>
</tr>
</tbody>
</table>
<script>
function topicButton()
{
var getThis=document.getElementById("topic_name").value;
alert(getThis);
}
</script>
Tested 2 examples and removed some bootstrap table parameters, removing one parameter worked in 1 example and removing another worked in the other.
For the code I submitted above (after I added all the additional bootstrap table parameters that my original code included - see list below), I removed data-toggle="table" and it worked. In my original code i remove data-show-columns="true" and it worked... odd.
Here is a list of the parameters I had attached to bootstrap table:
<table id="table" class="table table-striped table-borderless"
data-toolbar="#toolbar"
data-toggle="table"
data-cookie="true"
data-cookie-id-table="topic_id"
data-pagination="true"
data-search="true"
data-sort-name="topic_id"
data-sort-order="desc"
data-unique-id="topic_id"
data-show-columns="true"
data-show-columns-toggle-all="true"
data-show-search-button="true"
data-page-size="5"
data-page-list="[5, 10, 25, 50, 100, all]"
data-select-item-name="selectItemName"
data-show-export="true">
I'm trying to achieve the following result: I have a set of values that are coming from an array which I iterate over in order to populate an HTML table. As well I have an icon that user can hoover-over and can see data in there coming from the array and a translation key coming from translation files.
I want to bind a second argument to the TCustomAttribute in order to display to the user another data that was edited by them.
How do I achieve this in Aurelia?
<template>
<table>
<thead>
<th><span>Id</span></th>
<th><span>Name</span></th>
<th><span>Description</span></th>
<th><span>Date</span></th>
</thead>
<tbody>
<tr repeat.for="item of data">
<td><span>${item.Id}</span></td>
<td><span>${item.Name}
<a data-toggle="popover" t="[data-content]pending_name ${data.Name}" data-trigger="hover">
<i class="fa fa-info-circle"></i>
</a>
</span></td>
<td><span>${item.Description}</span></td>
<td><span>${item.Date}</span></td>
</tr>
</tbody>
</table>
</template>
Take a look at the t-params attribute which allows you to pass in additional parameters. More about that in the official guide http://aurelia.io/docs/plugins/i18n#using-the-plugin
Consider the below table structure contains many rows with multiple column values. I need to identify the parent of specific row, which has to be identified using the cell .
<table class = 'grid'>
<thead id = 'header'>
</thead>
<tbody>
<tr>
<td>
<span class="group">
<span class="group__link"><a class="disabledlink"">copy</a>
</span>
</span>
</td>
<td class="COLUMNNAME">ACE</td>
<td class="COLUMNLONGNAME">Adverse Childhood Experiences</td>
<li>Family Medicine</li>
<li>General Practice</li>
</td>
<td class="COLUMNSEXFILTER">Both</td>
<td class="COLUMNAGEFILTERMIN">Any</td>
<td class="COLUMNTYPE">Score Only</td>
</tr>
<tr>
<td class="nowrap" showactionitem="2">
<span class="group">
<span class="group__link"><a onclick="Check()" href="#">copy</a>
</span>
</span>
</td>
<td class="COLUMNNAME">AM-PAC</td>
<td class="COLUMNLONGNAME">AM-PAC Generic Outpatient Basic Mobility Short Form</td>
<td class="COLUMNNOTE"></td>
<td class="COLUMNRESTRICTEDYN">No</td>
<td class="COLUMNSPECIALTYID"></td>
<td class="COLUMNSEXFILTER">Both</td>
<td class="COLUMNAGEFILTERMIN">Any</td>
<td class="COLUMNTYPE">Score Only</td>
</tr>
<tr></tr>
<tr></tr>
</tbody></thead>
</table>
Likewise this table contains around 100 rows. I did the same using iteration and it is working fine.
Is it possible to find the parent of specific row without iteration?
You can use the parent method to find the parent of an element. Assuming that you have located a table cell, let's call it cell, you can get its row using parent and then the parent of the row with another call to parent:
cell.parent
#=> a <tr> element
cell.parent.parent
#=> the parent of the specific row - a <tbody> element in this case
Chaining multiple parent calls can become tedious and difficult to maintain. For example, you would have to call parent 4 times to get the table cell of the "copy" link. If you are after an ancestor (ie not immediate parent), you are better off using XPath:
cell.table(xpath: './ancestor::table')
#=> the <table> element containing the cell
browser.link(text: 'copy').tr(xpath: './ancestor::tr')
#=> the <tr> element containing a copy link
Hopefully Issue 451 will be implemented soon, which will remove the need for XPath. You would be able to call:
cell.parent(tag_name: 'table') # equivalent to `cell.table(xpath: './ancestor::table')`
There's no need for anything fancy, Watir has an Element#parent method.
You can use this one:
parent::node()
The below example will selects the parent node of the input tag of Id='email'.
Ex: //input[#id='email']/parent::*
the above can also be re-written as
//input[#id='email']/..
XPath tutorial for Selenium