CODEWITHSUNDEEP
javascriptmeteorhtml-select
manwitha
manwitha

Reputation: 37

First select in dropdown jquery

I know Meteor supports events but I'm not sure if there is an event for dropdown clicks for when an item is first selected. Ideally, this would run code only the first time an item in a dropdown list is selected and not any subsequent times.

Here is the html code:

        <select id="module-select" class="form-control">
            <option disabled="disabled" selected="selected">Select Assessment</option>
            {{#each modules}}
                 <option value="{{this.name}}">{{this.name}}</option>
            {{/each}}
        </select>

I'm using the following Template code to do something upon select change and would like to continue as so. 

"change #module-select": function(event, template){
     var module_name = $(event.currentTarget).val()
     console.log("assessment: ", module_name)
     Session.set("Assessment_name", module_name)
 }

Upvotes: 0

Views: 57

Answers (2)

A Macdonald
A Macdonald

Reputation: 824

if you don't want to set the session variable 'Assessment_name' with the same value twice I am presuming this is to avoid other side effects of this setting. And as such I am assuming you only want to prevent the setting again if that is the current value of the variable, so if the session variable was set to the value of another item in the dropdown you would not mind if it changes, even if the item it changes to was selected at some time in the past. So if these assumptions are correct then simply checking the value of your session variable should be enough to prevent the same value being set:

"change #module-select": function(event, template){
     var module_name = $(event.currentTarget).val()
     console.log("assessment: ", module_name)
     if (Session.get("Assessment_name") !== module_name) {
       Session.set("Assessment_name", module_name)
     }
   }

Upvotes: 0

Jankapunkt
Jankapunkt

Reputation: 8423

Ideally, this would run code only the first time an item in a dropdown list is selected and not any subsequent times

In your case there is no special magic required to solve this. You basically need a structure that allows you to run a method only once.

The input for this structure is your modules list. The cache that checks, whether a module has been loaded is an Object. Consider the following list of module names and an empty Object:

Template.yourTemplate.onCreated(function() {
  const instance = this;
  instance.state = new ReactiveDict();
  instance.state.set('modules', ['a', 'b', 'c']);  
  instance.state.set('loaded', {});
});

You can load a module and afterwards add an entry to the object that the module has been loaded:

// outside the template functions
function loadOnce(module, templateInstance) {
  const loaded = templateInstance.state.get('loaded');

  // return if already loaded
  if (loaded[module]) return;

  // else load module and set as loaded
  Session.set("Assessment_name", module_name)
  loaded[module] = true;
  templateInstance.state.set('loaded', loaded);
}

Template.yourTemplate.events({
  "change #module-select": function(event, template){
    var module_name = $(event.currentTarget).val()
    loadOnce(module_name, template); 
  }
});

Now this may solve the issue with loading once, it may not solve the issue, that your select list still contains the elements to select.

So if you want to have the elements from the options removed, you may also remove the element from your modules array. Then it won't be selectable anymore.

function loadOnce(module, templateInstance) {
  const loaded = templateInstance.state.get('loaded');
  const modules = templateInstance.state.get('modules');
  // return if already loaded
  if (loaded[module]) return;

  // else load module and set as loaded
  Session.set("Assessment_name", module_name)
  loaded[module] = true;
  modules.splice(modules.indexOf(module), 1);
  templateInstance.state.set('loaded', loaded);
  templateInstance.state.set('modules', modules);
}

A general note on security: this will not prevent clients from loading modules if they intend to. This is only UI / UX functionality but will not stop someone to load a module if desired.

Upvotes: 1

Related Questions