We Keep Coding

how to display datatable values in input type date within a modal

When the modal is toggled, the values from the datatable are not displayed in the date inputs on the modal. It displays mm/dd/yyyy. This works if the input type is text or number but I would like it to work for date elements. The dates in the table are 0000-00-00 format. I think I understand why this doesn't work, the value of the date input element isn't getting set. I left much of the modal code off this post for brevity. How can I set the value of the date input to the value from the datatable? or is there a better way to go about getting the values from the datatable into the modal?
<table id="safety" class="display cell-border" style="WIDTH:100%;display:none;"></table>
<div class="modal-body" style="text-align: center;">
<form>
<div class="form-group" style="width:auto;display:inline-block;"><label>FIRST_AID_TRAINING</label><input type="date" data-src="FIRST_AID_TRAINING" class="form-control"></div>
<div class="form-group" style="width:auto;display:inline-block;"><label>FAT_RECERTIFY</label><input type="date" data-src="FAT_RECERTIFY" class="form-control"></div>
<div class="form-group" style="width:auto;display:inline-block;"><label>AERIAL_LIFT_TRAINING</label><input type="date" data-src="FORKLIFT_CERTIFIED" class="form-control"></div>
<div class="form-group" style="width:auto;display:inline-block;"><label>ALT_RECERTIFY</label><input type="date" data-src="CRANE_OPERATION_SAFETY" class="form-control"></div>
<div class="form-group" style="width:auto;display:inline-block;"><label>BLOOD_PATHOGENS</label><input type="date" data-src="5S_TRAINING" class="form-control"></div>
<div class="form-group" style="width:auto;display:inline-block;"><label>ELECTRICAL_SAFETY_TRAINING</label><input type="date" data-src="CRANE_SLING" class="form-control"></div>
<div class="form-group" style="width:auto;display:inline-block;"><label>EST_RECERTIFY</label><input type="date" data-src="FIRST_AID_TRAINING" class="form-control"></div>
<div class="form-group" style="width:auto;display:inline-block;"><label>FORKLIFT_TRAINING</label><input type="date" data-src="FAT_RECERTIFY" class="form-control"></div>
<div class="form-group" style="width:auto;display:inline-block;"><label>FORKLIFT_TRAINING_RECERT</label><input type="date" data-src="FORKLIFT_CERTIFIED" class="form-control"></div>
<div class="form-group" style="width:auto;display:inline-block;"><label>LOCKOUT_TAGOUT</label><input type="date" data-src="CRANE_OPERATION_SAFETY" class="form-control"></div>
<div class="form-group" style="width:auto;display:inline-block;"><label>LOCKOUT_TAGOUT_AUDIT</label><input type="date" data-src="5S_TRAINING" class="form-control"></div>
<div class="form-group" style="width:auto;display:inline-block;"><label>MECH_PWR_PRESS</label><input type="date" data-src="CRANE_SLING" class="form-control"></div>
<div class="form-group" style="width:auto;display:inline-block;"><label>OCC_NOISE_EXPOSURE</label><input type="date" data-src="FIRST_AID_TRAINING" class="form-control"></div>
<div class="form-group" style="width:auto;display:inline-block;"><label>CRANE_HOIST</label><input type="date" data-src="FAT_RECERTIFY" class="form-control"></div>
<div class="form-group" style="width:auto;display:inline-block;"><label>OVRHEAD_CRANE_RECERTIFY</label><input type="date" data-src="FORKLIFT_CERTIFIED" class="form-control"></div>
<div class="form-group" style="width:auto;display:inline-block;"><label>PORT_FIRE_EXT</label><input type="date" data-src="CRANE_OPERATION_SAFETY" class="form-control"></div>
<div class="form-group" style="width:auto;display:inline-block;"><label>RESP_PROTECT_FIT_TST</label><input type="date" data-src="5S_TRAINING" class="form-control"></div>
<div class="form-group" style="width:auto;display:inline-block;"><label>RESP_PROTECT_ASSIGNMEN</label><input type="date" data-src="CRANE_SLING" class="form-control"></div>
<div class="form-group" style="width:auto;display:inline-block;"><label>3M_RESP_RECERTIFY</label><input type="date" data-src="CRANE_OPERATION_SAFETY" class="form-control"></div>
<div class="form-group" style="width:auto;display:inline-block;"><label>SCISSOR_LIFT</label><input type="date" data-src="5S_TRAINING" class="form-control"></div>
<div class="form-group" style="width:auto;display:inline-block;"><label>SCISSOR_LIFT_RECERTIFY</label><input type="date" data-src="CRANE_SLING" class="form-control"></div>
</form>
</div>
$('#safety').on('click', '.edit', function(){
//get clicked row
const rowClicked = train.row($(this).closest('tr'));
//populate edit form with row data by corresponding
//rowClicked property based on 'data-src' attribute
$.each($('#safety_editform input'), function(){
$(this).val(rowClicked.data()[$(this).attr('data-src')]);
});
//set modal attribute rowindex to corresponding row index
$('#safety_editform').attr('rowindex', rowClicked.index());
//open up edit form modal
$('#safety_editform').modal('toggle');
});
Datatable:
train = $('#safety').DataTable({
ajax:{//send workcenter to test.php where the proper query is run
type: 'post',
url: 'test.php',
dataType: 'json',
dataSrc: '', //this fixes the error -> can't access property "length", k is undefined
data: function (d){
d.Wrkgrp = 'Safe';
}
},
createdRow: (tr, _,rowIndex) => $(tr).attr('rowIndex',rowIndex),//creates the rows of the table based on how many records there are in the query.
columns:[ //set the column options, what data to look for in the returned data.
{data: 'NAME', title: 'Name',width:'8%'},
{data: 'FIRST_AID_TRAINING', title: 'First Aid Training'},
{data: 'FAT_RECERTIFY', title: 'First Aid Training Recertify'},
{data: 'AERIAL_LIFT_TRAINING', title: 'Aerial Lift Training'},
{data: 'ALT_RECERTIFY', title: 'Aerial Lift Training Recertify'},
{data: 'BLOOD_PATHOGENS', title: 'Bloodborne Pathogens'},
{data: 'ELECTRICAL_SAFETY_TRAINING', title: 'Electrical Safety Training'},
{data: 'EST_RECERTIFY', title: 'Electrical Safety Training Recertify'},
{data: 'FORKLIFT_TRAINING', title: 'Forklift Training'},
{data: 'FORKLIFT_TRAINING_RECERT', title: 'forklift Training Recertify'},
{data: 'LOCKOUT_TAGOUT', title: 'lockout Tagout'},
{data: 'LOCKOUT_TAGOUT_AUDIT', title: 'Lockout Tagout Audit'},
{data: 'MECH_PWR_PRESS', title: 'Mechanical Power Press'},
{data: 'OCC_NOISE_EXPOSURE', title: 'Occupational Noise Exposure '},
{data: 'CRANE_HOIST', title: 'Overhead & Jib Crane / Hoist Operator Training'},
{data: 'OVRHEAD_CRANE_RECERTIFY', title: 'Overhead Crane Training'},
{data: 'PORT_FIRE_EXT', title: 'Portable Fire Extinguisher'},
{data: 'RESP_PROTECT_FIT_TST', title: 'Respiratory Protection Annual Fit Test'},
{data: 'RESP_PROTECT_ASSIGNMEN', title: 'Respiratory Protection Assignment'},
{data: '3M_RESP_RECERTIFY', title: '3M Respiratory Recertify'},
{data: 'SCISSOR_LIFT', title: 'Scissor Lift'},
{data: 'SCISSOR_LIFT_RECERTIFY', title: 'Scissor Lift Recertify', render: function (data,type,row,meta) {return data+' <i class="edit fa fa-pencil"></i>';}}
],
pageLength: 50, // set max results in the table
columnDefs: [
{className: 'dt-head-center', targets: '_all'} //make all data centered within the table
],
autoWidth: false // do not allow the table to determine the cell width
});

