LOE
League of Extraordinary FoundryVTT Developers•9mo ago
snagov

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
snagov
snagovOP•9mo ago
i've found a work around. using ChatMessage.create({ ..... }).then( ) and inside the then using the method update
CussaMitre
CussaMitre•9mo 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?
snagov
snagovOP•9mo 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
CussaMitre•9mo 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
Mana•9mo 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.

Did you find this page helpful?