P
CUI v1.20.1177
Demo for using the Change tracker with PCUI
<script src="~/PCUIAssets/PCUI/Elements/ChangeTracker/js/ChangeTracker.js"></script>
<link href="~/PCUIAssets/PCUI/Elements/Buttons/css/Buttons.min.css" rel="stylesheet" />
<div class="ui form" id="change-tracker-demo" v-on:submit.prevent="javascript:void(0)">
<form class="ui form">
<div class="field">
<label>First Name</label>
<input type="text" name="first-name" placeholder="First Name">
</div>
<div class="field">
<label>Last Name</label>
<input type="text" name="last-name" placeholder="Last Name">
</div>
<div class="field">
<label>Gender</label>
<div class="ui selection dropdown">
<input type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Gender</div>
<div class="menu">
<div class="item" data-value="1">Male</div>
<div class="item" data-value="0">Female</div>
<div class="item" data-value="3">Rather not say</div>
</div>
</div>
</div>
<div class="field">
<div class="ui slider checkbox">
<input type="checkbox">
<label>Activate membership</label>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox">
<label>I agree to the checking this checkbox</label>
</div>
</div>
<button class="ui button button-solid-success" type="submit" v-bind:class="{'is-disabled' : !hasChange}">Submit</button>
</form>
</div>
.is-disabled {
cursor: not-allowed;
opacity: 0.5;
}
Note: This class is only for the styling that will make the button disabled. In order to prevent the submission of the form, make a validation before the function in JS.
var changeTrackerDemoDOM = new Vue({
name: 'Change Tracker Demo',
el: '#change-tracker-demo-container',
data: {
hasChange: false
},
mounted: function () {
$('#change-tracker-demo-container .menu .item').tab();
}
});
initChangeTracker({
id: "#change-tracker-demo",
callbackFunction: function () {
changeTrackerDemoDOM.hasChange = true;
}
});
$('.ui.dropdown').dropdown();
Note: Change tracker needs two (2) options: ID of the container of the form, and the function that is needed to be done when changes are detected.
function initChangeTracker(options) {
var formID = document.querySelector(options.id + " form");
formID.addEventListener('change', function () {
options.callbackFunction();
});
formID.addEventListener('keyup', function (event) {
event = event || window.event;
if (!event.keyCode) return;
if (!new RegExp('\\b9\\b|\\b16\\b|\\b20\\b|\\b27\\b|\\b37\\b|\\b38\\b|\\b39\\b|\\b40\\b').test(event.keyCode.toString())) {
options.callbackFunction();
}
});
}