Problems with innerHTML and id/class

Adobe XD UXP Plugin API
1

Hello there,

I just created my first XD Plugin for testing purposes and run into some problems. The question is if I’m missing something or are these bugs?

The plugin uses a modal dialog with a range slider to change the opacity of an element.

You can find the full source code of the main.js here:

Finally, the plugin works. But first I used some other code (which you see now as comments in the gist).
See line 49 - 54.

  • Line 52: Here I tried to set the innerHTML. The console returned “Plugin TypeError: this.html.charCodeAt is not a function”. I managed to get it to work with jQuery.

  • Line 54: If I use here id instead of class it will only work the first time the modal dialog is opened.
    To reproduce:

  1. Change line 40 to id instead of class
  2. Change line 54 to ('#opacity') instead (’.opacity’)
  3. Run the plugin
  4. The value of the slider will update correctly
  5. Dismiss the modal dialog
  6. Reopen the plugin
  7. The value of the slider will NOT update correctly
2

I think the issue is down to how dialogs are being handle – dialog elements are not removed from the DOM after they are closed unless you do so explicitly. This means that when you look up elements by class or ID, you may in fact be getting a previously created element.

There are two ways around this:

  1. Remove the dialog when it is closed. One easy way to do this is mainDialog.showModal().then(() => mainDialog.remove());
  2. Only create the main dialog once. You can execute showModal any number of times and any existing DOM elements will be shown, so you can create the dialog once, and if it already exists just show it again.

See if that helps, and LMK if you have any questions.

1 Like
3

Oh, that makes sense and works perfectly. Thanks!

What about the innerHTML issue?

4

innerHTML should work, but I wonder if jQuery is getting in the way. What version are you using?

5

Version 3.3.1
I only used jQuery because the innerHTML not worked.

6

Found the issue. innerHTML needs a String. It won’t work with Number.

2 Likes
7

Dang – nice catch! I hadn’t caught that it was a number. So we have a bug where we aren’t converting to a string, it looks like, although Chrome Dev Tools has some very interesting behavior when you try to assign numbers directly to innerHTML as well.

1 Like