League of Extraordinary FoundryVTT Developers•7mo ago

changing id for messages in the chat

Hello, I'm trying to build a system for foundry and i'm facing a issue when i create more than one message in the chat. those messages are cards that show options for a skill. the options are some radio buttons, and i'm using labels with the radios. basically the radio has an id, and the label has that id in the tag for. when more than one message is in the chat, since the for is always the same, i can't select items for the old message. is there an option to call new ChatMessage() and only after that create the message? i would like to grab the timestamp from ChatMessage to make each id unique. example:

{{#each fields as |fd key|}}
    <input type="radio" class="field-option" data-key="{{key}}" id="{{key}}" name="field" value="{{fd.value}}">
    <label for="{{key}}">{{fd.label}}</label>
{{/each}}

{{#each fields as |fd key|}}
    <input type="radio" class="field-option" data-key="{{key}}" id="{{key}}" name="field" value="{{fd.value}}">
    <label for="{{key}}">{{fd.label}}</label>
{{/each}}

I would like to have something like

{{#each fields as |fd key|}}
    <input type="radio" class="field-option" data-key="{{key}}" id="{{key}}-{{timestamp}}" name="field" value="{{fd.value}}">
    <label for="{{key}}-{{timestamp}}">{{fd.label}}</label>
{{/each}}

{{#each fields as |fd key|}}
    <input type="radio" class="field-option" data-key="{{key}}" id="{{key}}-{{timestamp}}" name="field" value="{{fd.value}}">
    <label for="{{key}}-{{timestamp}}">{{fd.label}}</label>
{{/each}}

in the JS I have the line below

ChatMessage.create({
    speaker: ChatMessage.getSpeaker({ actor: this.actor }),
    flavor: html
  })

ChatMessage.create({
    speaker: ChatMessage.getSpeaker({ actor: this.actor }),
    flavor: html
  })

i'm wondering if it's possible to have something like:

  const msg = new ChatMessage()
  ...
  i will add the timestamp to the tag elements here
  ...
  msg.create({
    speaker: ChatMessage.getSpeaker({ actor: this.actor }),
    flavor: html
  })

  const msg = new ChatMessage()
  ...
  i will add the timestamp to the tag elements here
  ...
  msg.create({
    speaker: ChatMessage.getSpeaker({ actor: this.actor }),
    flavor: html
  })

of course, if there is a best practice for this and it's different from my approach please let me know, otherwise i would like to validate i can create the class before the message. thank you

5 Replies

snagovOP•7mo ago

i've found a work around. using ChatMessage.create({ ..... }).then( ) and inside the then using the method update

CussaMitre•7mo ago

Just one thing: you could use the flags to do that, no? Create your own id, and add that on the flags? And then, when you are using the chat card to do something else, you could validate that only inside that card, not all the messages?

snagovOP•7mo ago

The issue is more related to this: first message has a group of radio buttons with name field. Basically it means I can select only one item in this group. If I click on the label that has thr for="bla" it will select the input with id bla. When a new message appears in the chat, same radio group with same names. When I click on the label with for="bla", there are 2 radio buttons with same id. It selects one and remove the selection from the previous group. Indeed to processes de data don't make difference because I'm processing the content of the message. The issue is only on the html level. For example, if I have 2 messages, I select the label in the second label, it will mark the radio in the second label and remove the checked from the first message. If a player click on the button in the first message, there will be no radio button selected. To make clear, the button is another button that call the function that pull the data from the message. Not the radio button itself but a kind of submit button. Is that make sense?

CussaMitre•7mo ago

How are you rendering the template to html? Because you could generate your id before rendering, and passing that Id as part of the context for rendering

Mana•7mo ago

As general advice, do not use id property at all unless you're in control of everything on the webpage (with Foundry you never are), since id is supposed to be unique across the entire webpage.

Gaming

Programming

changing id for messages in the chat