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>
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?