Uncaught ReferenceError: function is not defined error when calling riot function

Question

I have data inserted into HTML like this:

<p each="{this.holidayListFirstPart}" if="{hdate}">
    <span id="{description}" onclick={showInputBox}>{hdate}:{description}</span>
</p>

I am trying to convert the span tag to textarea on mouseclick so that the user can edit the text like this:

showInputBox(e) {
    self.textContent = document.getElementById(e.target.id).innerHTML;

    var mySpan = document.getElementById(e.target.id);
    var customTextArea = document.createElement("textarea");
    customTextArea.id = e.target.id;
    customTextArea.setAttribute('onmouseout','{focusGone}');
    customTextArea.innerHTML = self.textContent;
    mySpan.parentNode.replaceChild(customTextArea, mySpan); 
}

focusGone(e){
    console.log("lost focus");
}

The problem is when the user leaves the textarea after editing the text, its throwing error that focusGone function is not defined:

Uncaught ReferenceError: focusGone is not defined

How do I make this work in riotjs?

`setAttribute` probably doesn't work when you set it to `{focusGone}`, which is not a function but some sort of templating that probably runs earlier — adeneo, Sep 09 '16 at 11:10
@adeneo I tried with `customTextArea.setAttribute('onmouseout','focusGone()');` which didn't work either — kittu, Sep 09 '16 at 11:16

vitomd · Accepted Answer · 2016-09-09T14:54:59.860

You are tying to update a tag definition at runtime, that´s not supported https://github.com/riot/riot/issues/1752

But you can get the same result in another way

<my-tag>
<my-tag>
  <p each="{this.holidayListFirstPart}" if="{hdate}">
        <span show="{!parent.editing}" id="{description}" onclick={showInputBox}>{hdate}:{description}</span>
        <textarea id="editText" onmouseout="{parent.focusGone}" show="{parent.editing}"></textarea>
  </p>

  this.holidayListFirstPart = [{description:'des1', hdate:'123'}, {description:'des2'}]
  this.editing = false

  showInputBox(e) {
      this.editing = !this.editing 
      this.editText.innerText = e.currentTarget.innerText
  }

  focusGone(e){
    this.editText.innerHTML = e.currentTarget.value
    alert('result: ' + this.editText.innerHTML);
  }
</my-tag>

Update I updated the code based on your comment. The idea is to know how to access the data that you need, you can use the event.currentTarget or direct using this.object_id check this fiddle https://jsfiddle.net/vitomd/1b2m7xec/6/

but the problem is unable to get the value after editing inside `focusGone()` function. check this fiddle: https://jsfiddle.net/1b2m7xec/2/ — kittu, Sep 09 '16 at 14:08

Uncaught ReferenceError: function is not defined error when calling riot function

1 Answers1