How show diff. HTML based on property in angularjs?

I have a collection of objects that are of types: text, selectoptions and multiselectoptions. I need to display them as editable inputs based on their type.
For example, a text object:
<input type="text" name="caption" value="{{option.value}}" />
A selectoption/multiselectoptions:
<div ng-repeat="value in option.values">
<input type="text" name="{{option.id}}[value][{{value.id}}]" value="{{value.value}}" />
<input type="text" name="{{option.id}}[caption][{{value.id}}]" value="{{value.caption}}" />
</div>
Is this the correct way to do this? Is there a better way to represent it?
Example of the JSON objects:
FORM: {
options: [
{
type: "select",
values: [
{
value: 0,
caption: "Some option"
},
{
value: 1,
caption: "Some other option"
}
]
},
{
type: "text",
caption: "Some text item"
}
]
}

You could use ng-if to display the correct form element based on your model. Here is an example in plunker based on your code.
<form novalidate class="simple-form">
<div ng-repeat="field in FORM.options">
<input type="text" ng-model='field.caption' ng-if="field.type == 'text'" /><br />
<div ng-if="field.type != 'text'">
<div ng-repeat="value in field.values">
Option: <input type="text" name="{{option.id}}[value][{{value.id}}]" value="{{value.value}}" /><br/>
Caption: <input type="text" name="{{option.id}}[caption][{{value.id}}]" value="{{value.caption}}" /><br/>
</div>
</div>
</div>
<button ng-click="submit()">Save</button>
</form>
I check the type field.type and display different HTML in the main ng-repeat.
The app assign your model to FORM:
$scope.FORM = {
options: [
{
type: "select",
values: [
{
value: 0,
caption: "Some option"
},
{
value: 1,
caption: "Some other option"
}
]
},
{
type: "text",
caption: "Some text item"
}
]
};
I also added a submit button that display the model in the Javascript console, so you can see that the data is being updated when you change the values:
<button ng-click="submit()">Save</button>

