I am building a table in flask with rows that are collapsible. A row may have several elements underneath it that will all collapse on clicking. It works fine if I just hardcode values but when I am populating the table using a loop with data from a python dictionary, it does not work. The first row's first child collapses instead of all the correct row's children collapsing. Below should be sufficient code to reproduce the issue.
elements is a dictionary where key is a string and value is a list of tuples.
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
</tr>
</thead>
{%for k, v in elements.items()%}
<tbody>
<tbody class="labels">
<tr>
<td colspan="5">
<label for="i">{{k}}</label>
<input type="checkbox" name="i" id="i" data-toggle="toggle">
</td>
</tr>
</tbody>
{%for desc in v%}
<tbody class="hide">
<tr>
<td>{{desc[0]}}</td>
<td>{{desc[1]}}</td>
<td>{{desc[2]}}</td>
<td>
<button>trigger</button>
</td>
<td>{{desc[3]}}</td>
</tr>
</tbody>
{% endfor %}
</tbody>
{% endfor %}
<script>
$(document).ready(function() {
$('[data-toggle="toggle"]').change(function(){
$(this).parents().next('.hide').toggle();
});
});
</script>
<label for="i">{{k}}</label>
<input type="checkbox" name="i" id="i" data-toggle="toggle">
Accidentally wasn't changing the for, name, id fields.
Needed to update those as variables as well so looks like
<label for={{k}}>{{k}}</label>
<input type="checkbox" name={{k}} id={{k}} data-toggle="toggle">
Related
actually i have a table in the html and i want to know how i can get like tabe.rows.count on python in web2py
here is my code:
<table id="TablaMateriales" name="TablaMateriales" class=" table table-responsive order-list">
<thead>
<tr class="table-light">
<td>Item</td>
<td>Descripcion</td>
<td>Unidad</td>
<td>Cantidad</td>
<td>Proveedor</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="number" name="Item0" class="form-control" style="width:45px" value="1" disabled />
</td>
<td>
<input type="text" name="Unidad0" style="width:100px" class="form-control"/>
</td>
<td>
<input type="number" min="0" id="Cantidad0" name="Cantidad0" style="width:75px" value="0" class="form-control" onFocus="this.select()" onsubmit="if(this == ''){$this.val('0');}"/>
</td>
<td>
<input type="text" name="Proveedor0" style="width:250px" class="form-control"/>
</td>
</tr>
</tbody>
</table>
and code behind:
def crearCotizacion():
materialesT = request.vars.get('TablaMateriales')
rowsCount = materialesT.rows.count
return dict(rowsCount = rowsCount)
Thank you!
It seems like you are trying to access a client side element ('TablaMateriales') on the server side. You can only do that if you explicitly pass the element back to the server.
And then you would need to manipulate it using something like http://web2py.com/books/default/chapter/29/05/the-views#Server-side-DOM-and-parsing
You could just count the number of rows using JavaScript from inside the view: JavaScript to get rows count of a HTML table
Option 1 is selected automatically from HTML which is equal to 10.
This is the HTML:
<form>
<table>
<tr>
<th>Name:</th>
<td><input id="search_term" /></td>
</tr>
<tr>
<th>Page size:</th>
<td>
<select id="page_size">
<option>4</option>
<option selected>10</option>
<option>20</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" id="search" value="Search" />
</td>
</tr>
</table>
</form>
I tried running:
js = "document.getElementById('page_size').options[1].text ='1000';"
# js = "document.getElementById('page_size').options[1].text ='1000'"
driver.execute(js)
I get KeyError when i execute js. So I tried doing it the Python way, however, nothing happens:
x = driver.find_element_by_xpath('//*[#id="page_size"]/option[2]')
x.clear()
x.send_keys(1000)
this is link i am testing on link
1:'http://example.webscraping.com/places/default/search'
As you want to change the option elements text, I just tested this piece of javascript using jsfiddle and it works, try using "innerText" instead of "text":
document.getElementById('page_size').options[1].innerText = "1000";
Link to jsfiddle: https://jsfiddle.net/z1omaue3/
Use this way self.browser.find_element_by_xpath(".//td[text() = 'image 2']/following-sibling::td/input") I can locate this input element，but when I want to click it, it doesn't work.
<div class="animationImage">
<table class="animationTab">
<tbody>
<tr>
<td class="deign_tab">Image List</td>
<td class="deign_tab" style="padding-left:30px;text-align:center;">Select</td>
</tr>
<tr>
<td>image 2</td>
<td>
<input type="checkbox" id="d6dea005-1b58-4890-8ea6-d561b30ba8c8" checked="checked">
</td>
</tr>
</tbody>
</table>
</div>
you can simply locate checkbox element with input tag like this,
//input[#id='d6dea005-1b58-4890-8ea6-d561b30ba8c8']
or if you have to access it with reference to table, then
//table[#class='animationTab']/tbody/tr[2]/td[2]/input
i have a html template like:
<button id="demo-btn-" >Pack</button>
<table class="table table-striped">
<thead>
<tr>
<th><input type="checkbox" onClick="toggle(this, 'no')"></th>
<th>Invoice</th>
<th>User</th>
<th>Order date</th>
<th>Amount</th>
<th>Status</th>
<th>Tracking Number</th>
</tr>
</thead>
<tbody>
{% for oid,dbd,stts,tp in new_orders %}
<tr>
<td><input type="checkbox" name="no" value="{{oid}}"></td>
<td><a class="btn-link" href="#">{{oid}}</a></td>
<td>Steve N. Horton</td>
<td><span class="text-muted"><i class="fa fa-clock-o"></i>{{dbd}} </span></td>
<td>{{tp}}</td>
<td>{{stts}}</td>
<td>-</td>
</tr>
{% endfor %}
</tbody>
</table>
when i select the checkbox in <thead> all the checkboxes in <tbody> are selected. Now i want, when i select the checkbox and press the pack button, the oid value for each row should be passed to a django view. How to do that?
EDIT:
I want to pass multiple oids as a list to python script. I can do that if i can pass these as a list to django app's views file. I dont know how to pass a list or a value to a django application.
I've written a Python 3.2 script to select 10 random questions out of a list of 18, having extracted them from a SQLite 3 database. The script works fine, but I now want to render this using HTML - I know how to make question boxes in HTML, but not how to get the asked question to print, in the place of a "question 1" placeholder.
HTML code below:
def PrintGame():
print( """
<html>
<div id = "textbody">
<h2>Quiz</h2>
<form method="post" action="quiz.cgi">
<table border="0">
<tr>
<td>Question 1:</td>
<td><input type="text" name="A1"/></td>
</tr>
<tr>
<td>Question 2:</td>
<td><input type="text" name="A2"/></td>
</tr>
<tr>
<td>Question 3:</td>
<td><input type="text" name="A3"/></td>
</tr>
<tr>
<td>Question 4:</td>
<td><input type="text" name="A4"/></td>
</tr>
<tr>
<td>Question 5:</td>
<td><input type="text" name="A5"/></td>
</tr>
<tr>
<td>Question 6:</td>
<td><input type="text" name="A6"/></td>
</tr>
<tr>
<td>Question 7:</td>
<td><input type="text" name="A7"/></td>
</tr>
<tr>
<td>Question 8:</td>
<td><input type="text" name="A8"/></td>
</tr>
<tr>
<td>Question 9:</td>
<td><input type="text" name="A9"/></td>
</tr>
<tr>
<td>Question 10:</td>
<td><input type="text" name="A10"/></td>
</tr>
<tr>
<td><input type="submit" value="Submit Answers"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
""")
Just to clarify, I want to replace the "Question n"-type things with the questions pulled from the SQLite 3 database. The questions are loaded into QASKEDN variables (where N is replaced by the question number).
Sounds like you just want string formatting, but with a flexible format string/variable.
I haven't checked, but something like this perhaps?
def PrintGame():
htmlquestions = []
for question in QASKEDN:
htmlquestions.append("""
<tr>
<td>{} :</td>
<td><input type="text" name="A1"/></td>
</tr>""".format(question))
html = ("""
<html>
<div id = "textbody">
<h2>Quiz</h2>
<form method="post" action="quiz.cgi">
<table border="0">"""
+ "".join(htmlquestions) +
""" </table>
</form>
</div>
</body>
</html>
""")
Update: now with opening triple double quote for the last lines.
You might want to check out Jinja - a templating language for python.
In your case your Jinja template should look something like
template_string = """
<html>
...
{% for question, name in questions %}
<tr>
<td>{{question}}</td>
<td><input type="text" name="{{name}}"/></td>
</tr>
{% endfor %}
...
</html>
"""
Then you load the template string from your code and call the rendering function passing it your data (in this case a list of tuples containing the question and name)
question_list = [("Q1", "name1"), ("Q2", "name2"), ...]
template = Template(template_string)
template.render(questions=questions_list)