There has been several versions of this question, but I've found a specific scenario I can't get my head around. I have this template on a parent element:
<tbody>
<tr is="tree-item" v-for="item in children" :item="item"></tr>
</tbody>
So far so good. The child element is:
<tr v-on:click="toggle" class="{{ classes }}">
<td class="name">
{{ item.tree_item_heading }}
</td>
</tr>
<tr v-show="isLoaded" is="tree-item" v-for="item in grandChildren" :item="item"></tr>
It's a recursive form line, so if the first tree-item has children, they will render as tree-item too. Although it shows up fine, it is rendered as a Fragment Instance, hence the v-show property gets ignored.
Any idea on how to solve this?
Cheers
You could try using multiple tbody tags for your parent loop:
<tbody v-for='item in children'>
<tr is="tree-item" :item="item"></tr>
<tr v-show="isLoaded" is="tree-item" v-for="gItem in item.children" :item="gItem"></tr>
</tbody>
Related
I have a 'dashboard' page that comes up after a user selects a project that they'd like to inspect the details on. Some of these details are displayed in a table format. Below is a portion of the Jinja2 template:
`
{% if release_container.nreleases > 0 %}
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Date Created</th>
<th scope="col">Status</th>
<th scope="col">Date Released</th>
</tr>
</thead>
<tbody>
{% for rh in release_container.release_history %}
<tr>
<td>{{rh.name}}</td>
<td>{{rh.creation_date}}</td>
<td>{{rh.status}}</td>
<td>{{rh.release_date}}</td>
</tr>
{% endfor %}
</tbody>
</table><!--ends table-->
{% endif %}
`
If I reload the page, or click on a link and then come back to the page, the same data will get appended. As an example, here's the HTML from a 'fresh' load, which is what I should look like after a reload as well:
`
<tbody>
<tr>
<td>v0.1</td>
<td>2022-11-10</td>
<td>False</td>
<td>2022-11-10</td>
</tr>
<tr>
<td>v0.2</td>
<td>2022-11-17</td>
<td>False</td>
<td>2022-11-17</td>
</tr>
</tbody>
`
But this is what it looks like when the page is reloaded:
`
<tbody>
<tr>
<td>v0.1</td>
<td>2022-11-10</td>
<td>False</td>
<td>2022-11-10</td>
</tr>
<tr>
<td>v0.2</td>
<td>2022-11-17</td>
<td>False</td>
<td>2022-11-17</td>
</tr>
<tr>
<td>v0.1</td>
<td>2022-11-10</td>
<td>False</td>
<td>2022-11-10</td>
</tr>
<tr>
<td>v0.2</td>
<td>2022-11-17</td>
<td>False</td>
<td>2022-11-17</td>
</tr>
</tbody>
`
What do I need to do in order to stop this from happening? I presume this is some kind of cache setting?
Thank you in advance for any assistance.
I've debugged the code by printing out the lengths of the various arrays to see if they change on reload, thinking that the data was being appended to the array, but the length remains '2', even though 4 different entries are rendered.
EDIT
A commenter asked to see the view code. At this point in time, it's a huge function that generates the containers that get passed to the template (which is just one template amongst half a dozen that gets passed), and I'll be refactoring that code shortly into more palatable bites, but hopefully the snippet below provides more context:
for release in releases:
rhistory_container = ProjectDashboardReleaseHistoryContainer()
rhistory_container.rid = release.id
rhistory_container.name = release.name
rhistory_container.creation_date = release.created
rhistory_container.status = release.is_active
release_container.release_history.append(rhistory_container)
"""
"""
return render_template('project_home.html',parent_container=parent_container,release_container=release_container,testing_container=testing_container,reqs_container=reqs_container,sw_container=sw_container,hw_container=hw_container)
So I have passed a context from views.py to my html template.
I have created a html table using 'For Loop' in the following way and also added a column with input date field.
<table class="table">
<thead style="background-color:DodgerBlue;color:White;">
<tr>
<th scope="col">Barcode</th>
<th scope="col">Owner</th>
<th scope="col">Mobile</th>
<th scope="col">Address</th>
<th scope="col">Asset Type</th>
<th scope="col">Schhedule Date</th>
<th scope="col">Approve Asset Request</th>
</tr>
</thead>
<tbody>
{% for i in deliverylist %}
<tr>
<td class="barcode">{{i.barcode}}</td>
<td class="owner">{{i.owner}}</td>
<td class="mobile">{{i.mobile}}</td>
<td class="address">{{i.address}}</td>
<td class="atype">{{i.atype}}</td>
<td class="deliverydate"><input type="date"></td>
<td><button id="schedulebutton" onclick="schedule({{forloop.counter0}})" style="background-color:#288233; color:white;" class="btn btn-indigo btn-sm m-0">Schedule Date</button></td>
</tr>
{% endfor %}
</tbody>
Now I would like to get that date element value in javascript, but its proving difficult since I am assigning a class instead of id(as multiple elements cant have same id).
I tried in the following way but its not working. The console log shows no value in that variable.
<script> //i is the iteration number passed in function call using forloop.counter0
function schedule(i){
var deldate = document.getElementsByClassName("deliverydate");
deldate2 = deldate[i].innerText;
console.log(deldate2); //log shows no value/empty
console.log(i); //log shows iteration number
</script>
I'm trying to grab the value from the lights node, based on a house number set in a parameter. The problem is, based on certain conditions, houses may be in different row positions.
If the parameter being sent to me for the house number is House237, then how to I get the number of lights located within the row-2-Lights node?
Also, how do I do the same if the next run, the house number is House867? Below is my HTML:
<?xml version='1.0' encoding='utf-8'?>
<table id="neighborhood">
<tr onmouseover="leave('1')">
<td id="row-1-house">
<div class="houseCol">
<a href="#" onClick="goHome('867');return false">
House867
</a>
</div>
</td>
<td id="row-1-Lights">
<div class="decimal">14</div>
</td>
</tr>
<tr onmouseover="leave('2')">
<td id="row-2-house">
<div class="houseCol">
<a href="#" onClick="goHome('237');return false">
House237
</a>
</div>
</td>
<td id="row-2-Lights">
<div class="decimal">12</div>
</td>
</tr>
</table>
You can try the following XPath-1.0 expression. The parameter is the 'HouseXXX' string, the child of the a element.
/table[#id='neighborhood']/tr[td/div[#class='houseCol']/a[normalize-space(text())='House237']]/td[contains(#id,'Lights')]/div[#class='decimal']/text()
The output of this is
12
In this example the parameter is set to 'House237'. How you incorporate the parameter into the XPath expression depends on your usecase scenario.
For example, in XSLT you would replace 'House237' with a variable like $HouseNumber to set the parameter.
Im trying to make a typo3 extension and i want to show all relations(in this case cities) from region. I connected them in them in the kickstarter like this:
i tried to print the cities in the regions single view doing this:
<table class="tx-collection-plan" >
<tr>
<td>
<f:translate key="tx_collectionplan_domain_model_region.name" />
</td>
<td>
{region.name}
</td>
</tr>
<tr>
<td>
<f:translate key="tx_collectionplan_domain_model_region.cities" />
</td>
<td>
<ul>
<f:for each="{region.cities)" as="city">
<li>{city.name}</li>
</f:for>
</ul>
</td>
</tr>
</table>
But i keep getting this error:
Oops, an error occurred!
The argument "each" was registered with type "array", but is of type "string" in view helper "TYPO3\CMS\Fluid\ViewHelpers\ForViewHelper"
is there another solution to show all subparts of a region (with links that can be klicked -> like the list view of cities itself)?
EDIT: when i remove the for loop and just print city.name, i only get
the dot from li .... but nothing else
I found the solution:
all i need is
<table class="tx-collection-plan" >
<tr>
<td>
<f:translate key="tx_collectionplan_domain_model_region.name" />
</td>
<td>
{region.name}
</td>
<td>
<f:for each="{region.cities}" as="city">
{city.name}
</f:for>
</td>
</tr>
</table>
the <f:translate> was unnecessary
I am using django-mptt and jquery-treetable.
I am printing my objects with:
<table>
{% for node in nodes %}
<tr>
<td>{{ node }}</td>
</tr>
{% endfor %}
</table>
In jquery-treetable the <tr> element should have some attributes to identify which rows are children of which rows.
It needs to have the following setup
<table>
<tr data-tt-id="1">
<td>Parent</td>
</tr>
<tr data-tt-id="2" data-tt-parent-id="1">
<td>Child</td>
</tr>
</table>
but I can't seem to find the right template variables to identify the children correctly. I have only found node.id, node.tree_id, node.level, node.lft, and node.rght.
If your nodes are MPTTModels then you should have a 'parent' relationship to 'self'. Assuming that is the case, you should be able to get the parent id by doing:
node.parent.id