Try ng-switch which will switch to corresponding HTML based on the type from the JSON.
<div ng-repeat="opt in FORM.options" ng-switch on="opt.type">
<select ng-switch-when="select">
<option ng-repeat="val in opt.values" value='{{val.value}}'>{{val.caption}}</option>
</select>
<input type="text" ng-model="opt.caption" ng-switch-when="text"/>
</div>
Add more MultiSelect types with ng-switch-when = "multiselect". If the type is not specified, set a ng-switch-default to default html.
Working Plunker

How to hide content with ng-if and a checkbox that's inside a ng-repeat and it's ng-model is an array

I have a list of checkboxes that are created using a ng-repeat, I use those checkboxes to get the IDs of the objects that are inside a list, these objects have a name property and a id property.
this is a object inside my categoryList
category = {
idCategory: 2,
name: 'myName'
};
And this is how I declare my checkboxes.
<div class="form-group">
<label>Select a category</label>
<label class="checkbox-inline" ng-repeat="category in categoryList">
<input type="checkbox" ng-model="idsCategory[category.idCategory]"> {{category.name}}
</label>
</div>
and then in my controller I get the ids like this
var categories= $scope.categoryList;
var idsSelected = [];
//get selected ids
for (var idCategory in categories) {
if (categories.hasOwnProperty(idCategory )) {
if (categories[idCategory ] === true) {
idsSelected .push(idCategory);
}
}
}
but now I want to hide and show some inputs in my HTML, if the user selects a category like "support" I want to show some inputs, but I don't know what condition put inside my ng-if since I declare my checkboxes ng-model like an array of ids like this ng-model="idsCategory[category.idCategory]"
how can I put my ng-if to hide the inputs I tried this but this doesn't work
<div id="b" ng-if="idsCategory.category.name=='Support'">
<div class="form-group">
<label>Support hours:</label>
<input class="form-control" placeholder="support houres">
</div>
</div>

Edited:
If we have HTML:
<div class="form-group">
<label>Select a category</label>
<label class="checkbox-inline" ng-repeat="category in categoryList">
<input type="checkbox" ng-model="idsCategory[category.idCategory]"> {{category.name}}
</label>
</div>
Conroller:
$scope.idsCategory = {};
$scope.categoryList = [{
idCategory: 1,
name: 'categoryA'
}, {
idCategory: 2,
name: 'recreation'
}, {
idCategory: 3,
name: 'develop'
}, {
idCategory: 4,
name: 'Support'
}];
Then we can use following ng-show:
<div id="b" ng-show="idsCategory[4]">
<div class="form-group">
<label>Support hours:</label>
<input class="form-control" placeholder="support houres">
</div>
</div>
See jsfiddle
In checkbox input we have ng-model="idsCategory[category.idCategory]", so idsCategory[4] stores info if category with idCategory = 4 is checked. That's why element with ng-show="idsCategory[4]" will be shown if category with idCategory = 4 is checked.

