On table scroll listener - javascript

I'm trying to find out event of scrolling tables.
I can get the left param, for example, using:
$("#scrollTable").offset().left
But I can't add the listener of its changing.
Everything I want is to monitor the changing of left scroll parameter of table and apply it to another DOM element (that is not a problem).
HTML example of my table:
<div class="scrollTableOuter">
<div id="scrollTableInner" class="scrollTableInner">
<table id="scrollTable" class="persist-area">
<thead>
<tr class="persist-header">
<th style="height: 80px;">Name</th>
<td style="width: 80px;">
</td>
<td style="width: 80px;">
</td>
</tr>
</thead>
<tbody>
<tr>
<th>name</th>
<td style="text-align: center;">
<input class="arrow-change" style="width: 35px; text-align: right;" autocomplete="off" min="0" name="AwardEvent[2][3][value]" id="AwardEvent_2_3_value" type="number" value="1">
</td>
</tr>
</tbody>
</table>
</div></div>

You should bind a listener to the 'scroll' event, as the docs point out.
$('#target').on('scroll', function() {
// your code
});
obviously, #target should be a selector for the element that houses the scrollbars, possibly document or a div you have on overflow

Related

The click event won't trigger

On the table I created, there is an anchor tag embedded with a cross icon and I want to assign an event to it, however when I click it nothing happen.
I have tried various way including $(".remove1"), $("#productTable tbody tr td a"),...
Then I try to debug in chrome by setting up breakpoint but it just won't go into the function.
the table
<table class="table" id="productTable">
<thead class="thead-primary">
<tr class="text-center">
<th> </th>
<th> </th>
<th>Product name</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr class="text-center">
<td class="product-remove"><span><i class="ion-ios-close remove1"></i></span></td>
<td class="image-prod">
<div class="img" style="background-image:url(images/beef.jpg);"></div>
</td>
<td class="product-name">
<h3>Beef Noodles Soup</h3>
</td>
<td class="price">RM12.00</td>
<td class="quantity">
<div class="input-group mb-3">
<button class="quantity-left-minus">-</button>
<input type="text" name="quantity" class="quantity form-control input-number" value="2" min="1" max="100">
<button class="quantity-right-plus">+</button>
</div>
</td>
<td class="total">RM24.00</td>
</tr>
<tr class="text-center">
<td class="product-remove"><span><i class="ion-ios-close remove1"></i></span></td>
<td class="image-prod">
<div class="img" style="background-image:url(images/dumpling.jfif);"></div>
</td>
<td class="product-name">
<h3>Dumpling</h3>
</td>
<td class="price">RM5.00</td>
<td class="quantity">
<div class="input-group mb-3">
<button class="quantity-left-minus">-</button>
<input type="text" name="quantity" class="quantity form-control input-number" value="1" min="1" max="100">
<button class="quantity-right-plus">+</button>
</div>
</td>
<td class="total">RM5.00</td>
</tr>
</tbody>
</table>
jquery
$(function() {
$(".product-remove a").on("click", function() {
console.log("test");
});
});
when i click on the a nothing written out in console, please help.
Plain JS:
const icons = document.querySelectorAll('.product-remove a');
icons.forEach(element => {
element.addEventListener("click", function(e){
e.preventDefault();
console.log("yeah");
})
});
You need to give the anchor tag some sort of clickable area though:
.product-remove a{
display: block;
padding: 8px;
background: goldenrod;
}

How to get event target default value JavaScript

