javascript work in codepen but not work for dynamically object created in my plotly-dash app

Asked Jul 31 '18 at 06:31

Active Jul 31 '18 at 08:43

Viewed 54 times

the javascript below are tested in codepen but when it is not working in my webpage. the function supposed to freeze the first column of my table, the header remain static when I scroll my table to the left. after some discussion in the comments below it could be due to the html table is dynamically created, I am looking for help to convert the js below to handle this case.

$(document).ready(function() {
  $('.main-table tbody').scroll(function(e) {
    $('.main-table thead').css("left", -$(".main-table tbody").scrollLeft());
    $('.main-table thead tr th:nth-child(1)').css("left", $(".main-table tbody").scrollLeft()-2);
    $('.main-table tbody tr td:nth-child(1)').css("left", $(".main-table tbody").scrollLeft()-2);
  });
});

a few attempts to make it work for dynamically created table but still not working. can someone help to point out what i did wrong here:

$(document).on('scroll', '.main-table tbody', function(){
    $('thead').css("left", -$("tbody").scrollLeft());
    $('thead tr th:first-child').css("left", $("tbody").scrollLeft()-2);
    $('tbody tr td:first-child').css("left", $("tbody").scrollLeft()-2);
});

edited Jul 31 '18 at 08:43

asked Jul 31 '18 at 06:31

user466130

this is my codepen pointer: https://codepen.io/zh1611/pen/bjaEKJ – user466130 Jul 31 '18 at 06:31
1

look at console(F12) and see if you get any error – לבני מלכה Jul 31 '18 at 06:33
Are you getting any error? – Abin Thaha Jul 31 '18 at 06:36
1

**it is not working in my webpage** explain it. Did you find any error in console log? Any screen freezing? anything else? – Vikasdeep Singh Jul 31 '18 at 06:36
Can you explain what exactly is not working? check if you CSS has overflow-y: hidden; if it is a scroll problem. – Torjescu Sergiu Jul 31 '18 at 06:38
@user466130 you use jquery do you add jquery link in your `head` tag::https://www.w3schools.com/Jquery/default.asp – לבני מלכה Jul 31 '18 at 06:40
the js is suppose to able to freeze the first column of the table but it is not. the tbody is move along when i scroll to the left while header remain static. i dun see any error when i press F12. i am newbie in the web development, not quite familiar how to debug using F12 – user466130 Jul 31 '18 at 06:40
Make sure the developer console is open (usually via F12), then reload your page. Anything reported in red is something to worry about. Do you see anything? – Phil Jul 31 '18 at 06:46
i don't see error using F12 when i refresh my page with F5 – user466130 Jul 31 '18 at 06:47
Try scrolling the table, do you see any errors then? – Phil Jul 31 '18 at 06:48
what browser do you use? – לבני מלכה Jul 31 '18 at 06:49
i use chrome. this page is targeted to none-IE browser. – user466130 Jul 31 '18 at 06:50
is it on a localhost or can we see it live? – Torjescu Sergiu Jul 31 '18 at 06:50
it is on a localhost. sorry about that. – user466130 Jul 31 '18 at 06:51
Remove the js, what happens? – Torjescu Sergiu Jul 31 '18 at 06:53
i also open a ticket in plotly community, just afraid it is something in the dash module causing the problem. https://community.plot.ly/t/freeze-first-column-in-html-table/12230 – user466130 Jul 31 '18 at 06:54
currently the page is work like without the js. =.=" – user466130 Jul 31 '18 at 06:55
Is it possible the table is built dynamically from asynchronously retrieved data or simply at a later time? Ie, when the page initially loads, there is no ``. Change your JS to `jQuery(function($) { alert($('.main-table tbody').length) })`. What number do you see alerted?
– Phil Jul 31 '18 at 06:56
I did not understand your answer dear user, from what I see the css is doing the job that you need and not the js, right? – Torjescu Sergiu Jul 31 '18 at 06:58
Phil, maybe you are right...i get 0 in the popup window. do you know how to fix it? – user466130 Jul 31 '18 at 07:03
Torjescu Sergiu, to explain what i did here you can refer to this https://stackoverflow.com/questions/45071085/freeze-first-row-and-first-column-of-table – user466130 Jul 31 '18 at 07:12
@Phil my second code in the same js file also applied to an object which is dynamically created – user466130 Jul 31 '18 at 07:21

javascript work in codepen but not work for dynamically object created in my plotly-dash app

0 Answers0