CODEWITHSUNDEEP
javascriptoracle-jet
Elva
Elva

Reputation: 419

How to bound the variable in JS from HTML in oracle jet application?

I wonder how can I achieve such a goal: when I change the choice from the select combox, the data distribution in the pie gragh will change correspondingly. enter image description here

The HTML code snippet:

<oj-option value="flow1">Flow1</oj-option>
<oj-option value="flow2">Flow2</oj-option>
<oj-option value="flow3">Flow3</oj-option>

The JS code snippet:

var barSeries = [{name: "field1", items: [90, 34]},
   {name: "field2", items: [55, 30]},
   {name: "field3", items: [36, 50]},
   {name: "field4", items: [22, 46]},
   {name: "field5", items: [60, 46]}];
self.barSeriesValue = ko.observableArray(barSeries);

To be simplified, the problem should be: how to obtain oj-option value from HTML and use it as a condition in JS to change the variable barSeries ?

Upvotes: 2

Views: 1679

Answers (2)

Ray
Ray

Reputation: 3959

Like this:

  1. Get the value of the oj-select-one in an observable, say 'currentFlow'.

  2. Provide an on-value-changed attribute. Its value will be the name of a function that you will use to update the chart when the value changes, say 'updateChart':

    <oj-select-one id="basicSelect" value="{{currentFlow}}" on-value-changed="
[[updateChart]]" >
    <oj-option value="flow1">Flow1</oj-option>
    <oj-option value="flow2">Flow2</oj-option>
    <oj-option value="flow3">Flow3</oj-option>
</oj-select-one>

  3. Inside the 'updateChart' function, get the current value of currentFlow observable, and change the value of your observableArray barSeriesValue accordingly.

    self.updateChart = function(){
    if (self.currentFlow() == 'flow1'){
        self.barSeriesValue.push({name:'field6',items:[70,22]});
    }
    if (self.currentFlow() == 'flow2'){
        self.barSeriesValue.pop();
    }
    if (self.currentFlow() == 'flow3'){
        self.barSeriesValue.push({name:'field6',items:[30,52]});
    }
}

Upvotes: 4

peppertech
peppertech

Reputation: 605

This one should be pretty straight forward. In the on-value-change event handler, get the value of the select component and use it to reset the value of the barSeries array.

The barSeries array is used as the basis for the observable that feeds the chart. Once you change the array, the chart will auto-update to reflect the new data.

Since it appears you are using the new JET 4.0.0 custom element syntax, the on-value-change event now looks like this (this was the optionChange event option in previous versions of JET):

<oj-select-one id="select" on-value-changed="[[valueChangedHandler]]" 
        style="max-width:20em">
        <oj-option value="Internet Explorer">Internet Explorer</oj-option>
            <oj-option value="Firefox">Firefox</oj-option>
            <oj-option value="Chrome">Chrome</oj-option>
            <oj-option value="Opera">Opera</oj-option>
            <oj-option value="Safari">Safari</oj-option>
      </oj-select-one>

Notice the "on-value-change" attribute that is passed an event handler method.

Upvotes: 2

Related Questions