Javascript Variable Function (Twig)

Question

My default.htm (to set unique id)

{ % set uid = __SELF__.id % }

<div id="tab" name="{{uid}}" class="my-tab draggable-tab ui-draggable">
    <img id="tab-avatar" alt="Virtual agent avatar" style="height:50px; width:50px" src="{{__SELF__.avatarImage}}">
    <div id="tab-minimize">
        <div id="tab-label"></div>
        <div id="tab-expand" name="{{uid}}" class="tab-expand tab-btn"></div>
        <div id="tab-close" name="{{uid}}" class="tab-close tab-btn" onclick="tabClose()"></div>
    </div>
</div>

JS

function tabClose(){      
var uid = document.getElementsByName("name");
    $(this).click(function() { 
        $("#tab").addClass("hidden");  //<--- how to put the uid in?
    });
}

---

JS

var tab_{{uid}} = function tabClose(){
                       $("#tab-close").click(function() {        
                           $("#tab").addClass("hidden");
                       });
                  }

Can someone show me how to use twig in JavaScript?

How to set unique id for each component so that when I duplicate the component it will not have any errors?

Answer 1

You can't call server variable (twig) in client program (javascript).

You must write the twig variable in your html code for javascript catch it.

For example, tout can put it in data attribute.

<div id="tab-close" data-uniqid={{uid}} >

And in your js

var uid = $("#tab-close").data('uniqid');

or with your update

var uid = $("#tab").attr('name');

UPDATE

For your problem, I think You don't need Twig variable in your js, this variable is here to have uniq Id in your html code.

So, try this:

<div id="tab{{__SELF__.id}}" class="my-tab draggable-tab ui-draggable">
    <img id="tab-avatar{{__SELF__.id}}" alt="Virtual agent avatar" style="height:50px; width:50px" src="{{__SELF__.avatarImage}}">
    <div id="tab-minimize{{__SELF__.id}}">
        <div id="tab-label{{__SELF__.id}}"></div>
        <div id="tab-expand{{__SELF__.id}}" class="tab-expand tab-btn"></div>
        <div id="tab-close{{__SELF__.id}}" class="tab-close tab-btn" onclick="tabClose()"></div>
</div>

And in your js

 $(".tab-close").click(function() {        
     $(this).closest(".my-tab").addClass("hidden");
 });