Table looses JavaScript on 2nd page?

Community Discussions How Do I
#1

I added a small bit of javascript to the page that contains a table. It removes extra 0’s that are added when bringing numbers into text equations. It works great! However, when I click on page 2 of the table it does not apply the script. When I got back to page 1 it is not applied. If I go to the last page (page 11) the script is ALWAYS applied. When I go to any page from the last page (page 11) the script is applied on that page. When I am on any page other than page 11 and go to another page the script is not applied. Below is my script.

// Removes excess 0's from Routing/job information field
TB.render('component_3',function(){
    $('routing-info-string').each(function(){
        $(this).text($(this).text().replace(/.0000000000/g,''));
    })
});

Has anyone experienced anything like this?

#2

I was curious if it was something like the script was not running when changing table pages. I added console.log to the render function and the inner replace function and confirmed the script is running for 50 table rows every time the table page is changed.

#3

To fix this I put a time delay on the javascript to make sure the component was fully rendered first. This fully fixed it.

TB.render('component_3',function(){
    function run(){
        $('routing-info-string').each(function(){
            $(this).text($(this).text().replace(/.0000000000/g,''));
            console.log("routing-info-string script run");
        })
        console.log("component_3 rendered")
    }
    setTimeout(run,30);
});
1 Like
Time Date formula format issue
#4

The final issue I ran into when manipulating table field data via javascript was the script did not run after an inline edit was submitted. That particular row then went back to the raw format. To fix that I added this to the javascript page. Note I first used $(‘[ng-click=“refreshData()”]’).click(); instead of referencing the actual refresh button but I was getting strange behavior when clicking on another field to edit. Referencing the button seems to not cause that most of the time. Note the whole reason I did any of this was so I did not have to have so many extra fields on the backend just to combine/format the data I wanted it to display as.

//Refreshes whole table after doing inline edit
$('body').click(function() {
    setTimeout(function() {
        $(".btn-success").click(function() {
            setTimeout(function() {
                document.querySelector("#x_element_page_209_3 > div.table-responsive.table-outer-wrapper > div.table-actions.no-print > div.pull-left.form-inline > button").click()
            }, 1500);
        });
    },500);
});