I am trying to enable a pop-up window with information on the clicked table element.
Therefore I wanna get the element ID of the clicked element. Thanks :D
Problem
I always get the same ID//table element no matter which table entry I click.
HTML Page with a table which displays data from the database
{%extends 'main/base.html'%}
{%block main%}
<div class="container-xxl d-flex justify-content-center">
<div class="container-fluid" style='background-color:aquamarine;'></div>
<div class="container-fluid" style='background-color:rgba(190, 90, 230, 0.308); height:10em;'></div>
<div class="container-fluid" style='background-color:aquamarine;'></div>
</div>
<div class="container-xxl d-flex justify-content-center">
<form action='' method="POST">
{%csrf_token%}
<input type='text' name='isbn' placeholder="ISBN-13 Number...">
<button type='submit'>Add</button>
</form>
</div>
<div class="container-xxl d-flex justify-content-center" id='table'>
<table class='table table-hover'>
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Author</th>
<th>Kategorie</th>
<th>Seitenzahl</th>
</tr>
</thead>
<tbody>
{%for book in book_table%}
<!--tr onClick()-->
<tr onClick='get_element_ID()'>
<td id='ID'>{{book.id}}</td>
<td>{{book.title}}</td>
<td>{{book.author}}</td>
<td>{{book.kategorie}}</td>
<td>{{book.seitenzahl}}</td>
</tr>
{%endfor%}
</tbody>
<tfoot>
<tr>
<td>
<p>footer</p>
</td>
</tr>
</tfoot>
</table>
</div>
<script>
function get_element_ID(){
var id = (this).document.getElementById('ID');
console.log(id);
}
</script>
{%endblock main%}
Picture of HTML Page with Table
Picture of console log output
in the HTML DOM u can't have more than 1 item with the same id, for all of your td tags the id is ID, so if u change the <td id="ID"> with <td id={{book.id}}> , each td must have the correct id.
You are getting ID 1 all the time because when you do getElementByID("ID") the DOM returns the first element it finds with that ID, since there should be no more.
Like mentioned above the issue was the rather silly mistake that the requested ID in getElementById('ID') was always the same.
This know works like it should:
{%extends 'main/base.html'%}
{%block main%}
<div class="container-xxl d-flex justify-content-center">
<div class="container-fluid" style='background-color:aquamarine;'></div>
<div class="container-fluid" style='background-color:rgba(190, 90, 230, 0.308); height:10em;'></div>
<div class="container-fluid" style='background-color:aquamarine;'></div>
</div>
<div class="container-xxl d-flex justify-content-center">
<form action='' method="POST">
{%csrf_token%}
<input type='text' name='isbn' placeholder="ISBN-13 Number...">
<button type='submit'>Add</button>
</form>
</div>
<div class="container-xxl d-flex justify-content-center" id='table'>
<table class='table table-hover'>
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Author</th>
<th>Kategorie</th>
<th>Seitenzahl</th>
</tr>
</thead>
<tbody>
{%for book in book_table%}
<!--tr onClick()-->
<tr onClick='get_element_ID("{{book.id}}")'>
<td id="{{book.id}}">{{book.id}}</td>
<td>{{book.title}}</td>
<td>{{book.author}}</td>
<td>{{book.kategorie}}</td>
<td>{{book.seitenzahl}}</td>
</tr>
{%endfor%}
</tbody>
<tfoot>
<tr>
<td>
<p>footer</p>
</td>
</tr>
</tfoot>
</table>
</div>
<script>
function get_element_ID(id){
var book_id = document.getElementById(id);
console.log(book_id);
}
</script>
{%endblock main%}
Output console
Related
how would I access the hair with Javascript (as in Black)? I tried using normal accessing from within other elements gradually through defining variables accessing the table and tr it was in, but it still didn't work. Please respond if you have an answer. Thx
<table id="customers" class="customers">
<tr class="parent" data-toggle="toggle">
<th id="rank" style="text-align: center;">Number</th>
<th id="name" style="text-align: center;">Name</th>
<th id="name" style="text-align: center;"></th>
</tr>
<tbody class="content">
<div class="one">
<tr>
<td>1</td>
<td class="name">Object A</td>
<td class="down">
<button onclick="toggleText()" type="button" class="collapsible" id="1">
+
</button>
</td>
</tr>
</div>
<tr class="panel" id="one-a" colspan="3">
<div class="panel">
<td class="expand">
<div class="hair">
Black
</div>
</td>
</div>
</tr>
</tbody>
</table>
It may have something to do with the table being a table and not being able to fetch certain values like normal code.
Try
var hairColor = document.getElementsByClassName("hair")[0].innerHTML;
it will return an array of elements , your array will be of length 1 (because you only have one tag with the specified class, "hair" in this case) so the value you need is of index 0.
How to use JavaScript to get elements by class name?
I have a table like this:
<table class="table">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Usernames</th>
<th scope="col">number</th>
<th scope="col">Type</th>
<th scope="col">Date</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<?php
foreach($projects as $project)
{
echo '<tr>';
echo '<th>'.$project['id'].'</th>';
echo '<td>'.$project['user'].'</td>';
echo '<td>'.$project['number'].'</td>';
echo '<td>'.$project['user_type'].'</td>';
echo '<td>'.$project['logs'].'</td>';
echo '<td>View</td>';
echo '</tr>';
}
?>
</tbody>
</table>
I am trying to render the details of the table above on another div (shown below) in the same page but on another window view pane using the 'View' button.
<div class="row my-4">
<div class="col-12 col-md-6 col-lg-3 mb-4 mb-lg-0">
<div class="card">
<h5 class="card-header">Customers</h5>
<div class="card-body" id="more-info">
<h5 class="card-title">
<?php echo $post['id']; ?>
</h5>
<p class="card-text">
<?php echo $post['user']; ?>
</p>
<p class="card-text text-success">
<?php echo $post['catch_code']; ?>
</p>
</div>
</div>
</div>
The foreach in the first example is been iterated with the "view" button for each element. I need each element to be displayed as I click 'View' on it. I was worried if clicking "view" then all elements will be displayed, being that the iteration is the same as the id on the View button..
Please kindly propose a solution for me.
The issue you have is that you're creating multiple elements with the same id in your loop. This is invalid as id values must be unique within the DOM.
To fix this issue change the id attribute to a class instead. You can then populate the 'View' link with data attributes that hold the information to populate the #more-info div when the button is clicked.
Try this:
let $idField = $('h5.user-id');
let $userField = $('p.user');
let $catchCodeField = $('p.catch-code');
$('.view-files').on('click', e => {
e.preventDefault();
let $btn = $(e.target);
let id = $btn.data('id');
let user = $btn.data('user');
let catchCode = $btn.data('catchcode');
$idField.text(id);
$userField.text(user);
$catchCodeField.text(catchCode);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table class="table">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Usernames</th>
<th scope="col">number</th>
<th scope="col">Type</th>
<th scope="col">Date</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<th>001</th>
<td>User 001</td>
<td>Number 001</td>
<td>User type 001</td>
<td>Logs 001</td>
<td>View</td>
</tr>
<tr>
<th>002</th>
<td>User 002</td>
<td>Number 002</td>
<td>User type 002</td>
<td>Logs 002</td>
<td>View</td>
</tr>
<tr>
<th>003</th>
<td>User 003</td>
<td>Number 003</td>
<td>User type 003</td>
<td>Logs 003</td>
<td>View</td>
</tr>
</tbody>
</table>
<div class="row my-4">
<div class="col-12 col-md-6 col-lg-3 mb-4 mb-lg-0">
<div class="card">
<h5 class="card-header">Customers</h5>
<div class="card-body" id="more-info">
<h5 class="card-title user-id"></h5>
<p class="card-text user"></p>
<p class="card-text text-success catch-code"></p>
</div>
</div>
</div>
</div>
I have list of parameters along with checkboxs where i can search and select required parameters in table.Now i want to set values for selected parameters.For this i have created textfields(Parameters name,Datatype,Set Value) in table format.When i select check box in parameters table,textfields in table should be created with selected parameters . when i deselect checkbox textfields should removed. For instance if i select one parameter "TestingDevice" from parameters table,Textfields should be created value with "TestingDevice" and other DataType and Set value should be manually entered by user. Below the code i am using.
List Of Parameters
<div class="tab-content">
<div id="Device_B" class="tab-pane fade in active">
<div class="col-md-12">
<div class="col-md-6" style="overflow: auto">
<br>
<input type="text" class="form-control" id="customGroupAddParamInput" onkeyup="addParameterTableSearchFunction()" placeholder="Search 🔍 :">
<br>
<h4>All Parameters</h4>
<div class="span5 border-0" style="overflow: auto">
<table id="customGroupAddParamTable" class="table table-bordered">
<thead>
<tr class="info">
<th style="width: 10px;">
<input type="checkbox" id="check_selectall_custom_B[]" onclick="selectAllCustom(this)"/>SA</th>
<th>Parameter Name</th>
</tr>
</thead>
<tbody class="parameter_table">
<% #all_br_parameters.each do |parameter| %>
<tr id="tr_rb_<%=parameter['id'] %>">
<td>
<input type="checkbox" class="checkBox" name="checkBox_custom_B[]" onchange="clickedParamBox(this.name)">
</td>
<td style="word-break:break-all;">
<%= parameter['parameter_name']%>
</td>
</tr>
<% end %>
</tbody>
</table>
</div>
</div>
Table For Textfield
<div class="tab-content" >
<div id="protocol" class="tab-pane fade in active">
<div class="span3 border-0" style="overflow: scroll">
<table id="addParamTable" class="table table-bordered">
<thead>
<tr class="info">
<th>Parameter Name</th>
<th>Data Type</th>
<th>Expected Set Value</th>
</tr>
</thead>
<tbody class="parameter_table">
<tr>
<td>
<input type="text" id="parameterName" class="parameterName" name="parameter_name">
</td>
<td>
<input type="text" class="parameterDscription" name="parameter_description">
</td>
<td>
<input type="text" class="expectedValue" name="expected_value">
</td>
</tr>
</tbody>
</table>
Try this out: It's how I'd handle it.
$(document).ready(function() {
window.addEventListener('load', (event) => {
checkbox = document.getElementById("checkbox_to_be_evaluated");
textbox = document.getElementById("textbox_to_be_displayed_or_hidden");
evaluateCheckbox(checkbox, textbox);
});
$(checkbox).click(function(){
evaluateCheckbox(checkbox, textbox)
});
function evaluateCheckbox(checkbox, textbox) {
//take in element of checkbox
if(checkbox.checked){
textbox.style.display = "block";
}else {
textbox.style.display = "none";
}
//handle accordingly
};
});
I need to print POS receipt from sale order with same products qty etc.
In Sale order I have created a button "Print POS receIpt". with this button I want to trigger a method that prints out a receipt with sale order lines on it.
So I need to find the method that creates POS receipts and pass the sale order line values to it.
So which method is printing receipts in POS and how can I trigger it? Is it in models.js?
In those Odoo versions, the receipts that are being printed in the POS are a screen capture (actually only the receipt div) made by JavaScript. But you cannot use this approach on the Sale Order view.
However, there is another way to print tickets into PDF with a normal Qweb Report. If you click on the POS menu you will find the "Orders" menu option on the left margin. You will have the print option under the "Print" menu on the form and list view.
If you go to the point_of_sale module you will find the report_receipt.xml file written with the Qweb language. You can customize it to make it work with the sale.order model. But take into account that the paperformat should be point_of_sale.paperformat_posreceipt, you will find the paperformat assigment at the bottom of these code:
<template id="report_receipt">
<t t-call="report.html_container">
<t t-foreach="docs" t-as="o">
<div class="page">
<div class="row">
<div class="col-xs-12 text-center">
<h2 t-esc="o.user_id.company_id.name"/>
<div t-field="o.partner_id"
t-field-options='{"widget": "contact", "fields": ["address", "name", "phone", "fax"], "no_marker": true}'/>
User: <span t-field="o.user_id"/><br/>
Date: <span t-field="o.date_order"/><br/>
</div>
</div>
<div class="row">
</div>
<table class="table table-condensed">
<thead>
<tr>
<th>Description</th>
<th class="text-right">Quantity</th>
<th class="text-right">Price</th>
</tr>
</thead>
<tbody>
<tr t-foreach="o.lines" t-as="line">
<td><span t-field="line.product_id"/></td>
<td class="text-right">
<t t-if="o.state != 'cancel' and o.statement_ids">
<span t-field="line.qty"/>
</t>
</td>
<td class="text-right">
<t t-if="o.state != 'cancel' and o.statement_ids">
<span t-esc="formatLang(net(line.id), currency_obj=res_company.currency_id)"/>
</t>
<t t-if="line.discount != 0.0">
<span t-esc="line.discount"/>%
</t>
</td>
</tr>
</tbody>
</table>
<div class="row">
<div class="col-xs-12 pull-right">
<table class="table table-condensed">
<tr class="border-black">
<td><strong>Taxes</strong></td>
<td class="text-right">
<strong t-esc="formatLang(o.amount_tax, currency_obj=res_company.currency_id)"/>
</td>
</tr>
<tr>
<td><strong>Total</strong></td>
<td class="text-right">
<strong t-esc="formatLang(o.amount_total, currency_obj=res_company.currency_id)"/>
</td>
</tr>
</table>
</div>
</div>
<table class="table table-condensed">
<thead>
<tr>
<th>Payment Mode</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr t-foreach="get_journal_amt(o)" t-as="d">
<td>
<span t-esc="d['name']"/>
</td>
<td>
<span t-esc="formatLang(d['amt'], currency_obj=res_company.currency_id)"/>
</td>
</tr>
</tbody>
</table>
</div>
</t>
</t>
</template>
<report
id="action_report_pos_receipt"
string="Receipt"
model="pos.order"
report_type="qweb-pdf"
name="point_of_sale.report_receipt"
file="point_of_sale.report_receipt"
/>
<record id="action_report_pos_receipt" model="ir.actions.report.xml">
<field name="paperformat_id" ref="point_of_sale.paperformat_posreceipt"/>
</record>
<div ng-controller="reportCtrl">
<table class="table table-hover">
<thead class="row col-md-3">
<tr class="row">
<th class="col-md-6">Key </th>
<th class="col-md-6"> Value</th>
</tr>
</thead>
<tbody ng-repeat="param in params" class="row col-md-3">
<tr class="row">
<td class="col-md-6 info">{{param.key}}</td>
<td class="col-md-6 info">{{param.val}}</td>
</tr>
</tbody>
</table>
</div>
I have this table, when i'm using the bootstrap grid system with ng-repeat the results are very strange..
I've tried to play with the grid system but it dosent seem that it helps..
You do not need to add the row col-md-3 classes to the table-body or the row class to the tr elements. Also if you are repeating the items your ng-repeat needs to be on the tr element, if it is on the tbody element you are going to have multiple unnecessary tbody elements.
Please see working example
If you just want a simple table:
<div ng-controller="TestController as vm">
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>Key </th>
<th> Value</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in vm.items">
<td>{{$index}}</td>
<td>{{item}}</td>
</tr>
</tbody>
</table>
</div>
JS:
var myApp = angular.module('myApp',[])
.controller('TestController', ['$scope', function($scope) {
var self = this;
self.items = ['one', 'two', 'three', 'four'];
}])
If you do not need the table element you can use the bootstrap row and col-* classes
<div class="row">
<div class="col-sm-6">
<h1>Key</h1>
</div>
<div class="col-sm-6">
<h1>Value</h1>
</div>
</div>
<div class="row" ng-repeat="item in vm.items">
<div class="col-sm-6">
{{$index}}
</div>
<div class="col-sm-6">
{{item}}
</div>
</div>
Try remove the class="row .."
<div ng-controller="reportCtrl">
<table class="table table-hover">
<thead>
<tr>
<th>Key </th>
<th> Value</th>
</tr>
</thead>
<tbody ng-repeat="param in params">
<tr>
<td>{{param.key}}</td>
<td>{{param.val}}</td>
</tr>
</tbody>
</table>
</div>
Remove the bootstrap classes row, col-md-6 in tbody ,use the below code..
for all medias, it will be resized
<div ng-controller="reportCtrl" class="table-responsive>
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>Key </th>
<th> Value</th>
</tr>
</thead>
<tbody ng-repeat="param in params">
<tr>
<td>{{param.key}}</td>
<td>{{param.val}}</td>
</tr>
</tbody>
</table>
</div>
<div ng-controller="reportCtrl">
<table class="table table-hover">
<div class="row col-md-3">
<thead class="row">
<tr>
<th class="col-md-6">Key </th>
<th class="col-md-6"> Value</th>
</tr>
</thead>
<tbody ng-repeat="param in params">
<tr class="row">
<td class="col-md-6 info">{{param.key}}</td>
<td class="col-md-6 info">{{param.val}}</td>
</tr>
</tbody>
</div>
</table>
I have made few changes, like covered the entire table into 3 divisions and then
dividing them further into 6-6 for ths and tds. Just see if it works.
You may try this code
By removing the col-md-3
and style the table with width:auto
<div ng-controller="reportCtrl">
<table class="table table-hover" style="width:auto">
<thead class="row ">
<tr class="row">
<th class="col-md-6">Key </th>
<th class="col-md-6"> Value</th>
</tr>
</thead>
<tbody ng-repeat="param in params" class="row ">
<tr class="row">
<td class="col-md-6 info">{{param.key}}</td>
<td class="col-md-6 info">{{param.val}}</td>
</tr>
</tbody>
<tbody ng-repeat="param in params" class="row ">
<tr class="row">
<td class="col-md-6 info">{{param.key}}</td>
<td class="col-md-6 info">{{param.val}}</td>
</tr>
</tbody>
</table>
</div>