Make Javascript Run Without Refreshing The Page

App Development
1

Hi All,

I’ve created a progress bar on one of my pages using an HTML Component with the following code:

<div id="progress-container">
<div id="progress-bar">
<p id="progress-percentage">progress</p>
</div>
</div>

And the following CSS code:

#progress-container {
  width: 100%;
  background-color: #ddd;
}

#progress-bar {
  box-sizing: border-box;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  color: white;
  width: 90%;
  background-color: #04AA6D;
}

Then, I’m using Javascript to change the progress bar based on field values in the data table, like this:

document.getElementById("progress-percentage").innerHTML = {pageField.Percentage Complete} + "%";
document.getElementById("progress-bar").style.width = {pageField.Percentage Complete} + "%";

It works great… EXCEPT I have to click the refresh button in my browser to get it to update. If I navigate to another page in the live app, and then back to the page with the progress bar, nothing changes, even if the value of the field in the data table does change.

I’m still a JS beginner, so I’m probably missing something super obvious. Any ideas? How can I make the JS code run when the page loads, without having to hit the browser refresh button?

Thank you

2

Hey @mattb, welcome to the community!

Just want to confirm that the values you’re wanting to display in a progress bar are coming from a record value. If they are, you can actually use the <progress> tag in an equation field.

For example:

CONCAT('<progress',CHAR(32), 'value="',{Select},'"',CHAR(32),'max="100"></progress>')

Replace {Select} with whatever number field/complex formula field you have and it will display a progress bar.

See a working example here that updates in real-time after an inline edit.

https://timyoung.tadabase.io/progress-bar#!/new-page

3

Hi Tim,

I did try a version of what you’re suggesting, but I don’t have a table on the page and after speaking with support, it seems that currently, the progress bars will not display in a details component. That’s why I created the custom progress bar instead.

But, yes, the values for the progress bar are coming from a record field. I just can’t get the JS to pull the updated data without hitting the refresh button each time.

4

Another idea might be to use our new Custom Component feature. Speak to our team and we should be able to enable it for your account.

You can see the last video in the video series on this page:

5

@tim.young @moe

I’ll check out the custom component feature. In the meantime, I’ve found a workaround.

First, I added an HTML component. The only thing I added to the HTML component is the field with the value I want to use for the percentage of the progress bar. The value is in curly brackets, which means it continually updates according to the record value.

Then, I used this JS code to update the progress bar based on that HTML component, and to also hide the HTML component so it’s not visible on the page:

TB.render(‘component_7’, function(data) {
let psource = document.querySelectorAll(“p > af-data-table-field > span”)[0];
let pnumber = document.getElementById(“progress-percentage”);
let pbar = document.getElementById(“progress-bar”);
pnumber.innerHTML = psource.innerHTML + “%”;
pbar.style.width = psource.innerHTML + “%”;
psource.style.display = “none”;
});

I think the JS is not pulling the updated record data, even when using the curly brackets in the JS tab, because the page isn’t being fully reloaded each time, so the JS is not triggering. The HTML component must update without the full reload.

1 Like