0

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?

3
  • @Okazari Ok, thx!
    – A. Wolff
    Commented Sep 9, 2016 at 11:05
  • 1
    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
    Commented Sep 9, 2016 at 11:10
  • @adeneo I tried with customTextArea.setAttribute('onmouseout','focusGone()'); which didn't work either
    – kittu
    Commented Sep 9, 2016 at 11:16

1 Answer 1

1

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/

1
  • but the problem is unable to get the value after editing inside focusGone() function. check this fiddle: jsfiddle.net/1b2m7xec/2
    – kittu
    Commented Sep 9, 2016 at 14:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.