Assigning innerHTML not working in some targets

1

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.

2

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: Glitch :･ﾟ✧
Web: https://stimulus-fetch-and-replace.glitch.me

1 Like
3

Wow, feeling pretty dumb right now…

1 Like
4

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

1 Like