Stimulus: controller target access problem

[traskat]

hey,

is it possible to have multiple data-content-loader-url on one controller for different elements amd also data-targets. like that

<div data-controller="myController" data-content-loader-url="/api/test">
   <select data-controller="myController" data-content-loader-url="/api/loader-1" data-target.loader1 >
   </select>
   <select data-controller="myController" data-content-loader-url="/api/loader-2" data-target="myController.loader2">
   </select>
   <select data-controller="myController" data-content-loader-url="/api/loader-3" data-target="myController.loader3">
   </select>
</div>

i have created the static methog like that:

static get targets() {
            return ["loader1","loader2","loader3"]
        }

when i try to access the the input variables like this.:

let loader 3 = this.loader3Target.value

i get the following error

Error invoking action "click->myController#saveLoader"


Error: Missing target element "myController.loader3"
Stack trace:
get@http://localhost:3000/js/stimulus.umd.js:5:1548
saveProjectDetails@http://localhost:3000/js/main.js:326:8
E</t.prototype.invokeWithEvent@http://localhost:3000/js/stimulus.umd.js:5:3143
E</t.prototype.handleEvent@http://localhost:3000/js/stimulus.umd.js:5:2684

It worked if i had different contrller for the targets and the content url loader

[rupasix]

So, you demand myController.loader3Target on method saveLoader() using DOM element without data-target="myController.loader3", am i right?

[traskat]

the method saveLoader is invoked here:

<div data-controller="myController" data-content-loader-url="/api/test">
   <select data-controller="myController" data-content-loader-url="/api/loader-1" data-target="myController.loader1" >
   </select>
   <select data-controller="myController" data-content-loader-url="/api/loader-2" data-target="myController.loader2">
   </select>
   <select data-controller="myController" data-content-loader-url="/api/loader-3" data-target="myController.loader3">
   </select>
   <button data-action="click->myController#saveLoader"></button>
</div>

so yes on that button is no data target, but doesn't the data targets has to be on the element i want to retrieve?

is it wrong to access the data target in that saveloader method like that?

let loader3 = this.loader3Target.value

[traskat]

@rupasix
did i placed the data-target wrong? because the data-target is there.

data-content-loader-url="/api/loader-3" data-target="myController.loader3"

also if i would set data-target to another controller lik

data-target="anotherController.loader3"

it will the tell me the same error but only the data-target/variable loader2.

[adrienpoly]

I don't think it is recommended to have the identical controllers nested.
would recommend changing the name of you parent controller
html <div data-controller="anotherController" data-content-loader-url="/api/test"> ...

[rupasix]

My point was that propably you demand all variables (loader1, loader2 and loader3) on your action saveLoader but you have 3 instances of your controller "myController", each one with different loader. So if i'm right you have something like that:
<select data-controller="myController" data-content-loader-url="/api/loader-1" data-target="myController.loader1" > </select>
and in your saveLoader:
let loader3 = this.loader3Target.value which should end with error Missing target element "myController.loader3" because you have only loader1.

Is that your case? If not - i don't understand what you want to achieve and can't help you. Can you share with us your "MyController" code and full HTML where that controller is used?

[javan]

Every controller+identifier pairing creates a new scope, which allows nested controller elements to function independently. Nested controller elements are isolated from parent elements with the same identifier. For example:

<div id="a" data-controller="content">
  <div id="b" data-controller="content" data-target="content.view">
    <div data-target="content.view"></div>
  </div>
</div>

The controller for b will have 2 viewTargets and a will have 0 (because they both belong to b's scope).