Hi all,
Got a bit of a 'whack-a-mole' situation :(
I have a search function on my website which uses 8 separate search bars to filter results. These results are shown on a results page which is made up of 2 repeaters where each show 12 results and more results load on scroll. All was working fine but I then decided I'd prefer certain elements to collapse if either of the repeaters had no results in them. I have managed to get this aspect working but now the load more on scroll function is not working. The full code I have for the results page is below:
import { local } from "wix-storage";
import wixData from "wix-data";
async function fetchData() {
const firstPage = await wixData.query("Shunters").limit(1000).find();
const secondPage = await wixData
.query("Shunters")
.limit(1000)
.skip(1000)
.find();
return firstPage.items.concat(secondPage.items);
}
async function fetchData2() {
const firstPage = await wixData.query("DMU").limit(1000).find();
const secondPage = await wixData
.query("DMU")
.limit(1000)
.skip(1000)
.find();
return firstPage.items.concat(secondPage.items);
}
$w.onReady(function () {
var sameWord = local.getItem("searchWord");
$w("#iClass").value = sameWord;
$w("#iClass").placeholder = sameWord;
var sameWord2 = local.getItem("searchWord2");
$w("#iNumber").value = sameWord2;
$w("#iNumber").placeholder = sameWord2;
var sameWord3 = local.getItem("searchWord3");
$w("#iPrevNumber").value = sameWord3;
$w("#iPrevNumber").placeholder = sameWord3;
var sameWord4 = local.getItem("searchWord4");
$w("#iOperator").value = sameWord4;
$w("#iOperator").placeholder = sameWord4;
var sameWord5 = local.getItem("searchWord5");
$w("#iLivery").value = sameWord5;
$w("#iLivery").placeholder = sameWord5;
var sameWord6 = local.getItem("searchWord6");
$w("#iName").value = sameWord6;
$w("#iName").placeholder = sameWord6;
var sameWord7 = local.getItem("searchWord7");
$w("#iDepot").value = sameWord7;
$w("#iDepot").placeholder = sameWord7;
var sameWord8 = local.getItem("searchWord8");
$w("#iStatus").value = sameWord8;
$w("#iStatus").placeholder = sameWord8;
$w("#Shunters").onReady(function () {
search();
});
$w("#dmu").onReady(function () {
search2();
});
});
export function searchButton_click_1() {
search();
search2()
}
let queryResults;
async function search() {
let queryBuilder = wixData.query("Shunters");
const iClass = $w("#iClass").value;
if (iClass) {
queryBuilder = queryBuilder.contains("class1", iClass);
}
const iNumber = $w("#iNumber").value;
if (iNumber) {
queryBuilder = queryBuilder.contains("number", iNumber);
}
const iPrevNumber = $w("#iPrevNumber").value;
if (iPrevNumber) {
queryBuilder = queryBuilder.contains("previousNumber", iPrevNumber);
}
const iOperator = $w("#iOperator").value;
if (iOperator) {
queryBuilder = queryBuilder.contains("operator", iOperator);
}
const iLivery = $w("#iLivery").value;
if (iLivery) {
queryBuilder = queryBuilder.contains("livery", iLivery);
}
const iName = $w("#iName").value;
if (iName) {
queryBuilder = queryBuilder.contains("name", iName);
}
const iDepot = $w("#iDepot").value;
if (iDepot) {
queryBuilder = queryBuilder.contains("depot", iDepot);
}
const iStatus = $w("#iStatus").value;
if (iStatus) {
queryBuilder = queryBuilder.contains("status", iStatus);
}
queryResults = await queryBuilder
.limit(12)
.ascending("class1")
.ascending("sort2")
.ascending("sort")
.find()
.then ((queryResults) => {
let resultCount = queryResults.totalCount;
if (resultCount > 0) {
$w("#repeater1").data = queryResults.items;
}
else {
$w('#text116').collapse();
$w('#repeater1').collapse();
$w('#loadingStrip').collapse();
$w('#loadingGif').collapse();
}
})
.catch((err) => {
let errorMsg = err;
});
}
export async function loadingStrip_viewportEnter(event) {
$w("#loadingGif").show();
const nextResults = await queryResults.next();
$w("#loadingGif").hide();
queryResults = nextResults;
const data = $w("#repeater1").data;
$w("#repeater1").data = $w("#repeater1").data.concat(nextResults.items);
console.log("Done loading more data");
}
let queryResults2;
async function search2() {
let queryBuilder = wixData.query("DMU");
const iClass = $w("#iClass").value;
if (iClass) {
queryBuilder = queryBuilder.contains("class", iClass);
}
const iNumber = $w("#iNumber").value;
if (iNumber) {
queryBuilder = queryBuilder.contains("number", iNumber);
}
const iPrevNumber = $w("#iPrevNumber").value;
if (iPrevNumber) {
queryBuilder = queryBuilder.contains("previousNumber", iPrevNumber);
}
const iOperator = $w("#iOperator").value;
if (iOperator) {
queryBuilder = queryBuilder.contains("operator", iOperator);
}
const iLivery = $w("#iLivery").value;
if (iLivery) {
queryBuilder = queryBuilder.contains("livery", iLivery);
}
const iName = $w("#iName").value;
if (iName) {
queryBuilder = queryBuilder.contains("name", iName);
}
const iDepot = $w("#iDepot").value;
if (iDepot) {
queryBuilder = queryBuilder.contains("depot", iDepot);
}
const iStatus = $w("#iStatus").value;
if (iStatus) {
queryBuilder = queryBuilder.contains("status", iStatus);
}
queryResults2 = await queryBuilder
.limit(12)
.ascending("class")
.ascending("sort2")
.ascending("sort")
.find()
.then ((queryResults2) => {
let resultCount = queryResults2.totalCount;
if (resultCount > 0) {
$w("#repeater2").data = queryResults2.items;
}
else {
$w('#text117').collapse();
$w('#repeater2').collapse();
$w('#loadingStrip1').collapse();
$w('#loadingGif1').collapse();
}
})
.catch((err) => {
let errorMsg = err;
});
}
export async function loadingStrip1_viewportEnter(event) {
$w("#loadingGif1").show();
const nextResults = await queryResults2.next();
$w("#loadingGif1").hide();
queryResults2 = nextResults;
const data = $w("#repeater2").data;
$w("#repeater2").data = $w("#repeater2").data.concat(nextResults.items);
console.log("Done loading more data");
}
The part of the code that I have underlined, put in bold and coloured red is the code I added to enable the collapse of certain elements when a repeater is empty and it is since adding this that the export async function has stopped working. Everything else was in the code previously when the load more on scroll was working perfectly.
I have been trying to fathom out what is causing it to stop working but haven't been able to so was hoping a second (and more experienced) pair of eyes might be able to spot my error?
Thanks in advance!
Thought I would complete this thread with a solution.
I basically had to change this part of the code from my 'code B' example above:
.then ((queryResults) => { let resultCount = queryResults.totalCount; if (resultCount > 0) { $w("#repeater1").data = queryResults.items; } else { $w('#text116').collapse(); $w('#repeater1').collapse(); $w('#loadingStrip').collapse(); $w('#loadingGif').collapse(); } })
with:
$w.onReady(() => { $w('#repeater1').data = queryResults.items $w('#Shunters').onReady(() => { let resultCount = queryResults.totalCount; if(resultCount > 0) {$w('#text116').expand(); $w('#repeater1').expand(); $w('#loadingStrip').expand(); $w('#loadingGif').expand(); } }) })
I changed things slightly in that originally I had elements showing and then collapsing but in my working code I changed that to having collapsed elements that now show subject to whether the results suit the code.
The key aspect of this solution was basically having this part of the code inside an onReady method. This basically allows all of my data to load so that my loadingstrip viewportEnter then loads the next batch of data as part of the load more on scroll async export function (this can be found in the original code in post 1 of this thread).
Not sure whether this will help others but I'm just happy to have found a solution and to have this part of my site working as I want it to :)
Thanks to Prashanth and JD for pointing me in the right direction.
Thread can now be closed!
from a quick glance, I am guessing your 'loadingStrip_viewportEnter' event is triggered prior to search()
(which is triggered from searchButton's click ?)
If that's the case, queryResults is still undefined.
It is similar to executing the following :- which will error out with -> Cannot read property 'toUpperCase' of undefined
let testStr;
console.log(testStr.toUpperCase());
For reference, in case anyone who can help sees this, I have done some testing and it appears that I am getting a 'Cannot read property 'next' of undefined' which relates to the following line:
const nextResults = await queryResults.next();
As far as I can see queryResults is defined so struggling to see why this error is occuring.
If anyone can help or point me in the right direction, it would be appreciated :)
Thanks