Visual Learner - coding a repeater

This is the site I’m working on.

https://www.deafhoosiers.com/ms-athletics

This is the code and repeater I’m trying to connect.

I’ve been with WIX for three years and I’ve run through so many tutorials and documentations with Velo and YouTube (sometimes captions isn’t available) and I could never get the coding down. I’m trying to classify the sports schedule per sport. The value doesn’t appear to be correct. Pointers or directions appreciated. Thanks!

First of all the element Id in your code is wrong (it should not contain spaces)
You should use the element ID not the database value.
Second, in order to extract a value from a repeater you have to do it differently.
If you post the code itself and not a screenshot, I may be able to show you how (I don’t want to type it)

1 Like

That’s what I thought. Spaces. Thanks!

import wixData from 'wix-data';



export function boysbball56button_click(event) {
 let vis = $w("#boysbball56").collapsed
 if (vis){
        $w("#boysbball56").expand()
        wixData.query("ms_sports_schedule")
          .eq("Sports",$w("#Boys Basketball 5-6").value)
    } else {
        $w("#boysbball56").collapse()
    }
}

Hi @jfriede
Where you say:

.eq("Sports",$w("#Boys Basketball 5-6").value)

Is where you have to change it to:

.eq("Sports",$w("#boysbball56").value)

The element ID can’t have any spaces it doesn’t allow it.

Also you are searching for Sports.
Check if Sports is also with a capital ‘S’ as Value.
when you type Sports as the name it automaticaly changes the Value to sports

Kind regards,
Kristof.

2 Likes

@jfriede if the element is in the repeater then you should do something likethis.

Let’s assume that boysbball56button is a repeater element and msSport is an input element in the repeater.
Then:

export function boysbball56button_click(event) {
 let $item = $w.at(event.context);
 const vis = $item("#boysbball56").collapsed;
 if (vis){
        $item("#boysbball56").expand();
        wixData.query("ms_sports_schedule")
          .eq("sports",$item("#msSport").value)
          .find()
          .then(res => {
          const items = res.items;
          //use the retrieved items as you wish
          })
    } else {
        $item("#boysbball56").collapse()
    }
}
1 Like

And the field key is “sports” (lower case, unlike the field label “Sports” which is not relevant to data queries).

@jonatandor35 Yeah, I’m working on it. I changed it to “title” since that’s what the field key says. I’m struggling with the value. (no spaces), renaming them and hopefully an accomplishment coming up soon. Thank you!

@jfriede You cannot change an existing filed key. Even if you changed the label to “Title”, the field key will be “sports”.
If you wish to have a field key “title” - use another column.

@jonatandor35 I didn’t change it. This is what it looks like…

I think I have it all wrong. When clicking a sport (button) to pull a specific schedule to display. There are several sports schedules in one dataset. I want to pull one sports’ schedule when clicking on the button.

I’ve tried editing last night and this morning and I’m nowhere closer. I guess I’ll have to create a database per sport. Ugh!

Thanks for helping though!

Hi JFriede,
The best way to do what you are doing is to make it dropdowns instead of buttons.
A dataset can be filtered using multiple dropdowns.
This way you can select your sport (Footbal) and the team where you need the schedule of.

Kind regards,
Kristof.

@volkaertskristof Yeah, I’m looking at it right now. Hopefully works. Thanks!

Show me the first 2 rows (header-fields + first data-row) of your database and i will show you how it could look like.

@jfriede
As promised —> here it is! —> https://www.media-junkie.com/datepicker


This is your interactive-example-slot.

Your database…


How to use this "interactive-example?

  1. You can use the predefined DATABASE → “SportSheduler”
  2. You can see, which fields are already activated and ready to use.
  3. Setup one of the 4 given DB-Presets/Slots to get your DATABASE connected.

Example…


You will have to change the PRESET/SLOT for —> “SportSheduler”

4) General-Settings:
DB -------------------------> “SportSheduler”
activated table --------> “table1”
activated repeater —> “repeater1” or “repeater2”
max. limit ----------------> 1000

5) DropDown-Fields:
Fill out the fields which are given in your interactive-example (day,year,date, and so on).

I am sure you will understand how to use this :wink:

