https://www.sprouteducation.com/wp-content/themes/hello-elementor-child/the-states-pricing.js

1document.addEventListener("DOMContentLoaded", function () {
2    var select = document.getElementById("stateSelect");
3    var container = document.getElementById("ajax-pricing-table-container");
4
5    if (!select || !container) return;
6
7    // Fix visibility and trigger Supsystic layout logic using MutationObserver
8    function removePreDisplayStyles() {
9        requestAnimationFrame(() => {
10            // Remove Supsystic-injected blocker
11            var elements = container.querySelectorAll('.ptsPreDisplayStyle');
12            elements.forEach(function (el) {
13                el.remove();
14            });
15
16            // Reveal table
17            var hiddenTable = container.querySelector('.ptsBlock');
18            if (hiddenTable) {
19                hiddenTable.style.opacity = '1';
20                hiddenTable.style.visibility = 'visible';
21
22                // Watch for DOM changes in the table to trigger height fix
23                const observer = new MutationObserver(function () {
24                    observer.disconnect();
25
26                    if (typeof window.ptsTableFrontendBlockHeightFix === 'function') {
27                        window.ptsTableFrontendBlockHeightFix();
28                    }
29                });
30
31                // Observe table for internal DOM changes
32                observer.observe(hiddenTable, { childList: true, subtree: true });
33
34                // Trigger fallback fix in case mutation doesn't fire
35                setTimeout(() => {
36                    if (typeof window.ptsTableFrontendBlockHeightFix === 'function') {
37                        window.ptsTableFrontendBlockHeightFix();
38                    }
39                }, 500);
40            }
41        });
42    }
43
44    // Load pricing table for a given state
45    function loadPricingTable(state) {
46        var tableId = StatePricingData.tables[state];
47        var cacheKey = "pricing_table_" + tableId;
48
49        if (!tableId) {
50            container.innerHTML = "<p>Please select a state to view pricing.</p>";
51            return;
52        }
53
54        if (sessionStorage.getItem(cacheKey)) {
55            container.innerHTML = sessionStorage.getItem(cacheKey);
56            removePreDisplayStyles();
57            return;
58        }
59
60        container.innerHTML = '<div class="ajax-spinner"></div><p>Loading pricing table for ' + state.toUpperCase() + '...</p>';
61
62        fetch(StatePricingData.ajaxurl + "?action=load_pricing_table&table_id=" + tableId)
63            .then(res => res.text())
64            .then(html => {
65                container.innerHTML = html;
66                sessionStorage.setItem(cacheKey, html);
67                removePreDisplayStyles();
68            })
69            .catch(() => {
70                container.innerHTML = "<p>Error loading table. Please try again.</p>";
71            });
72    }
73
74    // On dropdown change
75    select.addEventListener("change", function () {
76        var state = this.value;
77        loadPricingTable(state);
78    });
79
80    // Load default state (table ID 10)
81    var defaultState = Object.keys(StatePricingData.tables).find(function (key) {
82        return StatePricingData.tables[key] === "10" || StatePricingData.tables[key] === 10;
83    });
84
85    if (defaultState) {
86        select.value = defaultState;
87        loadPricingTable(defaultState);
88    }
89});