Dynamic Toggle Functionality – Knockout and JavaScript

By Samir Behara on August 17, 2017 • ( 0 )

Last week as part of an interface redesign, I had to revamp a user search screen. One of the first functionality which I had to incorporate was a dynamic toggle feature between a dropdown list and checkbox using Knockout.

Use Case Scenario

The UI has a drop-down with 2 values – Invoice Number and Subscriber Code.

If the user selects ‘Invoice Number’ in the drop-down, then a text-box is displayed where the user can type an invoice number.

If the user selects ‘Subscriber Code’ in the drop-down, then a drop-down is displayed with pre-populated fields for the user to choose from.

I started playing around in JSFiddle and came up with different prototypes to achieve this functionality using plain Javascript and then using Knockout.

The below code is the functionality implementation using pure Javascript —

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<select id="switch">
	<option value="unknown">Select Option…</option>
	<option value="invNumber">Invoice Number </option>
	<option value="subCode">Subscriber Code </option>
	</select>

	<br><br>

	<span id="invNumber-input" style="display:none"><input type="text" id="name"></span>
	<span id="subCode-dropdown" style="display:none">
	<select id="subCode">
	<option>Select SubCode</option>
	<option>AA</option>
	<option>BB</option>
	<option>CC</option>
	</select></span>

	=====================================================================================

	$("#switch").change(function () {
	switch($("#switch").val()) {
	case "invNumber":
	$("#invNumber-input").css("display", "inline")
	$("#subCode-dropdown").css("display", "none")
	break
	case "subCode":
	$("#invNumber-input").css("display", "none")
	$("#subCode-dropdown").css("display", "inline")
	break
	default:
	$("#subCode-dropdown").css("display", "none")
	$("#invNumber-input").css("display", "none")
	}
	})

	========================================================================================

view raw

Dynamic Toggle Functionality – Javascript

hosted with ❤ by GitHub

Knockout is a powerful Javascript library which provides a simple two-way data binding mechanism between your data model and UI- which means that any changes to data model is automatically reflected in the UI and similarly any changes to the UI are automatically reflected in the data model.

The below code is the implementation using KnockOut and you can see how it simplifies Javascript using declarative bindings —

	<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

	<select id="switch" data-bind="value: selectedOption">
	<option value="option">Select Option…</option>
	<option value="invNumber">Invoice Number </option>
	<option value="subCode">Subscriber Code </option>
	</select>

	<br><br>

	<span id="invNumber-input" data-bind="visible: selectedOption() == 'invNumber'">
	<input type="text" id="invNumber" placeholder = "Invoice Number">
	</span>

	<span id="subCode-dropdown" data-bind="visible: selectedOption() == 'subCode'">
	<select id="subCode">
	<option>Select SubCode</option>
	<option>AA</option>
	<option>BB</option>
	<option>CC</option>
	</select>
	</span>

	=======================================================================================

	ko.applyBindings({
	selectedOption: ko.observable()
	});

	=======================================================================================