add hidden variable value to the session without form submission - javascript

i have a basic html table with some data displayed, what i want is when i click on specific row the value of incident Id cell is passed to the hidden variable value i have developed this part, what i don't know how can i put hidden variable value in the session for other functionality purposes.
my table
<div id="tab1" class="tab active">
<table class="table table-striped">
<thead style="background-color: #F0F1F2">
<tr>
<th>Incident Id</th>
<th>Party Name</th>
<th>Max Rank</th>
<th>Incident Description</th>
</tr>
</thead>
<tbody>
<c:forEach items="${incidents}" var="incident">
<tr id="tr" onclick="changeIncidentValue(${incident.incidentId})">
<td>${incident.incidentId}</td>
<td>xxx</td>
<td>${incident.partyNameMaxRank}</td>
<td>${incident.incidentDesc}</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
<input type="hidden" id="incidentId" name="incidentId" value=""/>
js function
<script>
function changeIncidentValue(incidentId){
$('#incidentId').val(incidentId);
var x = $('#incidentId').val();
console.log(x);
}
</script>

Related

How to update a td value from a table with id using jQuery

I am trying to work out how to update the value of the table cell for each row using jQuery.
I basically update the td#11_p value from the table, but it's not updated. I tried following jQuery,
$('#test').click(function() {
var oldprirce = $("#11_p").val();
$("#11_p").val(+(oldprirce) + +(15));
jQuery("#PDList").trigger("liszt:updated");
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="pdsDetails" border=" 1px solid black" class="table table-bordered table-striped datatable dt-responsive nowrap" style="width: 100%; ">
<thead>
<tr>
<th>Product Name</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
<tbody id="PDList">
<tr id="11_row">
<td>PARACHUTE HAIR OIL 50ml</td>
<td id="11_q">1</td>
<td id="11_p">20</td>
</tr>
<tr id="12_row">
<td>HAIR OIL 50ml</td>
<td id="12_q">2</td>
<td id="12_p">30</td>
</tr>
</tbody>
</table>
<button id="test">change</button>
https://jsfiddle.net/SathishNcc/1dusLhrv/16/
Only form control elements have a value property. td elements just have text or HTML content which can be read and updated.
Given your goal of wanting to add 15 to the current integer in the cell you can provide a function to text() which accepts the current content as a string argument, convert it to a float (as it's a price) and then add 15 to it before returning it to the function for it to update the DOM. Try this:
$('#test').click(function() {
$("#11_p").text((i, t) => parseFloat(t) + 15);
jQuery("#PDList").trigger("liszt:updated");
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="pdsDetails" border=" 1px solid black" class="table table-bordered table-striped datatable dt-responsive nowrap" style="width: 100%; ">
<thead>
<tr>
<th>Product Name</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
<tbody id="PDList">
<tr id="11_row">
<td>PARACHUTE HAIR OIL 50ml</td>
<td id="11_q">1</td>
<td id="11_p">20</td>
</tr>
<tr id="12_row">
<td>HAIR OIL 50ml</td>
<td id="12_q">2</td>
<td id="12_p">30</td>
</tr>
</tbody>
</table>
<button id="test">change</button>
You could change $("#11_q").val(); to $("#11_q").html();

Modifying classList using jQuery

I am having trouble changing the classes for a table row.
My HTML
<table class="table table-light table-bordered text-center">
<thead class="thead-dark">
<tr>
<th scope="col">Ava</th>
<th scope="col">Full name</th>
<th scope="col">Registred</th>
</tr>
</thead>
<tbody>
{{#users}}
<tr class="table-light" id="colorised">
<td><img src="{{avaUrl}}" width="42" height="42"/></td>
<td>{{username}}</td>
<td>{{registeredAt}}</td>
</tr>
{{/users}}
</tbody>
{{^users}}
</br>
<strong style="color: orange">No results for "{{searchedUsername}}"</strong>
</br>
</br>
{{/users}}
</table>
And JavaScript
<script>
$('#colorised').attr('class','table-success');
</script>
How can I change the colour of the table row ?
You could toggle between the classes to switch them over:
$('#colorised').toggleClass('table-light table-success');
To execute your code after the DOM has finished loading so that it is ready for access or modification you need to wrap your jQuery code inside $(document).ready(function() {});. It is assumed that your code is located before DOM elements such as in the tag or in the top or middle of the section before some DOM elements and that code does attempt to access the DOM upon first initialization.
So that it should be placed into a $(document).ready() block so it will not execute before the DOM is ready.The short hand for $(document).ready() is $(function() {}); Here is an example for the code provided by you.
$(function() {
$('#colorised').attr('class','table-success');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-light table-bordered text-center">
<thead class="thead-dark">
<tr>
<th scope="col">Ava</th>
<th scope="col">Full name</th>
<th scope="col">Registred</th>
</tr>
</thead>
<tbody>
{{#users}}
<tr class="table-light" id="colorised">
<td><img src="{{avaUrl}}" width="42" height="42"/></td>
<td>{{username}}</td>
<td>{{registeredAt}}</td>
</tr>
{{/users}}
</tbody>
{{^users}}
</br>
<strong style="color: orange">No results for "{{searchedUsername}}"</strong>
</br>
</br>
{{/users}}
</table>

jQuery delete all table rows except the selected one?

I'm trying to come up with the best way to use jQuery to delete all the rows except for the one selected. I've done some searching and I've seen several posts about deleting all records or all records except the first or last row but nothing on deleting all but the one selected.
The scenario would be searching for a list of employees which would return maybe 5 records. Then there would be a "Select" button and when you click on that button it would remove all <tbody> rows except for that one. Actually from there my idea is to not only remove the rows but then to hide the "Select" button and display a text box as well as displaying a "Add" button below the table to add the employees with the item entered in the textbox.
I've thought about putting a hidden field on each row that has an row #, pass that row index to a jQuery function and then loop through all of the Tbody.Tr and remove if it doesn't match the row index passed in?
Another thought would be to put an Onclick on each of the "Select" buttons and then in the function use "this" to for reference to the row but then I don't know how to effectively say "remove all but $this row".
<table class="table table-hover table-striped table-bordered table-sm">
<thead class="thead-light">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Employee ID</th>
<th>Position Title</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.listEmployee)
{
<tr>
<td>#item.FirstName</td>
<td>#item.LastName</td>
<td>#item.EmployeeId</td>
<td>#item.PositionTitle</td>
<td>
<button id="btnSelect" class="btn btn-sm">Select</button>
<input id="txtCaseNo" type="text" style="display:none;" />
</td>
</tr>
}
</tbody>
</table>
First ids need to be singular so id="btnSelect" is not going to work. Make it a class or name.
So select the TR and select the siblings and you can remove it.
$("tbody").on("click", "button", function() { //bind the click to the buttons
var button = $(this) //get what was clicked
$(this).closest("tr") //select the TR
.siblings() //get the other TRS
.remove() // um, remove them
button.hide() //hide your button
button.siblings().removeAttr('hidden') //show the input
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover table-striped table-bordered table-sm">
<thead class="thead-light">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Employee ID</th>
<th>Position Title</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>A#item.FirstName</td>
<td>#item.LastName</td>
<td>#item.EmployeeId</td>
<td>#item.PositionTitle</td>
<td>
<button class="btnSelect btn btn-sm">Select</button>
<input name="txtCaseNo" type="text" hidden />
</td>
</tr>
<tr>
<td>B#item.FirstName</td>
<td>#item.LastName</td>
<td>#item.EmployeeId</td>
<td>#item.PositionTitle</td>
<td>
<button class="btnSelect btn btn-sm">Select</button>
<input name="txtCaseNo" type="text" hidden />
</td>
</tr>
<tr>
<td>C#item.FirstName</td>
<td>#item.LastName</td>
<td>#item.EmployeeId</td>
<td>#item.PositionTitle</td>
<td>
<button class="btnSelect btn btn-sm">Select</button>
<input name="txtCaseNo" type="text" hidden />
</td>
</tr>
<tr>
<td>D#item.FirstName</td>
<td>#item.LastName</td>
<td>#item.EmployeeId</td>
<td>#item.PositionTitle</td>
<td>
<button class="btnSelect btn btn-sm">Select</button>
<input name="txtCaseNo" type="text" hidden />
</td>
</tr>
</tbody>
</table>
Why not filter on your Model.listEmployee on the id of the selected row? This is assuming your current set up is reactive.
Ie:
const new_list = old_list.filter(item => item.id !== selected_id)

How to perform an action for dynamic data by clicking on checkbox in a table

I'm using bootstrap table. In that I want to perform an action when i click on checkbox in table to get Item ID value.
<table data-toggle="table" id="table-style" data-row-style="rowStyle" data-url="data/g3.json" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-select-item-name="toolbar1" data-pagination="true" data-sort-name="name" data-sort-order="desc" data-single-select="false" data-click-to-select="true" data-maintain-selected="true">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="id" >Item ID</th>
<th data-field="name" data-sortable="true">Product Name</th>
<th data-field="price" data-sortable="true">Actual Price</th>
<th data-field="discount_price" data-sortable="true">Discount Price</th>
<th data-field="stock_avail" data-sortable="true">Stock Available</th>
</tr>
</thead>
</table>
Jquery function :
$("input[name='btSelectItem']").on("click","input[name='btSelectItem']",function(){
alert("Hello");
var values = "";
$.each($("input[name='btSelectItem']:checked"), function(index, value) {
var data = $(this).parents('tr:eq(0)');
if(index > 0)
values ++;
values +=$(data).find('td:eq(1)').text();
});
alert(values);
});
When i click on checkbox my function was not calling, Kindly help me to resolve this. Thanks in advance
Below is my table Code :
<table id="eventsTable" class="table table-striped table-hover" data-id-field="id" data-toolbar="#toolbar" data-show-columns="true" data-show-toggle="true" data-show-refresh="true" data-search="true" data-url="data/g3.json" data-height="300" data-toggle="table" style="margin-top: -41px;">
<thead>
<tbody>
<tr class="selected" data-index="0">
<td class="bs-checkbox">
<input type="checkbox" name="btSelectItem" data-index="0">
</td>
<td style="">Test</td>
<td style="">21</td>
<td style="">High</td>
<td style="">Low</td>
<td style="">High</td>
<td style="">100</td>
</tr>
<tr data-index="1">
<td class="bs-checkbox">
<input type="checkbox" name="btSelectItem" data-index="1">
</td>
<td style="">Test2</td>
<td style="">26</td>
<td style="">High</td>
<td style="">Low</td>
<td style="">Medium</td>
<td style="">50</td>
</tr>
<tr data-index="2">
<tr data-index="3">
<tr data-index="4">
<tr data-index="5">
<tr data-index="6">
<tr data-index="7">
</tbody>
</table>
Besides the selector was wrong, the problem is that bootstrap table js code captures the event when you click and stops its propagation, so it never bubbles up and you can't capture on a document level.
The good news is that it provides an API to capture such events. In this case you can use several events like onCheck, onCheckSome, as noted in the docs, e.g.:
$('#table-style').on("check.bs.table", myFunc);
Since you're already attaching the event handler to the input element, you don't need any further filter in on.
Try with:
$(document).on("click", "input[name='btSelectItem']", function(){ ... })

jQuery reset a single table during onchange

I have a table as follows. How to reset the table using jQuery to its original state during on change(with all th,tds). Not to reload the entire page because I have another tables also. I tried with dataTables but it adds search filters and paginations unnecessarily
<table class="table table-bordered table-hover table-sm" id="t01">
<thead style="text-align:center">
<tr>
<th class="col-md-6" style="text-align:center">Dxx</th>
<th class="col-md-2" style="text-align:center">Rxx/Unit</th>
<th class="col-md-2" style="text-align:center">Txxx</th>
<th class="col-md-2" style="text-align:center">Pxxx</th>
</tr>
</thead>
<tbody>
<tr>
<th>Full</th>
<td id="fp" style="text-align:right">0</td>
<td id="fr" style="text-align:center">0</td>
<td>
<div style="float:left">$</div>
<div style="float:right" id="fpT">0.00</div>
</td>
</tr>
<tr>
<th >Fractional</th>
<td id="fr" style="text-align:right">0</td>
<td id="frN" style="text-align:center">0</td>
<td>
<div style="float:left">$</div>
<div id="frT" style="float:right">0.00</div>
</td>
</tr>
<tr>
<th >Premium</th>
<td id="pRate" style="text-align:right">0</td>
<td id="pNos" style="text-align:center">0%</td>
<td>
<div style="float:left">$</div>
<div id="pTotal" style="float:right">0.00</div>
</td>
</tr>
<tr class="active">
<th>Premium Discount</th>
<td style="text-align:right" id="premium-discount-rate">0</td>
<td style="text-align:center">
<select id="premium-disc-list">
<option value=""></option>
</select>
</td>
<td>
<div style="float:left">$</div>
<div style="float:right" id="premium-discount-total">0.00</div>
</td>
</tr>
</tbody>
</table>
jQuery
var table = $('#t01').dataTable();
//table.clear().draw();
//table.fnClearTable();
//table.fnDraw();
//table.fnDestroy();
//table.fnDraw();
I have 2 options in my mind:
1) You can mark all the elements that could be reset with some 'resetable' class and add data-original-val property, and once you decide to reset it do something like that:
$('.resetable','#t01').each(function(){
var originalVal = $(this).data('original-val');
$(this).html(originalVal);
})
2) Render another copy of the table inside type="text/html" script like this:
<script type="text/html" id="t01-original">
<table class="table table-bordered table-hover table-sm" id="t01">
<thead style="text-align:center">
<tr>
<th class="col-md-6" style="text-align:center">Dxx</th>
<th class="col-md-2" style="text-align:center">Rxx/Unit</th>
<th class="col-md-2" style="text-align:center">Txxx</th>
<th class="col-md-2" style="text-align:center">Pxxx</th>
</tr>
</thead>
...
</table>
</script>
this way all the content of the script tag won't be parsed and you won't have duplicate id issues. On the reset simply replace the content of the table with the one from the script:
//t01-container is the id of div that wraps the table:
$( '#t01-container').html($('#t01-original').html());

Categories