Search code examples
knockout.jssplit-buttonoracle-jet

OracleJet Splitbutton get select event value


Using the Oraclejet framework, I was trying to make a splitbutton which has only 2 options. How can I differentiate them so that each go to their own function? Or how can I paste the text of selected to function as parameter?

It was something like this

<div id="dialogWrapper" style="position:relative; max-height:1%; max-width:1%;">
 <button id="printPdf" style="margin-right:6px;"data-bind="
                        ojComponent: {component: 'ojButton',            
                                      menu:'#choices'
                                      }"/>

The menu inside:

 <ul id="choices" style="display:none"
      data-bind="ojComponent: {component: 'ojMenu', select: print//here both of them call to same function}">
 <li id="PDF">
         a href="#"><span class=""></span>PDF</a>
        </li>
        <li id="Excel">
        <a href="#"><span class=""></span>Excel</a>
     </li>     
  </ul> 
 </div> 

Solution

  • This is done by using some parameters of the selection handler function:

    I've recreated the example above and tested this code:

    <div id="dialogWrapper" style="position:relative; max-height:1%; max-width:1%;">
     <button id="printPdf" style="margin-right:6px;"data-bind="
                            ojComponent: {component: 'ojButton',            
                                          menu:'#printOptionsList',
                                          label: 'Print Option'
                                          }"/>
     <ul id="printOptionsList" style="display:none"
          data-bind="ojComponent: {component: 'ojMenu', select:printOptionHandler}">
     <li id="selPdf"><a href="#"><span class="oj-menu-item"></span>PDF</a></li>
     <li id="selExcel"><a href="#"><span class="oj-menu-item"></span>Excel</a>
         </li>     
      </ul> 
     </div> 
    

    as for the script part, I've added the printOptionHandler to the main knockout object:

    self.printOptionHandler = function(event,ui){
                var sel = ui.item.children("a").text();
                //alert('option selected: ' + sel);
                if (sel == "Excel") {
                    alert("calling Excel function");
                } else if (sel == "PDF"){
                    alert ("calling PDF function");
                }
            };
    

    Does this render the desired output on your side as well?