Assigning innerHTML not working in some targets

I use the fetch api to update partials with an html response. This is working in some actions but not others and I can’t figure out why. In the following code all the console.log print the expected output except for the final one:

    fetch(url)
      .then(response => response.json())
      .then(json => {
        console.log("available actions:", this.availableActionsTarget.innerHTML);
        console.log("json response", json.available_actions_form.template);
        this.availableActionsTarget.innnerHTML = json.available_actions_form.template;
        console.log("available actions after re:", this.availableActionsTarget.innerHTML);
      });

In other functions in my stimulus controller the innerHTML get assigned as expected but for some reason this one does not assign the innerHTML to the response.

You’ve mistyped innerHTML on line 6 of your example. If the code is copied directly from your project, that might be the issue :slight_smile:

Other than that your code seems fine. I’ve posted a working example here, using your code as a template:

Code: https://glitch.com/edit/#!/stimulus-fetch-and-replace
Web: https://stimulus-fetch-and-replace.glitch.me

1 Like

Wow, feeling pretty dumb right now…

1 Like

Don’t! Typos are easy to overlook when you’ve been staring blindly at something for a while.

1 Like