I have the following html and two functions, used to add a custom editor to a grid with a checkbox. The checkbox is displayed correctly when first bringing up the grid using the checkBoxTemplate function, but when I try to update, the checkBoxEditor function is not called, and thus I don't get a checkbox, but rather the string "checkBoxEditor". What am I doing wrong?
<div id="dependencyGrid" data-role="grid"
data-scrollable="true"
data-editable="inline"
data-sortable="true"
data-toolbar="['create']"
data-bind="source: dependencies"
data-columns="[
{ field: 'ActiveFlag', title: 'Active', width: 30, editor: 'checkBoxEditor', template: '#=checkBoxTemplate(data.ActiveFlag)#' }
]">
</div>
checkBoxEditor = function (container, options) {
if (options.model.ActiveFlag == 1)
$('<input type="checkbox" checked=checked class="chkbx activeflag" ></input> ').appendTo(container);
else
$('<input type="checkbox" class="chkbx activeflag" ></input> ').appendTo(container);
};
checkBoxTemplate = function (input) {
if (input == 1 || input == true) {
return '<input type=checkbox checked=checked class=chkbx disabled=disabled ></input>';
}
return '<input type=checkbox class=chkbx disabled=disabled ></input>';
}
This is the correct, basic way to do this. I just didn't have my checkBoxEditor function defined where it could be accessed by the html... So, it you want to set up a custom editor for a checkbox, this should work for ya.
Related
i am creating a form for searching a client, using either id or email both are set to be unique. Application made on Codeignitor.
I have created a form with two radio buttons, one for search with ID and another for search with mail+dob.
Depending on the radio button selected, corresponding input fields shown.
In controller, it choose the model function based on the radio button value.
This is I coded, i need to pass the value of radio button to Controller.php file
Form(only included the radio button)
$(document).ready(function() {
$("#usingdob").hide();
$("#usingmail").hide();
$("input:radio").click(function() {
if ($(this).val() == "id") {
$("#usingId").show();
$("#usingdob").hide();
$("#usingmail").hide();
} else {
$("#usingId").hide();
$("#usingdob").show();
$("#usingmail").show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-4">
<label class="radio-inline">
<input type="radio" name="optradio" value="id" checked>Using ID </label></div>
<div class="col-md-4">
<label class="radio-inline">
<input type="radio" name="optradio" value="mail">Using DOB</label>
</div>
I expected to get the radio button value correctlyenter image description here
JS:
$('input[name="optradio"]').click(function(){
var optradio = $(this).val();
//or
var optradio = $("input[name='optradio']:checked").val();
if(optradio == 'id'){
//do your hide/show stuff
}else{
//do your hide/show stuff
}
});
//on search button press call this function
function passToController(){
var optradio = $("input[name='optradio']:checked").val();
$.ajax({
beforeSend: function () {
},
complete: function () {
},
type: "POST",
url: "<?php echo site_url('controller/cmethod'); ?>",
data: ({optradio : optradio}),
success: function (data) {
}
});
}
Try this
<script type="text/javascript">
$( document ).ready(function() {
$("#usingdob, #usingmail").hide();
$('input[name="radio"]').click(function() {
if($(this).val() == "id") {
$("#usingId").show();
$("#usingdob, #usingmail").hide();
} else {
$("#usingId").hide();
$("#usingdob, #usingmail").show();
}
});
});
</script>
One thing I noticed is that you have 'mail' as a value in the DOB option. Another is that there seems to be 3 options and yet you only have 2 radios?
I adjusted the mail value to dob and created dummy divs to test the code. It seems to work.
$(document).ready(function() {
$("#usingdob").hide();
$("#usingmail").hide();
$("input:radio").click(function() {
console.log($(this).val());
if ($(this).val() == "id") {
$("#usingId").show();
$("#usingdob").hide();
$("#usingmail").hide();
} else {
$("#usingId").hide();
$("#usingdob").show();
$("#usingmail").show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-4">
<label class="radio-inline">
<input type="radio" name="optradio" value="id" checked>Using ID </label></div>
<div class="col-md-4">
<label class="radio-inline">
<input type="radio" name="optradio" value="dob">Using DOB</label>
</div>
<div id="usingId">
Using Id div
</div>
<div id="usingdob">
Using dob div
</div>
<div id="usingmail">
Using mail div
</div>
As far as passing the value to the controller goes, ideally the inputs should be in a form. When you submit the form, the selected value can be passed to the php.
<?php
if (isset($_POST['submit'])) {
if(isset($_POST['optradio']))
{
Radio selection is :".$_POST['optradio']; // Radio selection
}
?>
If you want to get currently checked radio button value Try below line which will return current radio button value
var radioValue = $("input[name='gender']:checked").val();
if(radioValue)
{
alert("Your are a - " + radioValue);
}
I have a simple dropdown list defined like this:
<div id="ActionMenu">
<input id="ddlActionList"
data-role="dropdownlist"
data-text-field="text"
data-value-field="value"
data-value-primitive="true"
data-bind="value: selectedAction, source: actionList"/>
</div>
And in another div I have a simple pop up window:
<div id="window"
data-role="window"
data-title="Message panel"
data-actions="['close']"
data-bind="visible: isVisible, enabled: isEnabled">
<p>Action selected: <span data-bind="text: getSelectedAction()"></span></p>
</div>
and it's all wrapped under an ActionMenu div.
this.ActionMenu = kendo.observable({
actionList: [{ text: 'Option A', value : 0 },
{ text: 'Option B', value : 1 },
{ text: 'Option C', value : 2 },
{ text: 'Option D', value : 3 }],
selectedAction: 0,
selectedActionText: function() {
// return what ?
}
}
});
My problem is that I have no way of grabbing the selected text from the Window view model:
this.MessageWindow = kendo.observable({
actions: ["Close"],
getSelectedAction: function (e) { return that.ActionMenu.get("selectedActionText"); }
});
If I do something like this:
var ddlActionList = that.kWidgetHelper.getWidgetInstance("ddlActionList");
ddlActionList.text();
That always returns the first text "Option A", not the selected one.
It would appear like an easy thing to do , but so far it's impossible for me to grab the selected text.
I also tried:
this.actionList[this.get("selectedAction")].text which produces an error.
I also tried:
selectedActionText: function(event) {
return event.sender.text();
}
Which doesn't work.
Also
selectedActionText: function() {
return that.ActionMenu.actionList[that.ActionMenu.selectedAction].text;
},
Always returns the first Option.
I believe my problem is that I am trying to get the current value of one viewmodel from another viewmodel.
Any ideas how to do that?
The text() method of the DDL should do the work if the DDL selection has changed, it should show the corresponding text.
The result should also be the same if you use the dataItem() method and then get the text property out of it.
I'm writing a custom field directive which dynamically creates an <input> field (or <select> or <textarea> etc.) based on a 'custom field' object. I only want the directive to contain the form field, not any validation or label markup. This has worked fine up until validation.
It looks like the input field isn't added to the parent scope's form when $compiled. Is there a way to add it manually? I tried FormController.$addControl() (doc), which caused the form to start listening to changes on the input model, but the form states (dirty, valid, etc.) still weren't being updated.
Markup:
<div ng-controller="FieldController">
<form name="customFieldForm">
<label class="control-label" for="{{ field.name }}">{{ field.name }}:</label>
<input-custom-field model="field"></input-custom-field>
<span class="input-error" ng-show="customFieldForm.field.$error.required">
Required</span>
</form>
</div>
Controller:
myApp.controller("FieldController", function ($scope) {
$scope.field = {
name: "Pressure in",
required: true,
readOnly: false,
type: "decimal",
value: null
};
})
Directive (abridged):
.directive('inputCustomField', ['$compile', function ($compile) {
var buildInput = function (field, ignoreRequired) {
var html = '';
var bindHtml = 'name="field" ng-model="field.value"';
if (!ignoreRequired && field.required) {
bindHtml += ' required';
}
switch (field.type) {
case "integer":
html += '<input type="number" ' + bindHtml + ' ng-pattern="/^\\d*$/">';
break;
case "decimal":
html += '<input type="number" ' + bindHtml + ' class="no-spinner">';
break;
}
return html;
};
return {
restrict: 'E',
require: '^form',
scope: {
field: "=model"
},
link: function (scope, elm, attrs, formController) {
var fieldModel;
var replacedEl;
var renderInput = function (html) {
replacedEl = $compile(html)(scope);
elm.replaceWith(replacedEl);
fieldModel = replacedEl.controller('ngModel');
if (!fieldModel) fieldModel = replacedEl.find("input").controller('ngModel');
};
if (scope.field && scope.field.type) {
var html = buildInput(scope.field, attrs.hasOwnProperty("ignoreRequired"));
renderInput(html);
}
}
};
}])
Also see the fiddle.
I have the following code and it works fine, EXCEPT when you clear the property after you have inserted an item. The error shows up right away.
ko.validation.configure({
insertMessages: false,
decorateElement: true,
errorElementClass: 'error'
});
FirstName: ko.observable().extend({
required: true
}),
and I have add method in the knockout viewmodel
addItem: function () {
if (!viewModel.isValid()) {
viewModel.errors.showAllMessages();
return false;
} else {
//DO SOMETHING
this.SomeCollection.push(newInterviewee);
this.FirstName(null);
}
},
I have the following in the HTML:
<div>
<label>First Name</label>
<input data-bind="value: FirstName, validationElement: FirstName, valueUpdate: 'keyup'" class="input" type="text">
</div>
<div>
<div>
<input data-bind="click: addItem" class="button" type="button">
</div>
The problem is that after I call this.FirstName(null). The error shows up right away! I want the error to show up only when they press the button even after the property is cleared
Here is the solution that is provided by Steve Greatrex: https://github.com/Knockout-Contrib/Knockout-Validation/issues/210
We had the same issue on our project. We solved this by forcing isValid to true.
addItem: function () {
if (!viewModel.isValid()) {
viewModel.errors.showAllMessages();
return false;
} else {
//DO SOMETHING
this.SomeCollection.push(newInterviewee);
this.FirstName(null);
viewModel.isValid(true);
}
},
To be able to do this, you need to overwrite ko.validation's definition for the isValid computed as follows:
observable.isValid = ko.computed({
read: function() {
return observable.__valid__();
},
write: observable.__valid__
}
);
I'm using the asmselect plugin to allow users to select & order multiple items from a select box.
I only want to enable the submit button when the user has made a change. The following works, but change does not get called when sorting the selected elements:
<script type="text/javascript">
$(document).ready(function() {
$("select[multiple]").asmSelect({
addItemTarget: 'bottom',
highlight: false,
hideWhenAdded: true,
sortable: true
});
// track changes with our own event
$("#mySelect").change(function(e, data) {
$("#submit").removeAttr("disabled");
// if it's a sort or an add, then give it a little color animation to highlight it
if (data.type != 'drop') data.item.animate({ 'backgroundColor': '#ffffcc' }, 20, linear', function() {
data.item.animate({ 'backgroundColor': '#dddddd' }, 500);
});
});
});
</script>
The select & submit:
<select id="mySelect" multiple="multiple" name="mySelect[]" title="Select Elements">
<% foreach (var item in Model)
{ %>
<option <%= item.Selected ? "selected=selected" : "" %> value="<%= Html.Encode(item.ID) %>">
<%= Html.Encode(item.Text) %></option>
<% } %>
</select>
<input type="submit" value="Save" id="submit" disabled="disabled" />
How can I enable the submit when selected elements are sorted?
You need to change asm function as below:
function makeSortable()
{
// make any items in the selected list sortable
// requires jQuery UI sortables, draggables, droppables
$ol.sortable({
items: 'li.' + options.listItemClass,
handle: '.' + options.listItemLabelClass,
axis: 'y',
update: function(e, data)
{
var updatedOptionId;
$(this).children("li").each(function(n)
{
//$option = $('#' + $(this).attr('rel'));
// i'm not sure what this is here for as the return will break ordering
//if($(this).is(".ui-sortable-helper"))
{
// updatedOptionId = $option.attr('id');
// return;
//
}
//$original.append($option);
$original.append($('#' + $(this).attr('rel')));
});
//we want to trigger change event always, even if it is only the order that has been changed.
//if(updatedOptionId) triggerOriginalChange(updatedOptionId, 'sort');
triggerOriginalChange(updatedOptionId, 'sort');
}
}).addClass(options.listSortableClass);
}
It seems that with older versions of jquery/jquery-ui, an additional event was triggered for an item with ui-sortable-helper attribute. It
Try my updated version of asmselect. See code and example here