Site: cosworthvega.com
Page: CVOA-Registry (dynamic page)
When searching for items matching a filter the first page works correctly, however when clicking Next Page from Pagination Widget the items displayed may or may not match the filter used.
Code:
export function runSearch(){ let colourSearch = $w("#searchColor").value; let dashSearch = $w("#searchDash").value; $w("#image21").show(); $w("#repeater1").hide(); if(colourSearch !== ""){ //Runs the colour search wixData.query('CVOA-Registry').contains('exterior_color',colourSearch) .limit(100) .ascending('dash') .find() .then(res => { let resultCount = res.totalCount; // 150 $w('#repeater1').data = res.items; let Text = String(resultCount); let found = resultCount; $w("#image21").hide(); $w("#repeater1").show(); $w('#text100').text = Text + " Cars Found"; $w("#text100").show(); if (found === 0) { $w("#registerCV").show(); } }) } else if(dashSearch !== ""){ //Runs the dash # search wixData.query('CVOA-Registry').eq('dash', dashSearch) .limit(5) .find() .then(res => { let resultCount = res.totalCount; // 150 $w('#repeater1').data = res.items; let Text = String(resultCount); $w("#image21").hide(); $w("#repeater1").show(); let found = resultCount; // console.log(found); $w('#text100').text = Text + " Cars Found"; $w("#text100").show(); if (found === 0) { $w("#registerCV").show(); } }) ====
For example if I search for cars with exterior color='orange' and there were 20 cars in the database and display limit set to 15. After 1st page of repeater shows 15 cars and I click on the Next page (">"), it will display the very next car in the database regardless of the color.
In the code above you can see that I temporarily set the limit to 100 to get around the problem.
F Y I - This Procedure will NOT work to solve the stated problem. However, I have resolved the issue and my page now works as expected. See the following forum post:
https://www.wix.com/corvid/forum/community-discussion/load-more-button-for-the-filtered-data
FWIW. At runtime I see the following in the developer console. Does anyone know how to troubleshoot the case of this and does it have anything to do with my code additions trying to implement this?
For the LINK FILED required: I used this: should I have included the trailing /
I had to rethink this. Since my page by default lists all the items in the repeater, the pagination bar made sense. But if the user enters a search value I could use buttons instead.
Therefore I have re-coded to include the API getNextDynamicPage, getPreviousDynamicPage as event functions when the buttons are clicked. In the Search function pagination bar is hidden and the Previouos/Next Buttons are un-hidden. No errors, but the Buttons functions do not work?
I was not sure what the Item URL was .. I looked at page settings and used that? See the screen shot below.
Here is the complete code. Works either way (all items paginated) or search colors but the NEXT button does nothing? No errors in developer console.
HERE IS THE COMPLETE CODE: ( I have removed functions not relevant to this issue )
import wixData from 'wix-data'; import wixWindow from 'wix-window'; import wixLocation from 'wix-location'; import wixUsers from 'wix-users'; import { session } from 'wix-storage'; import {local} from 'wix-storage'; $w.onReady(function () { // NOW CONTAINS CODE FOR GETTING DYNAMIC URLS preLoad(); $w("#image21").show(); let search = ''; let saved_dash = $w('#regDash'); session.setItem("#dash#", saved_dash); $w("#registerCV").hide(); $w("#text100").hide() ; $w("#ripImg").hide(); $w("#previousPage").hide(); $w("#nextPage").hide(); const linkField = "CVOA-Registry"; // replace this value $w("#dynamicDataset").onReady(() => { const numberOfItems = $w("#dynamicDataset").getTotalCount(); console.log("Found : " + numberOFItems // WORKS $w("#dynamicDataset").getItems(0, numberOfItems) .then( (result) => { const dynamicPageURLs = result.items.map(item => item[linkField]); local.setItem('dynamicPageURLs', dynamicPageURLs); } ) .catch( (err) => { console.log(err.code, err.message); } ); } ); }); export function repeater1_itemReady($w, itemData, index) { let itemEmail = itemData.email; let itemDash = itemData.dash; let itemSeq = 1; let rip = itemData.present_condition; wixData.query("CVOA_Members") .eq("email", itemEmail) .find() .then((results) => { let firstItem = results.items[0]; //see item below let firstname = firstItem.fname; let surname = firstItem.lname; let iState = firstItem.state; let iCity = firstItem.city; let phone = firstItem.phone; $w("#text87").text = firstname + " " + surname; $w("#text99").text = iCity + ", " + iState; $w("#text91").text = phone; $w("#condition").hide() if (rip === 'RIP') { $w("#ripImg").show() } else { $w("#ripImg").hide() } }) .catch((err) => { let errorMsg = err; }); $w("#repeater1").show(); //JDS } export function dynamicDataset_ready() { } export function runSearch() { // NOW CONTAINS CODE FOR PREV/NEXT let colourSearch = $w("#searchColor").value; let dashSearch = $w("#searchDash").value; $w("#pagination1").hide(); $w("#previousPage").show(); $w("#nextPage").show(); $w("#image21").show(); $w("#repeater1").hide(); if (local.getItem('#dynamicDataset')) { // BUTTONS DO GET ENABLED... const dynamicPageURLs = local.getItem('#dynamicDataset').split(','); const currentPage = '/' + wixLocation.prefix + '/' + wixLocation.path.join('/'); const currentPageIndex = dynamicPageURLs.indexOf(currentPage); if (currentPageIndex > 0) { $w("#previousPage").link = dynamicPageURLs[currentPageIndex - 1]; $w("#previousPage").enable(); } if (currentPageIndex < dynamicPageURLs.length - 1) { $w("#nextPage").link = dynamicPageURLs[currentPageIndex + 1]; $w("#nextPage").enable(); } } if (colourSearch !== "") { //Runs the colour search wixData.query('CVOA-Registry').contains('exterior_color', colourSearch) .limit(10) .ascending('dash') .find() .then(res => { let resultCount = res.totalCount; // 150 $w('#repeater1').data = res.items; let Text = String(resultCount); let found = resultCount; $w("#image21").hide(); $w("#repeater1").show(); $w('#text100').text = Text + " Cars Found"; $w("#text100").show(); if (found === 0) { $w("#registerCV").show(); } }) } else if (dashSearch !== "") { //Runs the dash # search wixData.query('CVOA-Registry').eq('dash', dashSearch) .limit(5) .find() .then(res => { let resultCount = res.totalCount; // 150 $w('#repeater1').data = res.items; let Text = String(resultCount); $w("#image21").hide(); $w("#repeater1").show(); let found = resultCount; // console.log(found); $w('#text100').text = Text + " Cars Found"; $w("#text100").show(); if (found === 0) { $w("#registerCV").show(); } }) } else { // resets the grid to no search because no search was entered. wixData.query('CVOA-Registry') .ascending('dash') .limit(10) .find() .then(res => { $w('#repeater1').data = res.items; $w("#image21").hide(); $w("#text100").hide(); $w("#repeater1").show(); $w("#pagination1").show(); $w("#previousPage").hide(); $w("#nextPage").hide(); }) } } export function searchButton_click_1(event) { runSearch() } export function searchDash_change(event) { $w("#searchColor").value = ""; } export function searchColor_change(event) { $w("#searchDash").value = ""; } export function previousPage_click(event) { // DOES NOTHING but logs.. clicked msg
console.log("Previous Clicked"); $w("#dynamicDataset").getPreviousDynamicPage() .then( (prev) => { if(prev){ wixLocation.to(prev);
$w("#registerCV").show(); } } ); } export function nextPage_click(event) { //DOES NOTHING but logs.. clicked msg
console.log("Next Clicked"); $w("#dynamicDataset").getNextDynamicPage() .then( (next) => { if(next){ wixLocation.to(next);
$w("#registerCV").show(); } } ); }
---------------------
Close but no cigar.... please help.
JD
Yes, but it seems to be geared towards using a BUTTON. One dataset where I used this has 2500 records so I used a Pagination instead of a button. I see no way to differentiate between the First page, Previous page, , user input page# , Next page, or Last page, as you would need an Event to handle each choice in the pagination bar. Based on output of one of these you might want to skip to the end and view backwards, or skip a bunch of pages, then to next, next.etc..
Maybe I missed something...
Have you read the Wix Tutorial for it already?
https://support.wix.com/en/article/corvid-tutorial-creating-previous-and-next-buttons-for-a-dynamic-item-page-with-code
Previous forum post about it.
https://www.wix.com/corvid/forum/community-discussion/item-page-prev-next-buttons-repeaters
Plus, have a read of Yisrael's example too as that does back, page one, page two etc.
https://www.grampsworkbench.com/Examples/Back-Button