Link Repeater Text to URL

[heple005]

Hello Forum,

I have been searching for a way to connect a text box in my repeater to the associated URL link within my dataset. I found a couple of previous posts on this topic, but none of the example codes/solutions have worked for me thus far.

Within the repeater “#repeater1”, I have text box “#text13” that I wish to activate an on-click event. When clicked, I want this to direct the user to the associated URL in a new tab. The URL is contained in the repeater’s associated dataset with its column labeled “website.” The “website” column is defined to contain URLs (not text, boolean, etc.).

I have used the following code:

import wixLocation from [‘wix-location’](‘wix-location’;

$w.onReady(function () {
$w(‘#repeater1’).onItemReady((selector, itemData, index) => {
$w(‘#text13’).onClick(() => {
wixLocation.to(itemData.website);
});
});
}) [;](‘wix-location’;

$w.onReady(function () {
$w(‘#repeater1’).onItemReady((selector, itemData, index) => {
$w(‘#text13’).onClick(() => {
wixLocation.to(itemData.website);
});
});
})

[$w.onReady(](‘wix-location’;

$w.onReady(function () {
$w(‘#repeater1’).onItemReady((selector, itemData, index) => {
$w(‘#text13’).onClick(() => {
wixLocation.to(itemData.website);
});
});
}) [function](‘wix-location’;

$w.onReady(function () {
$w(‘#repeater1’).onItemReady((selector, itemData, index) => {
$w(‘#text13’).onClick(() => {
wixLocation.to(itemData.website);
});
});
}) [ () { ](‘wix-location’;

$w.onReady(function () {
$w(‘#repeater1’).onItemReady((selector, itemData, index) => {
$w(‘#text13’).onClick(() => {
wixLocation.to(itemData.website);
});
});
})
[ $w(](‘wix-location’;

$w.onReady(function () {
$w(‘#repeater1’).onItemReady((selector, itemData, index) => {
$w(‘#text13’).onClick(() => {
wixLocation.to(itemData.website);
});
});
}) [‘#repeater1’](‘wix-location’;

$w.onReady(function () {
$w(‘#repeater1’).onItemReady((selector, itemData, index) => {
$w(‘#text13’).onClick(() => {
wixLocation.to(itemData.website);
});
});
}) [).onItemReady((selector, itemData, index) => {](‘wix-location’;

$w.onReady(function () {
$w(‘#repeater1’).onItemReady((selector, itemData, index) => {
$w(‘#text13’).onClick(() => {
wixLocation.to(itemData.website);
});
});
})
[ $w(](‘wix-location’;

$w.onReady(function () {
$w(‘#repeater1’).onItemReady((selector, itemData, index) => {
$w(‘#text13’).onClick(() => {
wixLocation.to(itemData.website);
});
});
}) [‘#text13’](‘wix-location’;

$w.onReady(function () {
$w(‘#repeater1’).onItemReady((selector, itemData, index) => {
$w(‘#text13’).onClick(() => {
wixLocation.to(itemData.website);
});
});
}) [).onClick(() => {](‘wix-location’;

$w.onReady(function () {
$w(‘#repeater1’).onItemReady((selector, itemData, index) => {
$w(‘#text13’).onClick(() => {
wixLocation.to(itemData.website);
});
});
})
[ wixLocation.to(itemData.website);](‘wix-location’;

$w.onReady(function () {
$w(‘#repeater1’).onItemReady((selector, itemData, index) => {
$w(‘#text13’).onClick(() => {
wixLocation.to(itemData.website);
});
});
})
[ });](‘wix-location’;

$w.onReady(function () {
$w(‘#repeater1’).onItemReady((selector, itemData, index) => {
$w(‘#text13’).onClick(() => {
wixLocation.to(itemData.website);
});
});
})
[ });](‘wix-location’;

$w.onReady(function () {
$w(‘#repeater1’).onItemReady((selector, itemData, index) => {
$w(‘#text13’).onClick(() => {
wixLocation.to(itemData.website);
});
});
})
[});](‘wix-location’;

$w.onReady(function () {
$w(‘#repeater1’).onItemReady((selector, itemData, index) => {
$w(‘#text13’).onClick(() => {
wixLocation.to(itemData.website);
});
});
})

