CODEWITHSUNDEEP
jquery-pluginsaurelia
sibi
sibi

Reputation: 675

Aurelia Js select box not working

Am new to Aurelia Js , here, am using a simple select box but its not working while changing the value.

HTML :

<select value.bind="selectVal" change.delegate="changed()">
                        <option value="" disabled selected>Doc.Type</option>
                        <option value="1">Option 1</option>
                        <option value="2">Option 2</option>
                        <option value="3">Option 3</option>
                    </select>

Model : this.selectVal = ''; changed(){ alert(); } change.delegate is not triggering while change the value. Also, datepicker value is not loading in the model. What will be the issue? Is it any from my end or form Aurelia js issue.

Upvotes: 1

Views: 287

Answers (1)

Daniel
Daniel

Reputation: 201

When using Materialize (as became apparent from the comments of the original questions) the select element won't fire any change event. You would have to listen to the jQuery change event and fire a CustomEvent in the event handler.

Like this:

_suspendUpdate = false;
attached() {
  $(this.option).material_select()
  $(this.option).on('change', e => {
    if (!this._suspendUpdate) {
      let customEvent = new CustomEvent('change', {});
      this._suspendUpdate = true;
      this.option.dispatchEvent(customEvent);
      this._suspendUpdate = false;
    }
  });
}

Note: the suspendUpdate "trick" is needed because a change CustomEvent also causes jQuery to fire its own change event which causes an infinite loop.

The view template for the snippet above:

<template>
  <require from="materialize/dist/css/materialize.css"></require>
  <div class="input-field col s12">
   <select ref="option" value.bind="optionSelect">
     <option value="" disabled selected>Choose your option</option>
     <option value="1">Option 1</option>
     <option value="2">Option 2</option>
     <option value="3">Option 3</option>
   </select>
   <p>Selected value: ${optionSelect}</p>
  </div>
</template>

Here is also a gist.run which demonstrates this approach: https://gist.run/?id=4e7dd11228407e765844570409d210bd

Of course if you're using Materialize with Aurelia, you can also use the Materialize bridge: http://aurelia-ui-toolkits.github.io/demo-materialize/#/about

Disclaimer: I'm one of the creators of Aurelia Materialize bridge.

Upvotes: 2

Related Questions