I need to be able to get my target's default value. However, it returns undefined, even though it returns my edited text content.
Table
<table class="data table-bordered table table-striped" id="ui" method="POST">
<tr style="background-color:blue;color:white;">
<td width="25%">Device-imei</td>
<td>Device-Model</td>
<td>device-nickname</td>
</tr>
<tr>
<td>"111111"</td>
<td>"Model"</td>
<td>
<div class="device-name" contenteditable>"Name"</div>
</td>
</tr>
<tr>
<td>"11121341"</td>
<td>"asdf"</td>
<td>
<div class="device-name" contenteditable>"Name"</div>
</td>
</tr>
</table>
Javascript
$('.device-name').on('blur', function(event) {
alert(event.target.defaultValue);
alert(event.target.textContent);
});
EDIT
Found a way around my code
I added data value into my div and used the getAttribute to get my data
HTML
<table class="data table-bordered table table-striped" id="ui" method="POST">
<tr style="background-color:blue;color:white;">
<td width="25%">Device-imei</td>
<td>Device-Model</td>
<td>device-nickname</td>
</tr>
<tr>
<td>"111111"</td>
<td>"Model"</td>
<td>
<div class="device-name" contenteditable data-value="Name">"Name"</div>
</td>
</tr>
<tr>
<td>"11121341"</td>
<td>"asdf"</td>
<td>
<div class="device-name" contenteditable data-value="Name">"Name"</div>
</td>
</tr>
</table>
JavaScript
$('.device-name').on('blur', function(event){
alert(event.target.getAttribute('data-value'));
alert(event.target.textContent);
})
The target property can be the element that registered for the event or a descendant of it. It is often useful to compare event.target to this in order to determine if the event is being handled due to event bubbling. This property is very useful in event delegation, when events bubble.
source
So in your case it is the same as you would do
$('.device-name').on('blur', function(event) {
alert(this.defaultValue);
alert(this.textContent);
});
There is no such thing as defaultValue
Solution
If you want to store the value you can assign it to element attribute and retrive it using jQuery function attr() or data() or javascript function getAttribute()
$('.device-name').on('blur', function(event) {
alert(event.target.getAttribute('data-default'));
alert($(event.target).attr('data-default'));
alert($(event.target).data('default'));
alert(event.target.textContent);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="data table-bordered table table-striped" id="ui" method="POST">
<tr style="background-color:blue;color:white;">
<td width="25%">Device-imei</td>
<td>Device-Model</td>
<td>device-nickname</td>
</tr>
<tr>
<td>"111111"</td>
<td>"Model"</td>
<td>
<div class="device-name" contenteditable data-default="Name">"Name"</div>
</td>
</tr>
<tr>
<td>"11121341"</td>
<td>"asdf"</td>
<td>
<div class="device-name" contenteditable data-default="Name">"Name"</div>
</td>
</tr>
</table>

Default value for blank fields

Appreciate if you could help.
I had populated the data from a form into a dialog box when users click on the 'submit'. However, I would like to populate and change the default value to "NIL" for empty fields. The following is my codes for populating the data:
jQuery('#lblCustNameBs').html(jQuery('#custNameBs').val())
jQuery('#lblembossingNameBs').html(jQuery('#embossingNameBs').val())
jQuery('#lblCustMobileBs').html(jQuery('#custMobileBs').val())
The code for the table are as follow:
<tr>
<td style="width: 200px !important;">
Salutation :
</td>
<td id ='lblTitleBs' />
</tr>
<tr>
<td style="width: 200px !important;">
Customer Name :
</td>
<td id ='lblCustNameBs' />
</tr>
<tr>
<td style="width: 200px !important;">
Embossing Name :
</td>
<td id ='lblembossingNameBs' />
</tr>
Thanks in advance :)
You can use the || operator to coalesce a null/undefined value to whatever you require.
Also note tat td cells are not self closing so you should use <td></td> instead of <td />. The use of both inline styles and !important should ideally be avoided too.
jQuery(function($) {
$('#lblCustNameBs').html($('#custNameBs').val() || 'NIL');
$('#lblembossingNameBs').html($('#embossingNameBs').val() || 'NIL');
$('#lblCustMobileBs').html($('#custMobileBs').val() || 'NIL');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td style="width: 200px !important;">
Salutation :
</td>
<td id="lblTitleBs"></td>
</tr>
<tr>
<td style="width: 200px !important;">
Customer Name :
</td>
<td id="lblCustNameBs"></td>
</tr>
<tr>
<td style="width: 200px !important;">
Embossing Name :
</td>
<td id="lblembossingNameBs"></td>
</tr>
</table>

Make current HTML row editable

In the screenshot, I want to be able to use the onClick event of the edit image to make the 5 proceeding text boxes of the same row editable. By default I have set them 'readonly'. I have looked for other solutions but I am not sure how to reference the current row.
<table class = "idtable" cellspacing="0">
<tr style="background-color:#999999;color:white">
<th width="200px" class="tablehead">Type</th>
<th width="200px" class="tablehead">Value</th>
<th width="200px" class="tablehead">State</th>
<th width="200px" class="tablehead">Status</th>
<th width="200px" class="tablehead">Entry Date</th>
<th width="100px" class="tablehead">Edit</th>
<th width="100px" class="tablehead">Delete</th>
</tr>
<tr style="text-align:center">
<td class="idtable-borderleft"><input id="idType" class="readonly" type="text" value="INSTSERVICES" readonly></td>
<td class="idtable-bordermid"><input id="idValue" class="readonly" type="text" value="1234 " readonly></td>
<td class="idtable-bordermid"><input id="idState" style="font-size:85%" class="readonly" type="text" value="UNMODIFIED" readonly></td>
<td class="idtable-bordermid"><input id="idStatus" class="readonly" type="text" value="Active" readonly></td>
<td class="idtable-bordermid"><input id="idStartDate" class="readonly" type="text" value="2015-03-17" readonly></td>
<td class="idtable-bordermid"><img onclick="editRow()" src="https://localhost:8443/xxxxx/images/edit.png"></td>
<td class="idtable-borderright"></td>
</tr>
<tr>
<td colspan="7"><input style="margin-left:50%; margin-top: 5px" type="submit" value="Update"></td>
</tr>
</table>
Don't use the onClick tag.
Attach to the click event using jQuery, then traverse the DOM to find the row and finally manipulate the input tags.
In this example, I assume that you added a class of btnedit to the image:
$('.idtable .btnedit').click(function(){
var row = $(this).closest('tr'); //find the parent row
var inputs = $('input', row); //find all the inputs inside the row
inputs.prop('readonly', false); //change the attribute
});
Fiddle: http://jsfiddle.net/o26q8w6j/
You need to use something like jQuery editable.
Try double clicking text in below demo
http://www.appelsiini.net/projects/jeditable/default.html
You need to fire ajax call to update data in database.

How to stop scrolling on some part of table

I have a table in my page like following:
<div style="overflow-x: scroll; width:300px;">
<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Now the table is scrolling in x direction. but i want to prevent the first and second column to scrolling. Please help

Categories