got html j.s webpage
have html table with tbody id Tag that gets populated by Java script , not fixed rows
the example in Adding a Lock to Web Page | Unlock Protocol
and added theunlock-content class to the element
but still the generated table body data showing
any ideas how to fix this ?
my code is :
<html>
<head>
<meta charset="UTF-8" />
<style>
tbody.unlock-content.locked tr {
display: none;
}
tbody.unlock-content.unlocked tr {
display: table-row;
}
.unlock-content {
display: none;
}
.unlock-content .locked {
display: none;
}
.unlock-content .unlocked {
display: none;
}
// +another css for the tables
</style>
<script>
(function(d, s) {
var js = d.createElement(s),
sc = d.getElementsByTagName(s)[0];
js.src = "https://paywall.unlock-protocol.com/static/unlock.latest.min.js";
sc.parentNode.insertBefore(js, sc); }(document, "script"));
</script>
<script>
var unlockProtocolConfig = {
locks: {
'0x4850c262cd90f96cd4e6ac1d7dda5e0efdea62e7': {
name: '1 day access',
network: 137,
},
'0xf1b8cab051d63ae708c9fb8dde63f46b5676f6a3': {
name: '7 days access',
network: 137,
},
'0xfda28da23eb1e3b9b3f7cfd92fad353e9c86bc79': {
name: '30 Day Access',
network: 137,
},
},
"icon": "https://unlock-protocol.com/static/images/svg/unlock-word-mark.svg",
"callToAction": {
"default": "Please unlock this demo!"
}
}
</script>
</head>
<body>
<h1>List</h1>
<p class="unlock-content locked">Please subscribe to show the data using Polygon USDT</p>
<p class="unlock-content unlocked">Gracias you are Subscribed please refresh the page to show data 🎉</p>
<p class="unlock-content locked" onclick="window.unlockProtocol && window.unlockProtocol.loadCheckoutModal()"><button class="button">
Subscribe & show Data
</button></p>
<br>
<br>
<h1>Binance Trading Pairs</h1>
<div class="left">
<div id="usdt-loading-bar"></div>
<table id="usdt-table">
<thead>
<tr>
<th onclick="sortTable('usdt', 0)">USDT Pairs<span id="usdt-sort-icon" class="sort-icon"></span></th>
<th onclick="sortTable('usdt', 1)">Price<span id="usdt-price-sort-icon" class="sort-icon"></span></th>
<th onclick="sortTable('usdt', 2)"> (4h)<span id="usdt-4h-sort-icon" class="sort-icon"></span></th>
<th onclick="sortTable('usdt', 3)"> (1d)<span id="usdt-1d-sort-icon" class="sort-icon"></span></th>
<th onclick="sortTable('usdt', 4)"> (1w)<span id="usdt-1w-sort-icon" class="sort-icon"></span></th>
</tr>
</thead>
<tbody id="usdt-table-body" class="unlock-content">
</tbody>
</table>
</div>
<div class="right">
<div id="btc-loading-bar"></div>
<table id="btc-table">
<thead>
<tr>
<th onclick="sortTable('btc', 0)">BTC Pairs<span id="btc-sort-icon" class="sort-icon"></span></th>
<th onclick="sortTable('btc', 1)">Price<span id="btc-price-sort-icon" class="sort-icon"></span></th>
<th onclick="sortTable('btc', 2)">(4h)<span id="btc-4h-sort-icon" class="sort-icon"></span></th>
<th onclick="sortTable('btc', 3)">(1d)<span id="btc-1d-sort-icon" class="sort-icon"></span></th>
<th onclick="sortTable('btc', 4)">(1w)<span id="btc-1w-sort-icon" class="sort-icon"></span></th>
</tr>
</thead>
<tbody id="btc-table-body" class="unlock-content">
</tbody>
</table>
</div>
</body>
<script>
document.addEventListener("DOMContentLoaded", () => {
setTimeout(() => {
}, 0);
});
window.addEventListener("unlockProtocol.status", function (event) {
// We hide all .unlock-content elements
document.querySelector(".unlock-content").style.display = "none";
// We show only the relevant element
document
.querySelectorAll(`.unlock-content.${event.detail.state}`)
.forEach((element) => {
element.style.display = "block";
});
});
window.addEventListener("unlockProtocol.authenticated", function (event) {
// event.detail.addresss includes the address of the current user, when known
});
window.addEventListener("unlockProtocol.transactionSent", function (event) {
// event.detail.hash includes the hash of the transaction sent
});
document.getElementById("usdt-table-body").classList.add("unlocked");
document.getElementById("btc-table-body").classList.add("unlocked");
</script>
<script>t/// path to able-data.js </script>
</html>