I am using the HTML and Javascript for an application which I built. I am using onlclick function,when I click the button it should take me to the new page.
function editStudent(studentId) {
console.log(studentId);
document.location.href = '/student/edit/{{studentId}}' {
{
studentId
}
}
}
<table class="table table-striped">
<thead>
<tr>
<th>Student ID</th>
<th>Student role</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{% for each_student in result %}
<tr>
<td>{{ each_student.student_id }}</td>
<td>{{ each_student.studnet_role }}</td>
<td><input class="btn btn-info" type="button" onclick="editStudent('{{each_student.student_id}}')" id="edit" value="Edit"></td>
</tr>
{% endfor %}
</tbody>
</table>
When I click the edit button it goes to the new page with this url http://localhost:6464/student/edit/,
What my expected output is
/student/edit/studentid(studentid value has to be printed for example if it's 1,it should be student/edit/1)
if you do concatenation it may work.
document.location.href = '/student/edit/'+ studentId
In this case, studentId is being passed to the function as a Javascript variable, but you're treating like if it was still inside the loop, using {{studentId}}. Just use Javascript concatenation:
document.location.href = '/student/edit/' + studentId;
Refere this answer,
Some of code removed because {% for each_student in result %} will not work here.
You are passing studentId to javascript, so just use that variable in javascript function.
function editStudent(studentId) {
console.log(studentId);
location = '/student/edit/' + studentId;
}
<table class="table table-striped">
<thead>
<tr>
<th>Student ID</th>
<th>Student role</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>student_id</td>
<td>studnet_role</td>
<td><input class="btn btn-info" type="button" onclick="editStudent(1)" id="edit" value="Edit"></td>
</tr>
</tbody>
</table>
Related
I have a datatable and there is a 'amount' column. I have a js function to seperate thousand and add currency mark to each amount in the table. However the function is not working on "each" row but only works on first row. When I google it, I understand that I need to add this function in a jquery each function. Could you help me about how to make this happen?
function numberWithCommas(x) {
return "₺"+x.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
var val = parseInt($('#tutar').text());
//Use the code in the answer above to replace the commas.
val = numberWithCommas(val);
$('#tutar').text(val);
<table class="table table-bordered" id="Piyasa" width="100%" cellspacing="0">
<thead>
<tr>
<th scope="col">No</th>
<th scope="col">Şirket</th>
<th scope="col">Alcaklı</th>
<th scope="col">Borçlanma Tarihi</th>
<th scope="col">Ödeme Tarihi</th>
<th scope="col">Tutar</th>
<th scope="col">Açıklama</th>
<th scope="col">Bilgi Güncelle</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="5" style="text-align:right" >Toplam:</th>
<th></th>
<th></th>
</tr>
</tfoot>
<tbody>
{% for musteri in piyasa %}
<tr>
<th scope="row">{{musteri.id}}</th>
<td>{{musteri.sirket}}</td>
<td>{{musteri.alici}}</td>
<td>{{musteri.borc_tarih}}</td>
<td>{{musteri.odeme_tarih}}</td>
<td id="tutar">{{musteri.tutar|floatformat:2}}</td>
<td>{{musteri.aciklama}}</td>
<td>Güncelle</td>
</tr>
{% endfor %}
</tbody>
</table>
The first thing you should do is not re-use the same id for multiple elements on the page, which you're doing inside your server-rendered loop building up table rows.
Instead use a class, and then use that class to target all the matching elements. In the example below I have used the class format-number to indicate any cell I want to run the formatting code on.
function numberWithCommas(x) {
return "₺" + x.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
$(".format-number").each(function(){
const $this = $(this);
const currentVal = parseFloat($this.text());
$this.text( numberWithCommas(currentVal) );
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td class="format-number">10101.23</td>
</tr>
<tr>
<td class="format-number">345678.56</td>
</tr>
<tr>
<td class="format-number">123456789.45</td>
</tr>
</table>
I have a table contains a list of fifty companies(items) on a side there is a button. I want to send the name of the company from the table in which user is clicked.
Code of index.html :
<table class="table table-striped table-dark" cellspacing="0">
<thead class="bg-info">
<tr>
<th>Company's Symbol</th>
<th>Current Price</th>
<th>View Current chart</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{% for a,b in stocks %}
<tr>
<th scope="row" class="comp_name">{{ a }}</th>
<td>{{ b }}</td>
<td>
<input type="submit" class="btn graph-btn" name="_graph" value="View Graph">
</td>
<td>
<input type="submit" class="btn predict-btn" name="_predict" value="Predict Closing Price">
</td>
</tr>
{% endfor %}
</tbody>
</table>
There are two buttons for different URL. Like when user liked on .graph-btn it will go to a different URL.
Help.
If you want to go to another path (Route) that needs variables
in your template you can use the url function as shown below :
.....
if you want to get the same result from your python code user reverse method
return HttpResponseRedirect(reverse('url_path', args(var1)))
for more check django's documentation here
How can I pass ${policies.getId() correctly in function, while looping through ${policies}?
<html>
...
<table>
<thead>
<tr>
<th>id</th>
<th>name</th>
</tr>
</thead>
<tbody>
<tr th:each="policies : ${policies}" >
<td th:object="${policies.getId()}" onload="myFunction01(object)"></td>
<td th:object="${policies.getName()}" onload="myFunction02(object)"></td>
</tr>
</tbody>
</table>
<script th:inline="javascript">
function myFunction01(object){...}
function myFunction02(object){...}
</script>
</html>
can you try this and let me know if this worked for you
th:onload ="'myFunction01(\'' + ${policies.getId()} + '\');'"
I have 2 datatables and what I wan is to fill the second datatable depending on witch row of the first datatable I clicked. Some sort of master-detail.
This is the master datatable:
<table id="tinzidentziak" class="table table-bordered table-striped dataTable" role="grid" aria-describedby="example1_info">
<thead>
<tr>
<th>Id</th>
<th>Inzidentzia</th>
<th>Erabiltzailea</th>
<th>Engine version</th>
<th></th>
</tr>
</thead>
<tbody>
{% for i in inzidentziak %}
<tr>
<td>{{ i.id }}</td>
<td>{{ i.izena }}</td>
<td>{{ i.userid }}</td>
<td>{{ i.teknikoa }}</td>
<td></td>
</tr>
{% endfor %}
</tbody>
</table>
This is the detail datatable:
<table id="tdeiak" class="table table-bordered table-striped dataTable">
<thead>
<tr>
<th>id</th>
<th>Fetxa</th>
<th>Nork</th>
<th>Teknikoa</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
The first datatable is working ok, the problem comes when I tried to load the second datatable, I tried with this:
var table = $('#tinzidentziak').DataTable();
$('#tinzidentziak tbody').on( 'click', 'tr', function () {
var midata=table.row( this ).data();
$('#tdeiak').Datatable({
"ajax": "deiak.json"
});
} );
I tried first without any parameter, just for check if it´s possible to load the second datatable this way. I´ve got this error:
Uncaught TypeError: $(...).Datatable is not a function
on the line $('#tdeiak').Datatable({
Any help or clue?
It's DataTable not Datatable
Change
$('#tdeiak').Datatable({
"ajax": "deiak.json"
});
to
$('#tdeiak').DataTable({
"ajax": "deiak.json"
});
I would like to write a javascript-function which changes the name of a html-th on button-click. My problem is, that I don't know how to get the "text" of the th.
document.getElementById("id").text
and
document.getElementById("id").value
don't work.
You should use innerHTML
HTML:
<table>
<thead>
<tr>
<th id="headId">Col name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Info</td>
</tr>
</tbody>
</table>
<input type="button" value="Click" onclick="getHeadName()" />
JS:
function getHeadName() {
var headName = document.getElementById("headId").innerHTML
}