And here your CODE, for your own purposes…

$w.onReady(function () {
    $w('#dataset1').onReady(()=>{
 var day, month, date, year, sports

        $w('#btnSubmit').onClick(()=>{$w('#dataset1').save()})

        $w('#dropdown1').onChange(()=>{sports = $w('#dropdown1').value})

        $w('#timePicker1').onChange(()=>{console.log("GO2")
            $w('#input4').enable() 
            $w('#input4').value = $w('#timePicker1').value.substring(0, 5)
        })

        $w('#datePicker1').onChange(()=>{console.log("GO1")
 //Get day .....-----------------------------------------------------------------------------------------------------
 if($w('#datePicker1').value.getDay()===1)   {day = "Monday";    console.log(day);   $w('#input1').value = day;}
 if($w('#datePicker1').value.getDay()===2)   {day = "Tuesday";   console.log(day);   $w('#input1').value = day;}
 if($w('#datePicker1').value.getDay()===3)   {day = "Wensday";   console.log(day);   $w('#input1').value = day;}
 if($w('#datePicker1').value.getDay()===4)   {day = "Thursday";  console.log(day);   $w('#input1').value = day;}
 if($w('#datePicker1').value.getDay()===5)   {day = "Friday";    console.log(day);   $w('#input1').value = day;}
 if($w('#datePicker1').value.getDay()===6)   {day = "Saturday";  console.log(day);   $w('#input1').value = day;}
 if($w('#datePicker1').value.getDay()===7)   {day = "Sunday";    console.log(day);   $w('#input1').value = day;}
 
            date = $w('#datePicker1').value.getDate();      $w('#input2').value = date
            year = $w('#datePicker1').value.getFullYear();  $w('#input5').value = year

            $w('#input3').value = $w('#datePicker1').value.getDate().toLocaleString()
            $w('#input6').value = $w('#datePicker1').value.toDateString()

 //Get month ....----------------------------------------------------------------------------------------------------
 if($w('#datePicker1').value.getMonth()===0)     {month = "January";     console.log(month);     $w('#input2').value = month;}
 if($w('#datePicker1').value.getMonth()===1)     {month = "February";    console.log(month);     $w('#input2').value = month;}
 if($w('#datePicker1').value.getMonth()===2)     {month = "March";       console.log(month);     $w('#input2').value = month;}
 if($w('#datePicker1').value.getMonth()===3)     {month = "April";       console.log(month);     $w('#input2').value = month;}
 if($w('#datePicker1').value.getMonth()===4)     {month = "May";         console.log(month);     $w('#input2').value = month;}
 if($w('#datePicker1').value.getMonth()===5)     {month = "Juni";        console.log(month);     $w('#input2').value = month;}
 if($w('#datePicker1').value.getMonth()===6)     {month = "July";        console.log(month);     $w('#input2').value = month;}
 if($w('#datePicker1').value.getMonth()===7)     {month = "August";      console.log(month);     $w('#input2').value = month;}
 if($w('#datePicker1').value.getMonth()===8)     {month = "September";   console.log(month);     $w('#input2').value = month;}
 if($w('#datePicker1').value.getMonth()===9)     {month = "October";     console.log(month);     $w('#input2').value = month;}
 if($w('#datePicker1').value.getMonth()===10)    {month = "November";    console.log(month);     $w('#input2').value = month;}
 if($w('#datePicker1').value.getMonth()===11)    {month = "December";    console.log(month);     $w('#input2').value = month;}
 
            $w('#input1').enable() 
            $w('#input2').enable() 
            $w('#input3').enable() 
            $w('#input5').enable() 
            $w('#input6').enable() 

            $w('#dataset1').onBeforeSave(()=>{
                $w("#dataset1").setFieldValues({
 "title":    "",
 "day":      day,
 "date":     date,
 "month":    month,
 "year":     year,
 "sports":   sports
                });
            });
        }); 
    });
});
2 Likes

By the way…

yes the shown code above, can be upgraded and compressed by using some loops, but for beginners it is recommended not to do this → (code is better readbale and understandable :wink:

2 Likes

@russian-dima CHAMP! Thank you so much!! Hope I get this up today!!

You are welcome. :wink: