I’m experiencing an issue with coding in Wix Studio.
I created a webpage with filter elements and dynamic numbering on the publication page.
However, there seems to be a glitch with the dynamic numbering. For example, after applying a filter, the number remains at 8, and only resets to 1 on the second attempt.
Is there a way to resolve this issue?
Since you mention code - I suspect this is a bug in the code written.
Would you be able to share it so we can help figure out what’s happening?
Hi @noahlovell, here’s the code we have.
// import wixData from 'wix-data';
// function updateNumers(i) {
// console.log("runs numbering");
// let index = i;
// $w('#repeater2').forEachItem(($item) => {
// $item('#text67').text = `${index + 1}`;
// index++;
// });
// }
// $w.onReady(() => {
// updateNumers(0);
// $w("#dropdown1").onChange(async () => {
// updateNumers(0);
// });
// $w("#dropdown2").onChange(async () => {
// updateNumers(0);
// });
// });
// // Dropdown filter
// export function applyFilters() {
// const val1 = $w('#dropdown1').value;
// const val2 = $w('#dropdown2').value;
// let filter = wixData.filter();
// if (val1) filter = filter.eq("field1", val1); // replace field1 with your CMS field
// if (val2) filter = filter.eq("field2", val2); // replace field2 with your CMS field
// $w('#dataset1').setFilter(filter);
// }
////////////// TEST
import wixData from "wix-data";
function getFilteredCount() {
const type = $w("#dropdown1").value;
const year = $w("#dropdown2").value;
let query = wixData.query("Import570");
if (type && type !== "RESET_ALL") {
query = query.eq("type", type);
}
if (year && year !== "RESET_ALL") {
query = query.eq("year", Number(year));
}
query.count()
.then(count => {
$w("#text66").text = `${count}`;
});
}
function calculatesOrder() {
$w('#repeater2').onItemReady(($item, $itemData, index) => {
$item('#text67').text = `${index + 1}`;
});
}
$w.onReady(() => {
$w('#dataset1').onReady(() => {
const totalPublications = $w("#dataset1").getTotalCount();
if (totalPublications) {
$w("#text65").text = `${totalPublications}`;
$w("#text66").text = `${totalPublications}`;
}
calculatesOrder();
})
$w("#dropdown1").onChange(async () => {
getFilteredCount();
setTimeout(() => {
console.log('timeout order')
calculatesOrder();
}, 300);
});
$w("#dropdown2").onChange(async () => {
getFilteredCount();
setTimeout(() => {
console.log('timeout order')
calculatesOrder();
}, 300);
});
})
$w.onReady(() => {
$w("#repeater2").onItemReady(($item, itemData) => {
const authors = itemData.authorsArray;
const venue = itemData.venue;
const maxButtons = 9;
let buttonIndex = 0; // Tracks which button to populate
if (!venue || venue === "") {
$item("#text61").collapse();
}
for (let i = 0; i < authors.length; i++) {
if (authors[i].link) { // Only show authors with a link
const buttonId = `#authorButton${buttonIndex}`;
$item(buttonId).label = authors[i].name;
$item(buttonId).link = authors[i].link;
$item(buttonId).target = "_blank";
$item(buttonId).expand();
buttonIndex++;
}
}
// Hide remaining buttons
for (let j = buttonIndex; j < maxButtons; j++) {
$item(`#authorButton${j}`).collapse();
}
});
});
//dynamic numbers //dynamic number link to the filers button
// $w.onReady(() => {
// $w('#repeater2').onItemReady(($item, itemData, index) => {
// $item('#text67').text = `${index + 1}`;
// });
// function applyFilter() {
// let filter = wixData.filter();
// if ($w('#dropdown2').value) {
// filter = filter.eq('year', Number($w('#dropdown2').value));
// }
// if ($w('#dropdown1').value) {
// filter = filter.eq('paperType', $w('#dropdown1').value);
// }
// $w('#dataset1').setFilter(filter);
// }
// $w('#dropdown2').onChange(applyFilter);
// $w('#dropdown2').onChange(applyFilter);
// });
I have a feeling it’s related to the calculatesOrder function - since onItemReady only runs when items are created. I’d recommend reading this to understand how it works a little further - On Item Ready | Velo
I also notice you have more than one onReady - we generally encourage only having one per page load.
I think there’s a few other things you might be able to do, such as using the getTotalCount - docs here - on the dataset which you are filtering, rather than making another data request.
I’ve given it a quick go at refactoring the code (with a little help from AI, since I don’t know the full scope of the project), which might give some inspiration. I’d double check before just using it, but hope this helps!
import wixData from "wix-data";
$w.onReady(() => {
// 1. Initial Setup: When the dataset first loads
$w("#dataset1").onReady(() => {
updateCountsAndOrder();
});
// 2. Repeater Item Design Logic
$w("#repeater2").onItemReady(($item, itemData, index) => {
// Handle Row Numbering
$item("#text67").text = `${index + 1}`;
// Handle Venue Visibility
if (!itemData.venue) {
$item("#text61").collapse();
} else {
$item("#text61").expand();
}
// Handle Dynamic Author Buttons
const authors = itemData.authorsArray || [];
const maxButtons = 9;
let buttonIndex = 0;
authors.forEach((author) => {
if (author.link && buttonIndex < maxButtons) {
const button = $item(`#authorButton${buttonIndex}`);
button.label = author.name;
button.link = author.link;
button.target = "_blank";
button.expand();
buttonIndex++;
}
});
// Hide unused buttons
for (let j = buttonIndex; j < maxButtons; j++) {
$item(`#authorButton${j}`).collapse();
}
});
// 3. Dropdown Event Listeners
$w("#dropdown1").onChange(() => applyFilters());
$w("#dropdown2").onChange(() => applyFilters());
});
/**
* Applies filters and waits for the dataset to finish
* before updating the visual numbers.
*/
function applyFilters() {
const type = $w("#dropdown1").value;
const year = $w("#dropdown2").value;
let filter = wixData.filter();
if (type && type !== "RESET_ALL") {
filter = filter.eq("type", type);
}
if (year && year !== "RESET_ALL") {
filter = filter.eq("year", Number(year));
}
// Set the filter, then wait for the dataset to refresh
$w("#dataset1")
.setFilter(filter)
.then(() => {
// This runs ONLY after the data has been updated
updateCountsAndOrder();
console.log("Dataset filtered and order updated.");
});
}
/**
* Updates the total count texts and refreshes the repeater numbering
*/
function updateCountsAndOrder() {
const count = $w("#dataset1").getTotalCount();
// Update count displays
$w("#text65").text = `${count}`;
$w("#text66").text = `${count}`;
// Update the visual index for every item currently in the repeater
$w("#repeater2").forEachItem(($item, itemData, index) => {
$item("#text67").text = `${index + 1}`;
});
}
Hi @noahlovell,
Thanks for the updated code. It seems the issue still persists after applying the first filtering attempt. I’ve attached it for your reference.
Thank You
I’ve run it on a quick demo, and it largely seems to work as I’d expect (with the index updating), but it’s difficult to tell without the full scope of your project.
I assume you’ve published the page with the code change and refreshed?
Hi @noahlovell to answer your question, yes, I have published the page both during and after the code changes. Should I recreate the entire page and apply the code again before publishing?
HI @noahlovell I have create a fresh new page. I insert with this code. Based on the code, will it have any glitch?
import wixData from "wix-data";
$w.onReady(() => {
$w("#dataset1").onReady(() => {
updateCountsAndOrder();
});
$w("#repeater1").onItemReady(($item, itemData, index) => {
// Handle Row Numbering
$item("#text45").text = `${index + 1}`;
if (!itemData.venue) {
$item("#text51").collapse();
} else {
$item("#text51").expand();
}
});
$w("#dropdown1").onChange(() => applyFilters());
$w("#dropdown2").onChange(() => applyFilters());
});
function applyFilters() {
const type = $w("#dropdown1").value;
const year = $w("#dropdown2").value;
let filter = wixData.filter();
if (type && type !== "RESET_ALL") {
filter = filter.eq("type", type);
}
if (year && year !== "RESET_ALL") {
filter = filter.eq("year", Number(year));
}
$w("#dataset1")
.setFilter(filter)
.then(() => {
updateCountsAndOrder();
console.log("Dataset filtered and order updated.");
});
}
function updateCountsAndOrder() {
const count = $w("#dataset1").getTotalCount();
$w("#text58").text = `${count}`;
$w("#repeater1").forEachItem(($item, itemData, index) => {
$item("#text45").text = `${index + 1}`;
});
}
I can’t say categorically, since I don’t have full insight into the project, what’s required/what’s expected etc. I can advise though 
In general, it’s best to follow debugging best practices, such as adding console.log to understand what and when things are running in your code. If it doesn’t work, then creating a small working prototype without additional features and comparing to what you have etc.
Hi @noahlovell
I created a new page and migrated the code from the existing page. The code is almost identical, except for the #text element. The new page does not seem to have any glitches, or at least none that are obvious.
If that’s the case, what could be causing the existing page to have issues while the new one works fine, even though the code is nearly the same with only minor changes? Here is the code:
import wixData from “wix-data”;
$w.onReady(() => {
$w(“#dataset1”).onReady(() => {
updateCountsAndOrder();
});
$w(“#repeater1”).onItemReady(($item, itemData, index) => {
// Handle Row Numbering
$item(“#text45”).text = ${index + 1};
if (!itemData.venue) {
$item("#text51").collapse();
} else {
$item("#text51").expand();
}
});
$w(“#dropdown1”).onChange(() => applyFilters());
$w(“#dropdown2”).onChange(() => applyFilters());
});
function applyFilters() {
const type = $w(“#dropdown1”).value;
const year = $w(“#dropdown2”).value;
let filter = wixData.filter();
if (type && type !== “RESET_ALL”) {
filter = filter.eq(“type”, type);
}
if (year && year !== “RESET_ALL”) {
filter = filter.eq(“year”, Number(year));
}
$w(“#dataset1”)
.setFilter(filter)
.then(() => {
updateCountsAndOrder();
console.log("Dataset filtered and order updated.");
});
}
function updateCountsAndOrder() {
const count = $w(“#dataset1”).getTotalCount();
$w(“#text58”).text = ${count};
$w(“#text59”).text = ${count};
const options = ;
for (let i = 1; i <= count; i++) {
options.push({ label: i.toString(), value: i.toString() });
}
$w(“#repeater1”).forEachItem(($item, itemData, index) => {
$item(“#text45”).text = ${index + 1};
});
}