How to change a session variable when clicking on `` in Javascript

Question

I can't find a way to make it works without using PHP and I don't want to use PHP. The thing is that I have a list with some options :

And I want to set a session variable when I click on one link.

I have tried to do <a onClick="displayAllContainers();">All containers</a> then in my JS I have tried to do

`function displayAllContainers() {
  console.log("Display all");
}`

But it didn't work.

[EDIT] This fiddle doesn't work but I can put all the code without making a question that make 500lines so

import { Template } from 'meteor/templating';
import { Session } from 'meteor/session'
import { InfosContainers } from '/both/collections/infosContainers.js';
import { InfosMachines } from '/both/collections/infosMachines.js';

import './main.html';
import '../imports/ui/controlPanel.js';
import '../imports/ui/container.js';
import '../imports/ui/machine.js';
import '../imports/ui/chart.js';
import '../imports/ui/controlPanel.html';
import '../imports/ui/container.html';
import '../imports/ui/machine.html'


if (Meteor.isClient) {
  //subscribe the publication of the server
  Meteor.subscribe('infosContainers');
  Meteor.subscribe('infosMachines');
}


function displayAllContainers() {
  console.log("Display all");
}


Template.body.onRendered(function () {
});


Template.body.helpers({
  //return all objects of the collection machines with the specified state
  infosMachines() {
    return InfosMachines.find({});
  },
  //return all objects of the collection containers with the specified state
  infos(state) {
    return InfosContainers.find({stateContainer: state});
  },
  //return all containers
  infosCtn(){
    return InfosContainers.find({});
  },
  //return true if we have >=1 container running. It's the emergency button
  urgence() {
    return InfosContainers.find({stateContainer: 'running'}).count() > 0;
  }
});

  <!-- form containers -->
                        <div class="col-md-6 col-sm-12 col-xs-12">
                            <div class="x_panel">
                                <div class="x_title">
                                    <h2>Containers</h2>
                                    <ul class="nav navbar-right panel_toolbox">
                                        <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                        </li>
                                        <li class="dropdown">
                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                                            <ul class="dropdown-menu" role="menu">
                                              <li><a onClick="displayAllContainers();return false;">All containers</a>
                                              </li>
                                              <li><a href="#">Only running containers</a>
                                              </li>
                                              <li><a href="#">Only paused containers</a>
                                              </li>
                                              <li><a href="#">Only stopped containers</a>
                                              </li>
                                            </ul>
                                        </li>
                                        <li><a class="close-link"><i class="fa fa-close"></i></a>
                                        </li>
                                    </ul>
                                    <div class="clearfix"></div>
                                </div>
                                <div class="x_content">
                                    <br/>
                                    {{#each infosCtn}}
                                      {{> container}}
                                    {{/each}}
                                </div>
                            </div>
                        </div>
                        <!-- /form containers -->

No I want to do `myFunctionWhenClickAOption(){Session.set('wantAll',true);}' — Jerome, Jan 12 '17 at 06:48

Rahul · Answer 1 · 2017-01-12T07:03:07.627

1

Try this, HTML

<a onClick="displayAllContainers()" href="javascript:void(0);">All containers</a>

JS

function displayAllContainers() {
  console.log("Display all");
}

EDIT

HTML

<a onClick="Meteor.call('displayAllContainers');
" href="javascript:void(0);">All containers</a>

JS

Meteor.methods({
    'displayAllContainers': function(){
        console.log("Hello world");
    }
});

edited Jan 12 '17 at 07:03

answered Jan 12 '17 at 06:41

Rahul

18,271
7
41
60

I got this error `javascript;;:1 Uncaught ReferenceError: displayAllContainers is not defined at HTMLAnchorElement.onclick (javascript;;:1)` – Jerome Jan 12 '17 at 06:42
its javascript:; not javascript;; . you use two ; use :; – Rahul Jan 12 '17 at 06:45
try javascript:void(0) instead of javascript:; – Rahul Jan 12 '17 at 06:47
Still the same error I really don't understand what happend – Jerome Jan 12 '17 at 06:49
Can you update your question with main.html also which has its function displayAllContainers – Rahul Jan 12 '17 at 06:50
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/132962/discussion-between-v-for-vendetta-and-jerome). – Rahul Jan 12 '17 at 07:03

score 1 · Answer 2 · edited May 23 '17 at 12:16

1

This works, JSFiddle

<script language="javascript">
function displayAllContainers(){
  console.log("Display all");
}
</script>
<a onclick="displayAllContainers()">
  All Containers
</a>

Write your function like below and it should work,

displayAllContainers = function(){
  console.log("Display all");
}

I don't know why it works, I am putting a question for it, Will put link here. SO Question

edited May 23 '17 at 12:16

Community

1
1

answered Jan 12 '17 at 06:49

Subir Kumar Sao

8,171
3
26
47

But I can't put ` – Jerome Jan 12 '17 at 06:50
I understand, that's what I am confused why its not running when the function is in a separate JS file. – Subir Kumar Sao Jan 12 '17 at 07:03

score 1 · Answer 3 · answered Jan 12 '17 at 06:51

1

You need to return false so as to prevent the default click behavior. Just change this way:

<a onClick="displayAllContainers();return false;">All containers</a>

answered Jan 12 '17 at 06:51

vishnuvp

283
5
20

Same erro as before `Uncaught ReferenceError: displayAllContainers is not defined at HTMLAnchorElement.onclick (javascript;;:1)` – Jerome Jan 12 '17 at 06:52
Can you assign an id to the anchor tag and try giving this in the script file: `document.getElementById ("anchorid").addEventListener ("click", displayAllContainers, false);` – vishnuvp Jan 12 '17 at 06:57
Can you try this instead: `anchorid.onclick = function(){ displayAllContainers(); }; ` – vishnuvp Jan 12 '17 at 07:09

score 0 · Accepted Answer · answered Jan 12 '17 at 07:07

Ok so thank you to everybody for you help because you have all helped me to found the solution and there is it :

1) I need to use template events in my JS

Template.body.events({
    'click #anchorid': function (e) {
      console.log("saucisse")
    }
});

2) And I had to use the ID in the html but I can remove the onClick

<a id="anchorid">All containers</a>

How to change a session variable when clicking on `` in Javascript

4 Answers4