Question

So I have the following code that I am using to create a form that when you click into a field it makes sure the most current data from the database is in the field and then when you leave the form field it saves the text area back to the database. There’s a lot of other fields already in the form in the display() function that work. However this is the first database field I am working with that is a list(string) so I’m trying to figure out how to handle those. When I run this the html all looks correct and I can even see the events for the fields. However the fields generated with display_lp don’t fire the onclick or onblur events. Is there a reason why?

display_lp(path) = (
  List.mapi(
    x, characterlp ->     textid = "#edit_content_lp_{x}"
    divid = "#show_content_lp_{x}"
   <div class="show_content" id={divid} onclick={_ -> edit_lp(path, x) }>
        {x+1}:
        <textarea class="edit_content" id={textid} cols="20" rows="1" onblur={_ -> save_lp(path,x) } >
            {characterlp}
        </textarea>
    </div>
    , /characters[path]/lifepaths)
)

display(path) = (
   Resource.styled_page("{path}'s character sheet",["/resources/css.css"],
              /* a bunch of other irrelevant html *?
            <div class="show_content" id=#show_content_lp> Lifepaths:  { display_lp(path) }
            </div>
            <a href="..">Back to Directory</a>
      )
)

Answer 1

I have tested with a code similar to yours, and it seems that the onclick, onblur are not triggered because your IDs are incorrect, you must remove the # characters like this :

  textid = "edit_content_lp_{x}"
  divid = "show_content_lp_{x}"

However, if you want to use #, you should do :

my_id_var = "some_text_{nb}"
<div id=#{my_id_var}>...</div>

Do you notice the difference?