When I play with this in preview mode, the arrow changes as I hover over the text as if I can click it as a hyperlink. However, clicking the text does not result in any event. To be sure I was not simply setting up bad links, I used the user interface to link a repeater image to the same URL column, and that works fine. The code, it seems, is not allowing me to open up the desired webpage.

I would really appreciate your help with this issue!

[CODE-NINJA]

Try this one, also take attention onto the given CONSOLE-LOGS.
Look into the CONSOLE, to see the results.

import wixLocation from 'wix-location';

$w.onReady(function () {    
    $w('#repeater1').onItemReady((item, itemData, index) =>{
       $w('#text13').onClick(() => {
            let myURL = itemData.website
            console.log(myURL)
            console.log(typeof myURL)
            wixLocation.to(myURL);  
       });
    });
}); 

myURL —> musst be a string-URL → (“https://www.google.de”) for example.

[code-queen]

Instead of

$w ( ‘#text13’ ). onClick

try

$item ( ‘#text13’ ). onClick

Or instead of text, use a button and connect it directly to the url field.

[CODE-NINJA]

Hello Queeny ,

you are right! Forgot that i am using repeater-code!

$item('#text13').onClick

Thanks for correction.

[heple005]

Hello All,

Thank you for your kind responses. I took Code Queen’s advice and changed the $w ( ‘#text13’ ).onClick to $item( ‘#text13’ ).onClick.

However, this throws the error "$item is not defined). I feel like item has already been defined at the beginning of the function for the repeater, so I’m confused as to why it’s giving the error.

This error does not occur when I have $w, however, using the console log (thanks russian-dima!) each time I click on a linked text, I see that it cycles through all of the URLs in the repeater, but does not take me to any of the addresses.

My full code (with the $item variation) is as follows:

import wixLocation from ‘wix-location’ ;

$w.onReady( function () {
$w( ‘#repeater1’ ).onItemReady((item, itemData, index) =>{
$item( ‘#text13’ ).onClick(() => {
let myURL = itemData.website
console.log(myURL)
console.log( typeof myURL)
wixLocation.to(myURL);
});
});
});

[CODE-NINJA]

Take a look at this example here.
I just implemented your function into my already existing REPEATER-EXAMPLE.
You will find the part of your code in it (working)…
https://russian-dima.wixsite.com/meinewebsite/repeater-problem

import wixLocation from 'wix-location';
import wixData from 'wix-data';

var Items, dataLength

$w.onReady(function () {
    $w("#dataset8").onReady( () => {
        $w("#repeater1").onItemReady( ($item, itemData, index) => {
            $item("#myRepeatedText").text = itemData.textField;
                $item("#BTNedit").onClick((event) => {
                console.log(itemData)
                console.log("Title / " + itemData.title)
                console.log("Message / " + itemData.comments)
            });
            $item("#text1").onClick((event) => {
 let myURL = "https://www.google.de"
                console.log(myURL)
                console.log(typeof myURL)
                wixLocation.to(myURL)
            });
        });
    });
});

[heple005]

Hello Russia-dima,

So I found one part of the problem. In my function declaration, I had “item” not “$item.” Changing this, I now have the URL being returned as a string (confirmed by the console log). However, the darn wixLocation.to(myURL) isn’t taking me to the link…hmmm. Everything else seems to be in order, so I’ll have to dig on this a bit. Any thoughts on the issue are welcome! Thanks again for all of your insight through this.

import wixLocation from ‘wix-location’ ;

$w.onReady( function () {
$w( ‘#repeater1’ ).onItemReady(($item, itemData, index) =>{
$item( ‘#text13’ ).onClick(() => {
let myURL = itemData.website
console.log(myURL)
console.log( typeof myURL)
wixLocation.to(myURL);
});
});
});

[CODE-NINJA]

Take a look onto CONSOLE, what is the RESULT for —> my URL?
Show a pic of the result for “myURL”.

If the results in console is ok, but it still do not link you, then do following…

1. check permissions
2. test in both modes (preview & live)
3. your url has to be a string → like → “https://www.google.com”
4. Still could not solve the issue? …try this…

$w.onReady(async function () {
   $w('#repeater1').onItemReady(($item, itemData, index) =>{       $item('#text13').onClick(() => {let myURL = await itemData.website            console.log(myURL)            console.log(typeof myURL)            wixLocation.to(myURL);       });    });});