HTML form skips required fields

When I press submit on my HTML code I get access to the javascript even if I haven't entered the required field "Email". But I see the litte "you need to fill this" popup for 0.5 seconds just before it sends me to the script. What do I need to do? Seems like it's a problem in jquery maybe?
Haris.
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail" class="col-sm-3 control-label">Epost :</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="inputEmail" placeholder="Epost" required="required">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-3">
<button type="submit" href="javascript:;" class="simpleCart_checkout">
<img src="/images/bla.png" alt="Kort">
</button>
</div>
</div>
</form>
this form is in the checkout. At the bottom (payson image)
Called javascript:
simpleCart({
currency: "SEK",
checkout: {
type: "SendForm",
url: "http://bla.com/checkout.php",
method: "POST",
currency: "SEK"
},
shippingCustom: function () {
if (simpleCart.total() > 4500) {
return 0;
} else {
return 0;
}
},
cartStyle: "table",
cartColumns: [
/* Picture (same for every product right now) */
/* Name */
{ attr: "name", label: "Produkt" },
{ view: "decrement", label: "Minska" },
{ attr: "quantity", label: "Kvantitet" },
{ view: "increment", label: "Höj" },
/* Price */
{ attr: "price", label: "Pris", view: 'currency' },
{ attr: "total", label: "SubTotal", view: 'currency' },
/* Remove */
{ view: "remove", text: "Ta bort", label: false }
]
});
simpleCart.bind('beforeCheckout', function (data) {
data.email = document.getElementById("inputEmail").value;
});

try to replace this line:
<input type="email" class="form-control" id="inputEmail" placeholder="Epost" required="required">
with this:
<input type="email" class="form-control" id="inputEmail" placeholder="Epost" required />

ng-disabled in Angular validation not working as expected

http://plnkr.co/edit/9Yq6aZHtKCuZMtPbjBIN?p=preview
I've tried and tried to get this to work but I've had no luck. I'm trying to disable the submit button using angularJS and the built in validation function. What I find is that when you first load the form, the submit button is active--not disabled!
I've tested and tried and I've found that my validation code accepts an empty string / null string in the Team Name, despite me requiring the input.
Does anyone know how to format this correctly? The ONLY way I've gotten it to work is to fudge the data with replacing an empty string with a single space...in production this is unacceptable...
Here is the index.html:
<body ng-controller="EnterController as enter">
<div class="panel panel-primary">
<div class="panel-body">
<form name="enterFormNew" ng-submit="enter.TeamNameNext()" autocomplete="off" novalidate>
<div class="row">
<div class="col-xs-8 col-md-6">
<div class="form-group">
<label for="teamname">Team Name</label>
<input name="TeamName" ng-required ng-minlength="2" ng-maxlength="40" ng-model="enter.Team.Name" type="text" id="teamname" class="form-control" />
<p ng-show="enterFormNew.TeamName.$touched && enterFormNew.TeamName.$invalid">This is not a valid team name.</p>
</div>
<div class="form-group">
<label for="division">Division</label>
<select name="selectDivision" ng-required ng-model="enter.Team.Division" id="division" class="form-control" ng-options="division.Name for division in enter.Divisions track by division.Id ">
<option value="">Select...</option>
</select>
<p ng-show="enterFormNew.selectDivision.$touched && enterFormNew.selectDivision.$invalid">A valid Division needs to be selected.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-2">
<button type="submit" class="btn btn-primary" ng-disabled="enterFormNew.$invalid">Next</button>
</div>
</div>
</form>
</div>
</div>
</body>
And here is the app.js:
angular.module('Enter', [])
.controller("EnterController", [
function() {
this.RegistrationPhase = 0;
this.Divisions = [{ Id: 1,Name: "Normal"}, {Id: 2,Name: "Not Normal"}];
this.Team = { Name: "", ResumeKey: null, Division: { Id: -1 }, Players: []};
this.TeamNameNext = function() {
//Code removed
alert("Made it to the submit function!")
};
}
]);

the attribute ng-required requires a value. Don't get confused with HTML5 attribute required that doesn't require a value.
ng-required="true"

Because "Team.Division" is not undefined in your controller code.
If you could use the code below, you will get what you extected.
this.Team = { Name: "", ResumeKey: null, Division: undefined, Players: []};
You can use null or "" instead of undefined.