0

I have a list of containers and I want to add a button that display a terminal on the container where we clicked on the terminal logo. enter image description here

But I don't how to catch the index of the container in the list.

My HTML is :

<li class="liContainer">
    <div>
        <h3>{{nameContainer}}</h3>
    </div>
    <div id="idContainer">
        <span>ID: {{idContainer}}</span>
    </div>
    <div id="stateContainer">
        <span class="state">State: {{stateContainer}}</span>
    </div>

    <div id="terminalContainer" class="hidden">
      <div class="terminal hidden"></div>
    </div>

      <button type="button" class="stop {{#if to_hide_stop}}hidden{{/if}}"> </button>
      <button type="button" class="start {{#if to_hide_start}}hidden{{/if}}"> </button>
      <button type="button" class="pause {{#if to_hide_pause}}hidden{{/if}}"></button>
      <button type="button" class="unpause {{#if to_hide_unpause}}hidden{{/if}}"> </button>
      <button type="button" class="cmdLogs"> terminal </button>
</li>

And my JS :

'click .cmdLogs'(event) {
    Session.set("displayCmdLogs",true);
    //here I need to do something to get the ID with the event and then I could do...
    setTimeout(function(){
      var term = new Terminal();
      console.log("term:  " + term);
      //.. the getElement on the right one
      term.open(document.getElementsByClassName('terminal')[idFromEvent]);
      //term.fit();
      term.write('Hello from container.js');
    },200);
  }
ppasler
  • 3,579
  • 5
  • 31
  • 51
Jerome
  • 1,162
  • 2
  • 16
  • 32
  • Right, sorry for the mistake – Jerome Jan 16 '17 at 14:15
  • 1
    Get the clicked element by using [MeteorJS: How to get clicked element](http://stackoverflow.com/questions/35194509/meteorjs-how-to-get-clicked-element) and the index of the clicked element using [Get index of clicked element in collection with jQuery](http://stackoverflow.com/questions/5545283/get-index-of-clicked-element-in-collection-with-jquery). Use `$(event.currentTarget).closest('li').index();` – Tushar Jan 16 '17 at 14:16
  • @Tushar is it possible to do .closet('className') ? – Jerome Jan 16 '17 at 14:19
  • Yes. You can pass any valid selector to `closest`. For classname, `.closest('. liContainer')` – Tushar Jan 16 '17 at 14:20
  • Thank you, you know why the index start at 2 ? – Jerome Jan 16 '17 at 14:22
  • The `index` should start from 0. Check if you have any hidden elements. – Tushar Jan 16 '17 at 14:24
  • Yeah I think about it, you can put your answer and I'll mark it as answer – Jerome Jan 16 '17 at 14:24

1 Answers1

0

I'm assuming the id you want to catch is "idContainer". I'd modify your HTML as follows :

<li class="liContainer">
    <div>
        <h3>{{nameContainer}}</h3>
    </div>
    <div id="idContainer">
        <span>ID: {{idContainer}}</span>
    </div>
    <div id="stateContainer">
        <span class="state">State: {{stateContainer}}</span>
    </div>

    <div id="terminalContainer" class="hidden">
      <div class="terminal hidden"></div>
    </div>

      <button type="button" class="stop {{#if to_hide_stop}}hidden{{/if}}"> </button>
      <button type="button" class="start {{#if to_hide_start}}hidden{{/if}}"> </button>
      <button type="button" class="pause {{#if to_hide_pause}}hidden{{/if}}"></button>
      <button type="button" class="unpause {{#if to_hide_unpause}}hidden{{/if}}"> </button>
      <button type="button" class="cmdLogs" id="{{idContainer}}"> terminal </button>
</li>

And you js :

'click .cmdLogs'(event, template) {
    Session.set("displayCmdLogs",true);
    var id = event.currentTarget.id; //The id is here

    setTimeout(function(){
      var term = new Terminal();
      console.log("term:  " + term);
      //.. the getElement on the right one
      term.open(document.getElementsByClassName('terminal')[idFromEvent]);
      //term.fit();
      term.write('Hello from container.js');
    },200);
  }
Mathieu K.
  • 903
  • 8
  • 27
  • No I wanted to catch the id of the "liContainer" to know which container I clicked on but now it works ! – Jerome Jan 17 '17 at 06:13