Search function showing 1st item in collection only

[mattja19]

Hi all,

Not sure if this is one for this forum or not but I am pretty desperate so thought I would ask the question!

Basically, I have a search function on my Home Page which enables the user to obtain results based on info in up to 8 fields of a collection. The results are shown in one of 5 pages (depending on which section the user decides to search in) using a repeater on each page and all has been working fantastically well since I got this up and running many months ago. It was working well earlier in the week when I was ‘showcasing’ what it offers to someone but then yesterday I noticed it was not providing the correct results - in all cases it appears to be simply showing the very first item from the relevant dataset collection.

I’m finding this ultra strange as I have done no maintenance to any of these pages since I got them up and running and have not touched any of the coding I have for them. I’ve done the following checks to try and ascertain where the problem lies:

1. I ran a test search earlier knowing that there are 10 results for the search I was doing and the result page showed up 10 results but all of them showing the data for the first item in the dataset.

2. Checked the dev console for any errors - none showing!

3. Added a console log to my code on the results page to check what results were being obtained using

console.log(`queryResults is ${JSON.stringify(queryResults)}`); 

and found that it was returning all of the correct results but just not displaying them in the repeater, instead choosing to show the first item in the dataset collection over and over again!

4. Because the code seems to be working correctly, I have tried removing the connections between the dataset and the repeater and then re-connecting them. I also deleted the dataset altogether from the page before reinstating it and re-connecting it to the repeater - neither of these changed the outcome!

The only other thing I have in my mind to try on top of the above is to literally rebuild the page in question but having to rebuild pages whenever there is a bug just doesn’t seem like an efficient way of website building to me.

I’m no expert on coding, but based on the tests I have conducted, I am pretty sure this is not a code issue but I thought I would post here in the hope that someone may have experienced something similar or can spot what the issue may be. It’s a really important feature of my site and one that is a bit unique in the market I am in and so without it, it may be costing me visitors

If anyone can offer any assistance as to why this is happening it would be appreciated

[anon72313111]

Hi there,

In order to help, we need to see your code first, a link to the page(s) you mentioned will be much better.

[mattja19]

Hi Ahmad, thanks for your response.
The details you have requested are below with the coding first.
On the Home Page where the search is conducted from, I have the following:

import { local } from 'wix-storage';

import wixLocation from 'wix-location';

import wixData from 'wix-data';

$w.onReady(function () {

});

export function dropdown1_change_1(event, $w) {
    searchenable();
    if (event.target.value === "Locomotives") {
        $w('#iClass').enable();
        $w('#iNumber').enable();
        $w('#iPrevNumber').enable();
        $w('#iOperator').enable();
        $w('#iLivery').enable();
        $w('#iName').enable();
        $w('#iDepot').enable();
        $w('#iStatus').enable();
        $w('#iFormation').collapse();
        $w('#searchButton').show();

    } else if (event.target.value === "Diesel Multiple Units") {
        $w('#iClass').enable();
        $w('#iNumber').enable();
        $w('#iPrevNumber').enable();
        $w('#iOperator').enable();
        $w('#iLivery').enable();
        $w('#iName').enable();
        $w('#iDepot').enable();
        $w('#iStatus').enable();
        $w('#iFormation').expand();
        $w('#iFormation').enable();
        $w('#searchButton').show();

        } else if (event.target.value === "Electric Multiple Units") {
        $w('#iClass').enable();
        $w('#iNumber').enable();
        $w('#iPrevNumber').enable();
        $w('#iOperator').enable();
        $w('#iLivery').enable();
        $w('#iName').enable();
        $w('#iDepot').enable();
        $w('#iStatus').enable();
        $w('#iFormation').expand();
        $w('#iFormation').enable();
        $w('#searchButton').show();

        } else if (event.target.value === "Bi Mode Units") {
        $w('#iClass').enable();
        $w('#iNumber').enable();
        $w('#iPrevNumber').enable();
        $w('#iOperator').enable();
        $w('#iLivery').enable();
        $w('#iName').enable();
        $w('#iDepot').enable();
        $w('#iStatus').enable();
        $w('#iFormation').expand();
        $w('#iFormation').enable();
        $w('#searchButton').show();

    } else if (event.target.value === "All Traction") {
        $w('#iClass').enable();
        $w('#iNumber').enable();
        $w('#iPrevNumber').enable();
        $w('#iOperator').enable();
        $w('#iLivery').enable();
        $w('#iName').enable();
        $w('#iDepot').enable();
        $w('#iStatus').enable();
        $w('#iFormation').expand();
        $w('#iFormation').enable();
        $w('#searchButton').show();

    }
}

function searchenable() {}

