Change elements 'itemdata.index' from a dropdown ?

Hi everyone.
I am trying to change the contents of a non connected text element in a repeater with data from a ‘field’ that I want to be able to change depending of the value of dropdown .
I have never coded before so any help will be appreciated . This is where i am so far:

//////////////////////////////////////////////////////////////////////////
//pic the days field (str) based on number of #dropdown5//
///////////////////////////////////////////////////////////////////////////

export function button4_click() {
search();
}

function search() {
wixData.query(“days”)
.eq(“int”, $w(“#dropdown5”).value)
.find()
.then( (results) => {

let items = results.items;
let days = items[0].str;

console.log(days); 

/////////////////////////// Ok till here ///////////////////
$w(‘#repeater1’).onItemReady( ($item, itemData, index) => {

$item(“#text51”).text = itemData.days;

console.log();

});

});      
 } 

I want to use the ‘days’ variable from " let days = items[0].str; "
witch is a string ‘one’ ‘two’ ‘three’ …
and use it on " $item(“#text51”).text = itemData. days ;“.
If i put ‘two’ for example " $item(”#text51").text = itemData.two;" every thing works ok
but i cant use the variable ‘days’.
If anyone can point me in the right direction that would be great .
Thank you

Hi @flisvosrent ,

The reason it was OK until the onItemReady() is because onItemReady() is an event handler for the Repeater that gets called automatically when the Repeater is creating the Repeater items. As state in the $w.Repeater.onItemReady() API documentation: Sets the function that runs when a new repeated item is created.

Further, input components (e.g. Dropdown) cannot be added to a Repeater item, only display components.

We appreciate your interest in really getting the most out of Wix Code and how much you want to learn. You will need to familiarize yourself with basic coding concepts to accomplish what you want. There are a wealth of Javascript coding sites which will help you learn Javascript from basic to advanced - Javascript.info is a good one. The Wix Code Resources page provides tutorials, examples, and articles on getting the most out of Wix Code. We are happy to get you pointed in the right direction, but you’ll need to take it from there. As questions or difficulties arise, we are here to help.

Have fun,

Yisrael

Hi Yisrael,
Thank you for taking a look at the mess I am in :slight_smile:
Like I said I am new to coding but generally a fast learner.
Maybe if I explain better you can help.
What I have done so far is take the input of two date-pickers from the home page subtracted the
days difference and populated a drop-down with the result.
All the data from the homepage is moved to the page in question and populates another set of date-pickers and another drop-down (not in the repeater).
The repeater is connected to a “cars” database and shows a list of cars (rentals),and there is a text element (in the repeater) that i want to display the price of the amount of days that is in the drop-down.
The drop-down contains a number, and in the database i cant use a number for a field id,
so i made another database "days"with a number field “int” and a text field “str”.
Now when I query the database for number “1” I get “one” and so on,witch are the data-field ID’s of the prices (one two three…twentyone) of my cars database.
That’s why i want to insert the value of the query to the $w(‘#repeater1’).onItemReady every time the value of the drop-down changes.

$w(‘#repeater1’).onItemReady( ($item, itemData, index) => {

$item(“#text51”).text = itemData. two ; <—This two as is displays on “#text51” the price of 2days. If I try to use a variable instead of directly typing in “two” i get errors.
Is there a way around this? I have been reading almost all the posts for something relevant for days
but looks like i hit a dead end. Am I going at this the wrong way?
Her is the code of the whole page so you get a better idea of what is going on.Most of it is inspired from posts you made helping others :slight_smile:

// For full API documentation, including code examples, visit Velo API Reference - Wix.com

//////////////////////////////////////////
//Set minimun Date for second datepicker//
//////////////////////////////////////////
export function datePicker1_change(event, $w) {

let date1 = $w(“#datePicker1”).value;
$w(“#datePicker2”).minDate = date1
$w(“#datePicker2”).value = date1
console.log($w(“#datePicker1”).value);
}

//////////////////////////////////////
// display date2 - date1 difference //
//////////////////////////////////////
export function datePicker2_change(event, $w) {

let date1 = $w(“#datePicker1”).value;
let date2 = $w(“#datePicker2”).value;
let diff = (date_diff_indays(date1, date2)) ;

$w(“#dropdown5”).value = diff ;
// console.log(date_diff_indays(date1, date2));
}

//////////////////////////////////////////
//datepicker1 - datepicker2 calculations//
//////////////////////////////////////////
export function date_diff_indays(date1, date2) {
let dt1 = new Date(date1);
let dt2 = new Date(date2);
return Math.floor((Date.UTC(dt2.getFullYear(), dt2.getMonth(), dt2.getDate()) - Date.UTC(dt1.getFullYear(), dt1.getMonth(), dt1.getDate()) ) /(1000 * 60 * 60 * 24));
}

//////////////////////////////////////
//populate setings from preveus page//
//////////////////////////////////////
import {local} from ‘wix-storage’;
import wixData from ‘wix-data’;

$w.onReady( function () {
var date1new = new Date(local.getItem(“date1old”))
var date2new = new Date(local.getItem(“date2old”))
var sameWord = local.getItem(“searchWord”);

$w("#datePicker1").value = date1new; 
$w("#datePicker2").value = date2new; 
$w("#dropdown5").value = sameWord; 

$w(‘#dataset1’).onReady( function () {

    search(); 

}); 

console.log( date1new);
console.log( sameWord );
} );
//////////////////////////////////////////////////////////
//pic the days field (str) based on number of #dropdown5//
//////////////////////////////////////////////////////////

export function button4_click() {
search();
}

function search() {
wixData.query(“days”)
.eq(“int”, $w(“#dropdown5”).value)
.find()
.then( (results) => {

let items = results.items;
let days = items[0].str;

console.log(days); 

/////////////////////////// Ok till here ///////////////////
$w(‘#repeater1’).onItemReady( ($item, itemData, index) => {

$item(“#text51”).text = itemData.two;

console.log();

});

});      
 } 

Thank you
Aris

To set the Repeater to the results of a query, you should use the .data property of the Repeater . Something like this:

let items = results.items; 
$w("#repeater1").data = items;

The Repeater.onItemReady() function, which should be set in the page’s onReady() function, is an event handler, which is called when the Repeater items are created - that is, after the repeater’s data property is set. The page’s onReady() function with the the Repeater’s onItemReady() function would look something like this:

$w.onReady(function () {
   $w('#repeater1').onItemReady(($item, itemData, index) => {
       $item("#text51").text = itemData.two;
   });
});

I hope this helps,

Yisrael

I think i am not being understood .
What I want to know is how can the text element #text51 ,that is in the repeater ,connect to a different “price” field from the database every time the number of “days” change?
Normally everything is pre connected and show predetermined fields of the database after a query.
The way i am going at it now is :let the dynamic page load with the pre connected elements .
After connect ,if that is the right way to say it, the text element #text51 with the appropriate field that shows the appropriate info (price).
So the question is : can the same element in a repeater “connect to” or “show” a different item field every time a query is made?
If i am confusing you i am sorry.
English is not my native language and more importantly i am not a coder!!.

I think with data hooks it can be done ,but that involves a lot more reading !!
It is vary confusing at the moment.
Is there a article somewhere that explains things in more detail for newbies like me?
Thanks