Interpolation not working as I expect it to

[CombesA]

Hey there !
Just so you know, you're doing a great job, your tool is really easy to use and it makes everything simple, thanks !

I have this issue, I'm trying to do the following :
\<div class="demo" data-t-interpolate> <div class="loading"></div> {{test}} \</div>

You talked about it in the conversation on the PR #16 . This should work now but it doesn't.
My case is that I want a checkbox, like so :
\<div data-t-interpolate> {{contact.call.title}} <input type="checkbox"> \</div>
I had the problem where my checkbox was removed by your script. Now that code is displaying the checkbox, but doesn't translate the text. The text displayed stays that way :
{{contact.call.title}}

I was wondering if I was doing something wrong.

Thanks a lot !

P.S. : Sorry, I had some issues trying to write code in here ahah.

[danhper]

Hi, I think you are just missing the data-t attribute.
It is still needed even if you have the data-t-interpolate attribute,
otherwise your tag will not be considered for translation.
Could you give it a try please?
Thanks.

[CombesA]

Hey, sorry I was abroad for some time, that's why I couldn't answer.
I tried what you told me. Now this :

<div data-t data-t-interpolate>
      <div>Test test</div>
      {{test}}
</div>

Works perfectly. {{test}} get replaced by the right text, and "Test test" stay the same.
I was indeed missing the data-t attribute.

This, on the other hand :

<div data-t data-t-interpolate>
      <div>Test test</div>
      <input type="checkbox" name="vehicle" value="Bike">
      {{test}}
</div>

Does not work, as it removes the checkbox. {{test}} get replaced by the right text, and "Test test" stay the same though. But the input got removed.
I've tried with a classic input, and it did the same. I've also tried with a select, and some options :

<div data-t data-t-interpolate>
      <div>Test test</div>
      <select>
        <option>Mo</option>
        <option>Tu</option>
        <option>We</option>
        <option>Th</option>
        <option>{{test}}</option>
      </select>
      {{test}}
</div>

Here, both of the {{test}} are replaced by the right text, and "Test test" also stay the same. But the <select> and <option> tags are disappearing, only the text inside doesn't.

So here the result of that last piece of code after it went through your script :

Test Mo Tu We Th English translation Test English translation

I don't really know what I'm missing out on.
Thanks for taking the time to help me !

[martinbarilik]

@CombesA did you manage to solve this ? i am fighting this ATM.

Just curious if it works at all so i won't waste my time.

[danhper]

I am pretty sure this a bug. The easiest way to work around it is probably to wrap the text inside a span with the relevant attributes.
If you have time to send a PR to fix it, that'd obviously be very welcome!