function runSearch(){
     let word = $w('#iClass').value
    local.setItem("searchWord", word);

    let word4 = $w('#iNumber').value
    local.setItem("searchWord2", word4)

    let word3 = $w('#iPrevNumber').value
    local.setItem("searchWord3", word3)

    let word2 = $w('#iOperator').value
    local.setItem("searchWord4", word2)

    let word5 = $w('#iLivery').value
    local.setItem("searchWord5", word5)

    let word6 = $w('#iName').value
    local.setItem("searchWord6", word6)

    let word7 = $w('#iDepot').value
    local.setItem("searchWord7", word7)

    let word8 = $w('#iStatus').value
    local.setItem("searchWord8", word8)

    let word9 = $w('#iFormation').value
    local.setItem("searchWord9", word9)

    

    let option = $w('#dropdown1').value;
    if (option === "Locomotives") {

        wixLocation.to('/locomotive-results');
    }

    if (option === "Diesel Multiple Units") {

        wixLocation.to('/dmu-results');

    }

    if (option === "Electric Multiple Units") {

        wixLocation.to('/emu-results');

    }

    if (option === "Bi Mode Units") {

        wixLocation.to('/bi-mode-units-results');

    }

    if (option === "All Traction") {

        wixLocation.to('/all-traction-results');

    }
}

$w.onReady(function () {
    $w('#iClass, #iNumber, #iPrevNumber, #iOperator, #iLivery, #iName, #iDepot, #iStatus, #iFormation').onKeyPress( (event) => {
        if(event.key === "Enter"){
            runSearch();
        }    
    })
    
});

export function searchButton_click(event) {

    runSearch();
    
}

The on the ‘locomotive results’ page (I will just use this for now as the other result pages are the same, just providing different results from different collections) I have the following:

import { local } from "wix-storage";
import wixData from "wix-data";
import wixLocation from "wix-location";
import {session} from "wix-storage";

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);
}

$w.onReady(async 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;

scrapped ();
showButton();
  $w("#Shunters").onReady(function () {
    search();
  });
});


export function searchButton_click() {
  search();
}


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();
  $w("#repeater2").data = queryResults.items;
  console.log(`queryResults is ${JSON.stringify(queryResults)}`);
}


export async function loadingStrip_viewportEnter(event) {
  $w("#loadingGif").show();
  const nextResults = await queryResults.next();
  $w("#loadingGif").hide();

  queryResults = nextResults;
  const data = $w("#repeater2").data;
  $w("#repeater2").data = $w("#repeater2").data.concat(nextResults.items);
  console.log("Done loading more data");
}

function scrapped () {
$w("#repeater2").onItemReady( ($w, itemData, index) => {
    console.log(itemData.status);    // show value of forSale field in developers console
    if(itemData.status === "Scrapped") {
      $w('#scrappedStatus').show();
      $w('#finalOperatorHeader').show();
      $w('#finalOperatorText').show();
      $w('#finalLiveryHeader').show();
      $w('#finalLiveryText').show();
      $w('#finalNameHeader').show();
      $w('#finalNameText').show();
      $w('#scrappedAtHeader').show();
      $w('#scrappedAtText').show();
      $w('#scrappedDateHeader').show();
      $w('#scrappedDateText').show();
      $w('#prevNoSmallHeader').show();

      $w('#text484').hide();
      $w('#operatorText').hide();
      $w('#liveryHeader').hide();
      $w('#liveryText').hide();
      $w('#nameHeader').hide();
      $w('#nameText').hide();
      $w('#depotHeader').hide();
      $w('#depotText').hide();
      $w('#statusHeader').hide();
      $w('#statusText').hide();
      $w('#prevNoHeader').hide();

    }
   
});
}

function showButton () {
  
  $w('#repeater2').onItemReady(myItemReady);

  function myItemReady($w, itemData, index) {
    if (itemData.logs) {
      $w('#button12').show();
    }
  }
}

export function button12_click_1(event) {
     

 let $item =  $w.at(event.context);
 let currentItem = $item('#Shunters').getCurrentItem();
 let dynamicPageID = `${currentItem.number}`
 let collectionID = `${currentItem.title}`
 
   console.log('https://www.ukraillog.co.uk/'+collectionID+'/'+dynamicPageID);
 wixLocation.to('https://www.ukraillog.co.uk/'+collectionID+'/'+dynamicPageID+"?from=locomotive-results");
 }

The relevant pages are accessible via www.ukraillog.co.uk
To see the search result page, head to the bottom of the Home Page where the search function is. Using the dropdown select ‘locomotives’ and then type “88” in the Class field (the first search option). This is the search I have been using to test the current situation and there are 10 results for this search which should show results for numbers 88001-88010 but instead show number D2953 repeated 10 times.

If you need any further info then please let me know

Thanks

[anon72313111]

Hey @mattja19

