Visual Learner - coding a repeater

jfriede · February 1, 2021, 6:44pm

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!

J.D · February 1, 2021, 7:17pm

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)

jfriede · February 1, 2021, 7:20pm

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

volkaertskristof · February 1, 2021, 7:37pm

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.

J.D · February 1, 2021, 7:52pm

@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()
    }
}

J.D · February 1, 2021, 7:55pm

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

jfriede · February 1, 2021, 8:11pm

@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!

J.D · February 1, 2021, 8:17pm

@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.

jfriede · February 1, 2021, 8:39pm

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

jfriede · February 2, 2021, 3:22pm

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!

volkaertskristof · February 2, 2021, 3:34pm

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.

jfriede · February 2, 2021, 4:40pm

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

CODE-NINJA · February 2, 2021, 6:26pm

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 · February 2, 2021, 6:30pm

CODE-NINJA · February 3, 2021, 1:32am

@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?

You can use the predefined DATABASE → “SportSheduler”
You can see, which fields are already activated and ready to use.
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

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

CODE-NINJA · February 3, 2021, 6:19am

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

jfriede · February 3, 2021, 1:19pm

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

CODE-NINJA · February 3, 2021, 10:14pm

You are welcome.

Topic		Replies	Views
Change elements 'itemdata.index' from a dropdown ? Ask the community code , question	5	468	September 3, 2018
Search Box for data collection connected to Repeater Ask the community code , question	1	166	October 17, 2018
Repeater and drop drop not working or displaying Ask the community code , question	6	360	March 20, 2018
Help with Code please (Repeaters filter) Ask the community code , question	2	375	April 5, 2018
custom reapeter #Rawabi Ask the community code , question	1	112	March 1, 2018

Visual Learner - coding a repeater

Related topics