Im trying to render a HTML Table based on a dictionary that I get..The dictionary has 3 items..When I loop through for loop the 1st item is recognized part of the table..The 2nd and 3rd row is not recognized part of the table..
What could the problem?
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<col width="100">
<col width="100">
<col width="100">
<col width="100">
<th>NAME</th>
<th>FEEDBACK</th>
<th>RATING</th>
<th>DATE</th>
</tr>
%for row in feedbacks:
<tr>
<td> {{ row['name'] }} </td>
<td> {{ row['feedback'] }} </td>
<td> {{ row['rating'] }} </td>
<td> {{ row['date'] }} </td>
</tr>
</table>
</body>
</html>
I am not familiar with Bottle, but is seems that you should end your %for loop.
Maybe something along the lines of %end
edit: I am surprised it would not give you some sort of template error though. That is how Flask and Django work. You labelled your post as Django, but I am pretty sure this is no django.
Related
I'm using Blade to fill some tables with content but in some cases a table might end up empty when there is nothing to fill.
Here is part of the php / blade template:
<table class="table">
#isset ($content->client)
<tr>
<td>
Client:
</td>
<td class="text-right">
{{ $content->client }}
</td>
</tr>
#endisset
#isset ($content->published)
<tr>
<td>
Published:
</td>
<td class="text-right">
{{ $content->published }}
</td>
</tr>
#endisset
</table>
In case $content->client and $content->published are not set the result is something like:
<table class="table">
</table>
Is there a simple css way to remove the table entirely in these cases?
I'm familiar with the :empty selector but aparently that doesn't work if there are whitespaces in the tag :(
I would suggest not printing the table if either of the variables are empty.
<?php
if( isset($content->client) || isset($content->published))
{
// echo table
}
?>
Did you try :blank? It also selects whitespace while :empty does not.
I already have VueJS v-for working fine:
<tr v-for="request in requests">
<td>{{request.name}}</td>
<td> .. etc .. </td>
</tr>
Now I need to add a legend/guiding row say every 25 or 50 records, something like this:
<span v-for="(request, index) in requests">
<tr>
<td>{{request.name}}</td>
<td> .. etc .. </td>
</tr>
<tr v-if="index % 25 == 0">
<th>Name</th>
<th> .. etc .. </th>
</tr>
</span>
To my surprise, not only does the v-if part not work but I get back an error: "ReferenceError: request is not defined" (even if I left the v-if directive out, or even removed the extra <tr> entirely), so VueJS is making considerations on DOM structure perhaps that I don't understand yet.
Either way, how would I do this?
And by the way, is there a purely HTML/CSS way to do this?
Your code has invalid HTML. You can't have spans wrapping trs.
Usually invalid HTML is not much of a big deal, but the browsers are extremelly buggy when handling invalid tr/tds placement (the spec is not clear about what they should do in case of error, so they behave each in a specific way for specific cases/errors).
The correct approach is to use <template>s, aka "Conditional Groups":
<table>
<template v-for="(request, index) in requests">
<tr>
<td>{{request.name}}</td>
<td> .. etc .. </td>
</tr>
<tr v-if="index % 25 == 0">
<th>Name</th>
<th> .. etc .. </th>
</tr>
</template>
Demo reproducing your error:
new Vue({
el: '#app',
data: {
requests: [{name: 'a1'},{name: 'a2'},{name: 'a3'},{name: 'a4'},{name: 'a5'},{name: 'a6'},{name: 'a7'},{name: 'a8'}]
}
})
<script src="https://unpkg.com/vue"></script>
<div id="app">
<table border="1">
<span v-for="(request, index) in requests">
<tr>
<td>{{request.name}}</td>
<td> .. etc .. </td>
</tr>
<tr v-if="index % 3 == 0">
<th>Name</th>
<th> .. etc .. </th>
</tr>
</span>
</table>
</div>
Demo with the fix:
new Vue({
el: '#app',
data: {
requests: [{name: 'a1'},{name: 'a2'},{name: 'a3'},{name: 'a4'},{name: 'a5'},{name: 'a6'},{name: 'a7'},{name: 'a8'}]
}
})
<script src="https://unpkg.com/vue"></script>
<div id="app">
<table border="1">
<template v-for="(request, index) in requests">
<tr>
<td>{{request.name}}</td>
<td> .. etc .. </td>
</tr>
<tr v-if="index % 3 == 0">
<th>Name</th>
<th> .. etc .. </th>
</tr>
</template>
</table>
</div>
I have a question about XPath and the nodeset repeater (XForms).
As you can see in the following code snippet I want to change an attribute of a specific entry of a list and additionally an attribute in the following entry in the nodeset with a trigger.
The first <xf:action> works fine but the second does not. What I want here is to leave the current nodeset of the processinstance, go to the following one and change the attribute state here. How do I realize that with XPath?
<div>
<xf:model>
<xf:instance xmlns="" id="template">
<project id="">
<name/>
...
<processinstance>
<name>
<state>
</processinstance>
</project>
</xf:instance>
</xf:model>
....
<!-- Process repeat table -->
<div>
<table class="table table-hover">
<thead>
<th width="50%">Processname</th>
<th width="50%">State</th>
<th width="50%">Action</th>
</thead>
<tbody id="process-repeat" xf:repeat-nodeset="//project[index('project-repeat')]/processinstance">
<tr>
<td>
<xf:output ref="name"/>
</td>
<td>
<xf:output ref="state"/>
</td>
<td>
<xf:group ref=".[state eq 'in processing']">
<xf:trigger appearance="minimal">
<xf:label>finish process</xf:label>
<xf:action>
<xf:setvalue ref="state">finished</xf:setvalue>
</xf:action>
<!-- THE FOLLOWING DOES NOT WORK AS I WANT! -->
<xf:action>
<xf:setvalue ref="//project[index('project-repeat')]/processinstance[index(process-repeat)+1]">in process</xf:setvalue>
</xf:action>
</xf:trigger>
</xf:group>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Best regards,
Felix
One thing is that you have a typo:
index(process-repeat)
vs.
index('process-repeat')
In addition, the index() function represents the currently selected, in the UI, repeat iteration. It does not represent the current iteration being evaluated in XPath.
The bottom line is that you cannot use index('process-repeat') to identify the current repeat iteration. It is a common misunderstanding of the index() function.
Some implementations have functions to identify the current repeat iteration. I assume you are using BetterFORM, and I don't know if it has such a function. With Orbeon Forms you could write:
//project[index('project-repeat')]/processinstance[xxf:repeat-position()]
Or better, if betterFORM supports variables, you could use that to avoid repeating yourself with:
<tbody id="process-repeat" xf:repeat-nodeset="//project[index('project-repeat')]/processinstance">
<xf:var name="current-process" value="."/>
<tr>
<td>
<xf:output ref="name"/>
</td>
<td>
<xf:output ref="state"/>
</td>
<td>
<xf:group ref=".[state eq 'in processing']">
<xf:trigger appearance="minimal">
<xf:label>finish process</xf:label>
<xf:action>
<xf:setvalue ref="state">finished</xf:setvalue>
</xf:action>
<xf:action>
<xf:setvalue ref="$current-process">in process</xf:setvalue>
</xf:action>
</xf:trigger>
</xf:group>
</td>
</tr>
</tbody>
I'm stumped and can't find the bug.
Angular is working, because it's reading my {{expressions}}, however, it's not replacing them with the content I'm expecting. It's simply removing them and blanks sit in their place.
I'm sure this issue is also tied in with, for some reason, my ng-repeat directive isn't working. (It's not repeating.)
Can someone help me out? I'm trying to draw a table. In this example, when it's done, it should have the respective "idea" posted multiple times across the same row, and each row should have a different "idea", as listed in the $scope.
It's creating one single row filled with blanks (rather than {{idea}} ).
index.html
<!doctype html>
<html ng-app="AppName">
<head>
<link rel="stylesheet" type="text/css" href="styles/table.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</head>
<body>
<div ng-controller="TableController">
<table>
<tr>
<td>
<table cellspacing="0">
<tr class="title_bar">
<td>Title</td>
<td>Rating</td>
<td>Votes</td>
<td>Comments</td>
<td>Post Date</td>
<td>Status</td>
</tr>
</table>
</td>
</tr>
<div ng-repeat="idea in ideas">
<tr style="color: white">
<td>{{idea}}</td>
<td>{{idea}}%</td>
<td>{{idea}}</td>
<td>{{idea}}</td>
<td>{{idea}}</td>
<td>{{idea}}</td>
</tr>
</div>
</table>
</div>
<script src="scripts/controllers/TableController.js"></script>
</body>
</html>
TableController.js
var app = angular.module('AppName', []);
app.controller('TableController', ['$scope',function($scope){
$scope.ideas = [
'wow',
'cool',
'so nice',
'amazing',
'please work'
];
}]);
I'm probably missing something obvious but I appreciate any help you could give me.
Edit: Whoops, guess I need to brush up on my HTML basics.
Well, your HTML layout looks pretty strange. You shouldn't put <div> between <tr>
Try something like this:
<table>
<tr class="title_bar">
<td>Title</td>
<td>Rating</td>
<td>Votes</td>
<td>Comments</td>
<td>Post Date</td>
<td>Status</td>
</tr>
<tr ng-repeat="idea in ideas">
<td>{{idea}}</td>
<td>{{idea}}%</td>
<td>{{idea}}</td>
<td>{{idea}}</td>
<td>{{idea}}</td>
<td>{{idea}}</td>
</tr>
</table>
Fiddle demo
What you have is invalid HTML, so it's not rendering how you expect it to. You can't put a <div> inside a <table> and have it contain elements; you can include a <div> inside a <td> element but that doesn't really help you.
If you want to use ng-repeat in a table use it in <tr> or <tbody>
<tr ng-repeat="idea in ideas">
<td>{{idea}}</td>
........
</tr>
Try adding the ng-repeat directive to the td itself.
<tr>
<td ng-repeat="idea in ideas">{{idea}}</td>
</tr>
That should iterate through your $scope.ideas array.
How could I use ruby to extract information from a table consisting of these rows? Is it possible to detect the comments using nokogiri?
<!-- Begin Topic Entry 4134 -->
<tr>
<td align="center" class="row2"><image src='style_images/ip.boardpr/f_norm.gif' border='0' alt='New Posts' /></td>
<td align="center" width="3%" class="row1"> </td>
<td class="row2">
<table class='ipbtable' cellspacing="0">
<tr>
<td valign="middle"><alink href='http://www.xxx.com/index.php?showtopic=4134&view=getnewpost'><image src='style_images/ip.boardpr/newpost.gif' border='0' alt='Goto last unread' title='Goto last unread' hspace=2></a></td>
<td width="100%">
<div style='float:right'></div>
<div> <alink href="http://www.xxx.com/index.php?showtopic=4134&hl=">EXTRACT LINK 1</a> </div>
</td>
</tr>
</table>
<span class="desc">EXTRACT DESCRIPTION</span>
</td>
<td class="row2" width="15%"><span class="forumdesc"><alink href="http://www.xxx.com/index.php?showforum=19" title="Living">EXTRACT LINK 2</a></span></td>
<td align="center" class="row1" width='10%'><alink href='http://www.xxx.com/index.php?showuser=1642'>Mr P</a></td>
<td align="center" class="row2"><alink href="javascript:who_posted(4134);">1</a></td>
<td align="center" class="row1">46</td>
<td class="row1"><span class="desc">Today, 12:04 AM<br /><alink href="http://www.xxx.com/index.php?showtopic=4134&view=getlastpost">Last post by:</a> <b><alink href='http://www.xxx.com/index.php?showuser=1649'>underft</a></b></span></td>
</tr>
<!-- End Topic Entry 4134 -->
-->
Try to use xpath instead:
html_doc = Nokogiri::HTML("<html><body><!-- Begin Topic Entry 4134 --></body></html>")
html_doc.xpath('//comment()')
You could implement a Nokogiri SAX Parser. This is done faster than it might seem at first sight. You get events for Elements, Attributes and Comments.
Within your parser, your should rememeber the state, like #currently_interested = true to know which parts to rememeber and which not.