After inspecting your site, I have a few comments/suggestions.
I also recommend you to read this article .

A) Reduce the code footprint

Instead of storing each value in the storage individually like this:

local.setItem('word1', value1);
local.setItem('word2', value3);
local.setItem('word3', value3);

You should store them like this:

const item = {
    word1: value1,
    word2: value2,
    word3: value3
}

// Convert the object to string;
const stringObject = JSON.stringify(item);

local.setItem('searchValues', stringObject);

And get the values like this:

const cache = local.getItem('searchValues');

// Parse the string into an object
if (typeof cache === 'string') {
    const item = JSON.parse(cache);
    
    // Then acces the values in the item;
    const firstWord = item.word1;
    const secondWord = = item.word2;
}

B) Combining similar methods into one call

Instead of performing promises for each element individually, you can do it in one line of code.

// Instead of ..
$w('#scrappedStatus').show();
$w('#finalOperatorHeader').show();

$w('#text484').hide();
$w('#operatorText').hide();

// You can do it like this
$w('#scrappedStatus, #finalOperatorHeader').show();
$w('#text484, #operatorText').hide();

By doing so, you just shrank 21 lines of code into just 2 lines.

C) Dynamic Events Handlers

Beware of using multiple event handlers for the same component as the newest one replaces the old one.

$w('#btn').onClick(() => {
    console.log(A);
    
    $w('#btn').onClick(() => console.log(B));
})

Clicking on the above button will print “A” to the console in the first time, but if you clicked the button again, it’ll print “B”, not “A”, that’s because the function on the onClick event was replaced.

In your code, you’re defining an onItemReady() function for the repeater and bind the data of each item to their intended elements, but just before assigning the data from your query to the repeater’s data property, you replaced it with another function that will show a button, therefore, when the data is assigned to the repeater, the default values that you set in the editor when designing the repeater were used instead of the actual values, that’s because the code that binds the data to these elements got replaced.

D) Query Promises

The function that you use to fetch the data can be written better, you can use one query instead.

function fetchData() {
    return query.limit(1000).find().then(async x => {
        let results = x.items;
        
        if (x.hasNext()) {
            const temp = await x.next();
            results = results.concat(temp);
        }
        
        return results;
    })
}

Also, looking at your site, you have 1912 items in your database, and you’re running two queries, the first one is returning 12 wrong items out of 1912, and the second one is returning the correct 10 items but what’s going on here?

E) The onReady functions

The $w.onReady() function must be used only once per page, you should not use multiple functions of it, read my article to learn more.

---

Sorry, I couldn’t inspect your site further as it’s time-consuming, it’s been nearly 3 hours, if you need professional help, feel free to reach out.

Hope this helps~!
Ahmad

[mattja19]

Hi Ahmad,

The first thing I have to say is WOW, the efforts you have gone to here is truly remarkable and I am very appreciative of your time in doing so.

In terms of my current issue, I believe this to be a widespread issue within Wix somewhere and so I shall hold fire changing anything until this issue is resolved, purely because I wouldn’t be able to test any changes I make to my code because there is clearly something gone wrong with the filtering on lots of people’s websites currently. Once this issue is resolved, I will most definitely work through all of these points you have made to tidy up my code. Being a novice at this, I am always looking to learn new ways of writing code and you have certainly given me plenty to learn here.

Once again, thanks so much for your efforts. I shall endeavour to return to this thread once I have implemented these changes to update you

[anon72313111]

@mattja19 Thank you for your kind words.

You’re free to wait for Wix Support to inpect the site for you, to make things easier, make sure to include this thread and my answer along with your support ticket so they can save time instead of doing the same stuff that I’ve done.

However, as I mentioned ealier here, and on other posts, the problem is most likely caused (in your specific use case) by replacing the onItemReady() function of the repeater, and writing the code in a bad way, your search functions return 2 different results on the search page which means that the first one is invoked before populating the input fields, which explains why you got 1912 matching results, instead of the 12 results from the second search that’s invoked after the search input fields are populated.

From what I saw in all the threads complaining about datasets, non of them have their code written in the write way, and almost, if not all of them use datasets with wix-data to poulate the repeaters, I’m %100 sure all the issues will go once all the issues that I pointed at are fixed.

Regards.

[jayson-brandon-marti]

Hey, @mattja19 I was able to look at your site and followed the steps you have posted on this thread, but couldn’t recreate the issue you described. Can you confirm if you are still experiencing this issue and if you have submitted a ticket to Wix support can you provide the ticket number for our team to further review?

[mattja19]

Hi Jays, apologies this issue has resolved itself.
I didn’t change anything and it returned to normal after around 48-72 hours so I assume that whatever gremlin was in the system had been rooted out by the Velo team.

Thanks