Modify the URL of an embedded iframe

I am pretty sure you were referring to all of this :

Global Scope
A selector with global scope can be used to select any element that is not contained in a repeater. You can also use it to select an element that is contained in a repeater, but you need to understand what that selection means.

When you select an element contained in a repeater from the global scope and you get the value of one of the element’s properties, you receive the value of that element’s property from the repeater’s item template.

For example, here templateText is the text value of the myRepeatedText element from the repeater’s item template.

 $w.onReady( function () {
   let templateText = $w("#myRepeatedText").text;
 } );

When you select an element contained in a repeater from the global scope and you set the value of one of the element’s properties or call one of the element’s functions, the value is set or the function is called on the repeater’s item template and all repeated instances of that element.

For example, here the item template is changed so that “New Text” is the text value of the myRepeatedText element. Also, all existing repeated items have the text value of their myRepeatedText element set to “New Text”.

 $w.onReady( function () {
   $w("#myRepeatedText").text = "New Text";
 } );

And here the item template is changed so that the myRepeatedImage element is hidden. Also, all existing repeated items have their myRepeatedImage element hidden.

 $w.onReady( function () {
   $w("#myRepeatedImage").hide();
 } );

Repeated Item Scope
A selector with repeated item scope selects the instance of a repeating element in the current repeating item and its descendants. You can also use it to select non-repeating elements from the global scope. You cannot change the item template using a selector with repeated item scope.

For example, here when the myRepeatedImage element is clicked, the text value of the myRepeatedText element from the repeated item where the image was clicked is changed to “Selected”. All the other myRepeatedText elements in the other items of the repeater are not affected.

 $w.onReady( function () {
   $w("#myRepeatedImage").onClick( (event, $w) => {
     $w("#myRepeatedText").text = "Selected";
   } );
 } );

You can restrict a selector with repeated item scope to only select elements from the current repeated items and their descendants, but not elements from the global scope by adding .scoped() to the selector so the function call looks like $w.scoped(“#idToSelect”).

My comments:
The problem I am facing is this and I read the above at least 3 times and thought about what I read, but I am still drawing blank on whether I even get it correctly, I have a feeling what I WAS trying to do earlier is not possible through repeater buttons, each triggering a different url to be iframed on my lightbox. All of above sounds like changes contained within 1 “box” of 1 repeater and I get that, but for code I need to use to have each button trigger a different url on my destination lightbox, I am not sure how to proceed. the iframe is not in the repeater! I know I am sounding really dumb here to those in the know perhaps, but this is the kind of thing I usually get stuck in when it comes to properly understanding how Wix Code works or doesn’t with certain scenarios.

See I am not even eager to try it reading it, this sounds like the $w you spoke of can be manipulated per item, but within the repeater itself. Which means, onclick of my repeater button, can uniquely affect its own box within the repeater,

 $w.onReady( function () {
$w("#myRepeatedImage").onClick( (event, $w) => {      
$w("#myRepeatedText").text = "Selected";    
} );  
} ); 

so let me try it, mixing, hang with me, I am self teaching here lol, dont judge my outloud methods!

import wixWindow from 'wix-window';
export function button47_click(event, $w) { 
let testdata={'targetURL':"http://myexternalurltobechangedoniframe"};     wixWindow.openLightbox("BUSINESS CARDS", testdata); } 

wait, can it be this simple?

import wixWindow from 'wix-window'; 
$w("#button47").onClick( (event, $w) => {
    let testdata={'targetURL':"http://myexternalurltobechangedoniframe"};          
    wixWindow.openLightbox("BUSINESS CARDS", testdata); } 

Ah, on to editor, I had to expand this conceptually for myself a little bit first since it appears the only problem here is my lack of info and misunderstanding how this stuff works. brb

Ok, back to reading, ignore my comments earlier, that didnt work obviously lol

I really am going to have to test this out fully to understand it, I am either overthinking it or totally went offroad for a moment, lemme test. brb

Ok, so I read and tested what I could. I believe I now somewhat understand correctly, but might still be missing a piece of the puzzle, this is what I have to test but it does not work and is throwing an error I cannot quite resolve. (ignore the line spaces, I did that for screenshot clarity, the error was present with } immediately at the end, with a space at the end, or on a new line.


that last part and where I am really stuck has to do with these buttons on these repeaters on my page for full clarity of what is going on. I am still baffled as to how do I exactly identify each of those order now buttons from one another when it comes to writing code for them. they each are supposed to trigger a different url within the iframe on lightbox like I said. I feel like this is flying right over my head lol


I tried with $w.scoped and without and both got that unexpected token parsing error at the end with no code being executed upon click on preview.

Have I got this completely wrong? hmmmm, dang it, I have to do a hard stop here and do some design work I promised a client for noon (1h 5m left lol) I hope someone can help get past this last part of my noobness with this smdh lol

Omid:

export function button47_click(event, $w) is essentially equivalent to $w(" # button47 ").onClick( (event, $w)

The difference is that one attaches to the element directly - which is what you are showing above with button47_click.

So to start with you do not need both the exported onClick button AND the $(‘#button47’).onClick().

Pick one and run with that!

Now, every one of the repeater buttons will be called $(‘#button47’). Why? because it is repeated in a repeater context which funnels the button click to a common function for you to resolve the click.

So while visually on the screen you have 5 Order Now Buttons these are all nested elements in a repeater.

repeater.item1.button47
repeater.item2.button47
repeater.item3.button47
etc…

Now when you click on any button the wix framework looks at the element hierarchy and constructs a context for you which essentially scopes which button has been clicked.

So when the event handler function for button47 is called wix gives you the context as one of the parameters.

$w(‘#button47’).onClick((event, $wScoped) => {

}

So what this is saying is $wScoped == repeater.item2 (let’s say) which is the button that was clicked.
Now when you try to access any other element in that scoped item you will get the correct data. So if there was a text field with the URL in it called iFrameURL then you could have an instruction say

let targetURL = $wScoped(‘#iFrameURL’).value; // This should return the URL for item whose button we pressed i.e. repeater.item2.iFrameURL.

Now if you have the URLs in your data collection for the repeater items. You can bind the URL data to a hidden text element that the repeater loads but doesn’t display. When ‘button47’ is clicked you simply load the iFrameURL as above and set the $w(‘#targetIFrame’).src to the value.

Notice I am specifically using $wScoped and $w to avoid confusion. $w means ‘global scope’ so there is only one element on the page with this id and it is a peer to the repeater.

So boiling this down

$w(‘#targetIFrame’) === document.targetIFrame
$w(‘#repeater’) === document.repeater
$w(‘#button47") === a proxy to an event handler used in a repeater scoped by the $wScoped argument
$w(’#button47") .onClick(event, $wScoped) => {}) sets $wScoped to the element path for the clicked button

When clicked $wScoped could be one of:

document.repeater.item1
document.repeater.item2
document.repeater.item3
etc…

and gives you access to any of the repeater element values for the scoped item.

Hope that makes sense.

Steve