DataTables warning: Requested unknown parameter '4' from the data source for row '' - datatables

Are Days and days that I'm looking for this problem, but nothing resolved it!
This warning appear after the add of a Student to my Database. The persist of the Data is Ok, so i need to hide this error or adjust it.
So i have a Datables that give me this error:
This is my html code:
<script type="text/javascript">
$(document).ready(function () {
$("#companies").dataTable({
"bServerSide": true,
"sAjaxSource": "/studentiSource",
"bProcessing": true,
"sPaginationType": "full_numbers",
"bJQueryUI": true,
"aoColumns": [
{ "sName": "ID", "mDataProp": null,
"bSearchable": false,
"bSortable": false,
"bVisible": false
},
{ "sName": "NOME",},
{ "sName": "COGNOME"},
{ "sName": "USERNAME"},
{ "sName": "PASSWORD" },
{ "fnRender": function (oObj) {
console.log(oObj);
return '<a href=${pageContext.request.contextPath}/modificaStudente.jsp?id=' + oObj.aData[0] + '>' + 'Gestisci' + '</a>';
}}
]
}).makeEditable({
sUpdateURL : "/updateStudenti" ,
sAddURL: "/studenteServlet",
sDeleteURL: "/deleteStudenti",
fnShowError: function (message, action) {
switch (action) {
case "update":
jAlert(message, "Update failed");
break;
case "delete":
jAlert(message, "Delete failed");
break;
case "add":
$("#lblAddError").html(message);
$("#lblAddError").show();
break;
}
},
fnStartProcessingMode: function () {
$("#processing_message").dialog();
},
fnEndProcessingMode: function () {
$("#processing_message").dialog("close");
}
});
});
And the table is:
<div id="container">
<div id="demo_jui">
<button id="btnAddNewRow" value="Ok">Aggiungi nuovo studente...</button>
<button id="btnDeleteRow" value="cancel">Rimuovi utente selezionato</button>
<div id="processing_message" style="display:none" title="Processing">Attendere.. Caricamento dati in corso</div>
<table id="companies" class="display">
<thead>
<tr>
<th>ID</th>
<th>Nome</th>
<th>Cognome</th>
<th>Username</th>
<th>Password</th>
<th>Dispense</th>
</tr>
</thead>
<tbody >
</tbody>
</table>
</div>
<form id="formAddNewRow" action="#" title="Aggiungi nuovo studente">
<label id="lblAddError" style="display:none" class="error"></label>
<input type="hidden" id="id" name="id" value="-1" rel="0" />
<input type="hidden" value="aggiungi" name="action">
<label for="name">Nome</label><input type="text" name="nome" id="name" class="required" rel="1" />
<br />
<label for="name">Cognome</label><input type="text" name="cognome" id="address" rel="2" />
<br />
<label for="name">Username</label><input type="text" name="username" id="postcode"/>
<br />
<label for="name">Password</label><input type="text" name="password" id="town" rel="3"/>
<br />
</form>
</div>
I'm using Datatables 1.9.4

I cant give you a definitive answer, since you did not include the JSON response from the server.
This message usally means that DataTables is looking at your data source for array position 4 (which is the fifth element -- the password field) and not finding it.
You should make sure that you are returning a response with all the fields specified in the datatables definition, including the password field.

The sixth element of your JSON array doesn't contain the value for key '4' because you're fetching a null value, try to parse your JSON array to http://jsoneditoronline.org/ and you'll see it.

Related

Hide elements in a Datatables.net table, based on data in another column

I have a datatable where I recently changed to using the AJAX data source approach.
It works a treat.
I have added three buttons to the first column (works, no problem) and now I want to conditionally display / hide the third button based on the data in another column. I don't want to display the third button if data: PublishStatus = "No shifts created"
I have looked at: https://datatables.net/examples/basic_init/data_rendering.html
but cannot wrap my head around what is needed to twist it to my situation, since the condition is based on a column other than the one that i am using. I could see how to do it if i was placing the button in the PublishStatus column
"ajax": "dt-data_list_wo.asp?mf=d",
"columns": [
{"data": "GUID" , render : function ( data, type, row, meta ) {
return type === 'display' ?
'<span style="display: inline-block;"><form method="POST" action="requestwo.asp"><input type="hidden" name="itemGUID" value="'+ data +'"/><input type="hidden" name="action" value="wodetails" /><button type="submit" class="btn btn-fill btn-info" style="margin-right: 5px">Details</button></form></span><span style="display: inline-block;"><form method="POST" action="prepub.asp"><input type="hidden" name = "itemguid" value = "' + data + '"><input type="hidden" name="action" value="view" /><input type="hidden" name="backlink" value="listwo.asp"/><button type="submit" class="btn btn-fill btn-warning" style="margin-right: 5px">View RS</button></form></span><span style="display: inline-block;"><form method="POST" action="prepub.asp"><input type="hidden" name = "itemguid" value = "' + data + '"><input type="hidden" name="action" value="publish_shifts" /><button type="submit" class="btn btn-fill btn-danger">Publish</button></form></span>': data;
}},
{ "data": "PublishStatus" },
{ "data": "orgname" },
{ "data": "woref" },
{ "data": "weeknum" },
{ "data": "startdate" },
{ "data": "client_po" },
{ "data": "work_desc" }
],
So, thanks to andrewjames, the solution involved a couple of changes to my original code - i have commented out the parts that prevented it from working and the if clause with row.PublishStatus really did the trick. Made my weekend!
"ajax": "dt-data_list_wo.asp?mf=d",
"columns": [
{"data": "GUID" , render : function ( data, type, row, meta ) {
//return type === 'display' ?
if (row.PublishStatus == "All shifts published" || row.PublishStatus == "No shifts created yet") {
return '<span style="display: inline-block;"><form method="POST" action="requestwo.asp"><input type="hidden" name="itemGUID" value="'+ data +'"/><input type="hidden" name="action" value="wodetails" /><button type="submit" class="btn btn-fill btn-info" style="margin-right: 5px">Details</button></form></span><span style="display: inline-block;"><form method="POST" action="prepub.asp"><input type="hidden" name = "itemguid" value = "' + data + '"><input type="hidden" name="action" value="view" /><input type="hidden" name="backlink" value="listwo.asp"/><button type="submit" class="btn btn-fill btn-warning" style="margin-right: 5px">View RS</button></form></span>'//: data;
} else {
return '<span style="display: inline-block;"><form method="POST" action="requestwo.asp"><input type="hidden" name="itemGUID" value="'+ data +'"/><input type="hidden" name="action" value="wodetails" /><button type="submit" class="btn btn-fill btn-info" style="margin-right: 5px">Details</button></form></span><span style="display: inline-block;"><form method="POST" action="prepub.asp"><input type="hidden" name = "itemguid" value = "' + data + '"><input type="hidden" name="action" value="view" /><input type="hidden" name="backlink" value="listwo.asp"/><button type="submit" class="btn btn-fill btn-warning" style="margin-right: 5px">View RS</button></form></span><span style="display: inline-block;"><form method="POST" action="prepub.asp"><input type="hidden" name = "itemguid" value = "' + data + '"><input type="hidden" name="action" value="publish_shifts" /><button type="submit" class="btn btn-fill btn-danger">Publish</button></form></span>'//: data;
}
}},
{ "data": "PublishStatus" },
{ "data": "orgname" },
{ "data": "woref" },
{ "data": "weeknum" },
{ "data": "startdate" },
{ "data": "client_po" },
{ "data": "work_desc" }
],

Vuejs2- Avoid repetition of select field options using vee-validate

Iam using vee-validate plugin for validation. In my form, there is a select field in the table. Rows will be added dynamically in the table. I don't want to select the same select(Description column) option again and again Image. Hence I want to throw an error like "Selected description already exists in a table" this using vee-validate. Kindly help me to solve this.
Here is my code:
<template>
<div>
<b-card>
<div class="panel-body" id="app">
<table class="table table-hover">
<thead>
<tr>
<th style="width: 20px;">No.</th>
<th style="width: 330px;">Description</th>
<th style="width: 130px;" class="text-right">Charges</th>
<th style="width: 130px;">Total</th>
<th style="width: 130px;"></th>
</tr>
</thead>
<tbody>
<tr v-for="(row, index) in rows" :key="row.qty">
<td>
{{ index +1 }}
</td>
<td>
<select class="form-control" v-model="row.billChgDesc" v-validate="'required|check'" :name="'billChgDesc' + index" data-vv-as="Description" #change="checkRepetation">
<option v-for="option in billChgDescOpt" v-bind:value="option.value"
:key="option.value"> {{ option.text }}
</option>
</select>
<span v-show=" errors.has('billChgDesc' + index)" class="is-danger">{{ errors.first('billChgDesc' + index) }}</span>
</td>
<td>
<input class="form-control text-right" type="text" v-model="row.charges" data-type="currency" v-validate="'required'" :name="'charges' + index" data-vv-as="Charges" >
<span v-show=" errors.has('charges' + index)" class="is-danger">{{ errors.first('charges' + index) }}</span>
<td>
<input class="form-control text-right" :value="row.qty * row.charges" number readonly />
<input type="hidden" :value="row.qty * row.charges * row.tax / 100" number/>
</td>
<td>
<button class="btn btn-primary btn-sm" #click="addRow(index)"><i class="fa fa-plus"></i></button>
<button class="btn btn-danger btn-sm" #click="removeRow(index)"><i class="fa fa-minus"></i></button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" class="text-right">TOTAL</td>
<td colspan="1" class="text-right"><input class="form-control text-right" v-model="delivery" number/></td>
<td></td>
</tr>
</tfoot>
</table>
</div>
</b-card>
</div>
</template>
<script>
import Vue from 'vue'
import accounting from 'accounting'
export default {
data: function () {
return {
billChgDescOpt: [
{ value: '', text: 'Select' },
{ value: 'M', text: 'Maintenance Fee'},
{ value: 'W', text: 'Water Charges'},
{ value: 'P', text: 'Penalty Fee'},
],
rows: [
{qty: 5, billChgDesc: '', charges: 55.20, tax: 10},
{qty: 19, billChgDesc: '', charges: 1255.20, tax: 20},
],
grandtotal: 0,
delivery: 40,
selectArr:[]
}
},
methods: {
addRow: function (index) {
try {
this.rows.splice(index + 1, 0, {});
} catch(e)
{
console.log(e);
}
},
removeRow: function (index) {
this.rows.splice(index, 1);
},
checkRepetation:function(){
this.$validator.extend('check', {
getMessage: field => '* Slected ' + field + ' already exists',
validate: function(value){
selectArr.push(value);
}
})
}
}
}
</script>
<style lang="scss" scoped>
.is-danger{
color: RED;
}
</style>
Thanks in advance.
You're on the right track, but a couple changes need to be made. When you call this.$validator.extend, that only needs to be done once - when your component is created. It attaches the check method to the validator, so then every time you have the attribute v-validate="'required|check'" in your HTML, it will run that check method.
In your check validator, you need to answer the question "is this value already selected". The answer is to go through the this.rows and see if any of them have the same billChgDesc property. Because this is in Vue, by the time the validator gets run, the row in question already does have that value, so you want to check if MORE than one row have that value. So, something like this:
mounted() {
var self = this;
this.$validator.extend('check', {
getMessage: field => '* Selected ' + field + ' already exists',
validate: function(value){
return (self.rows.filter(function(v){
return v.billChgDesc == value;
}).length <= 1);
}
});
}
This validator returns true if only one item has the given value. I'm using the built-in filter method of Array (see docs).
You can see an example of this all working here: https://jsfiddle.net/ryleyb/f9q50wx4/1/

Use vee-validate to validate select list with radio button exchange not show up validate message

I have a form use radio to exchange select lists but the validate message seems not to work correctly.
this is my form and the TypeA validate message does work:
but when I change radio button to TypeB the validate message does not work:
and also if I click submit button and if TypeA validate is not correct and I change to TypeB to submit it, the validation will not pass because it looks like vee-validate only validated TypeA...
And here is my code:
<form id="form" #submit.prevent="validateBeforeSubmit">
<label>Type A</label>
<input type="radio" v-model="Type" value="TypeA" />
<label>Type B</label>
<input type="radio" v-model="Type" value="TypeB" />
<table>
<tr v-if="Type==='TypeA'">
<td>
<select v-model="TypeA" v-validate="'required|not_in:Choose'" name="TypeA">
<option v-for="option in TypeAOptions" v-bind:value="option.value">
{{ option.value }}
</option>
</select>
<span v-if="errors.has('TypeA')">
{{ errors.first('TypeA')}}
</span>
</td>
</tr>
<tr v-if="Type==='TypeB'">
<td>
<select v-model="TypeB" v-validate="'required|not_in:Choose'" name="TypeB">
<option v-for="option in TypeBOptions" v-bind:value="option.value">
{{ option.value }}
</option>
</select>
<span v-if="errors.has('TypeB')">
{{ errors.first('TypeB')}}
</span>
</td>
</tr>
</table>
<button type="submit">Submit</button>
</form>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vee-validate#latest/dist/vee-validate.js"></script>
<script>
Vue.use(VeeValidate);
var form = new Vue({
el: '#form',
data: {
Type: 'TypeA',
TypeA: 'Choose',
TypeAOptions: [{
value: 'Choose'
},
{
value: 'A',
},
{
value: 'B'
},
{
value: 'C'
},
{
value: 'D'
}
],
TypeB: 'Choose',
TypeBOptions: [{
value: 'Choose'
},
{
value: '1'
},
{
value: '2'
},
{
value: '3'
},
{
value: '4'
}
],
},
methods: {
validateBeforeSubmit() {
this.$validator.validateAll().then((result) => {
if (result) {
alert("Submit Success");
return;
}
alert("Correct them errors!");
});
}
}
})
</script>
I don't know how to fix this problem, can someone help me?
Use v-show instead v-if to watch changes, because v-if add/remove dom element and vee-validate checks in DOM.
<form id="form" #submit.prevent="validateBeforeSubmit">
<label>Type A</label>
<input v-on:change="changeType" type="radio" v-model="Type" value="TypeA" />
<label>Type B</label>
<input v-on:change="changeType" type="radio" v-model="Type" value="TypeB" />
<table>
<tr v-show="Type==='TypeA'">
<td>
<select v-model="TypeA" v-validate="'required|not_in:Choose'" name="TypeA">
<option v-for="option in TypeAOptions" v-bind:value="option.value">
{{ option.value }}
</option>
</select>
<span v-if="errors.has('TypeA')">
{{ errors.first('TypeA')}}
</span>
</td>
</tr>
<tr v-show="Type==='TypeB'">
<td>
<select v-model="TypeB" v-validate="'required|not_in:Choose'" name="TypeB">
<option v-for="option in TypeBOptions" v-bind:value="option.value">
{{ option.value }}
</option>
</select>
<span v-if="errors.has('TypeB')">
{{ errors.first('TypeB')}}
</span>
</td>
</tr>
</table>
<button type="submit">Submit</button>
</form>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vee-validate#latest/dist/vee-validate.js"></script>
<script>
Vue.use(VeeValidate);
var form = new Vue({
el: '#form',
data: {
Type: 'TypeA',
TypeA: 'Choose',
TypeAOptions: [{
value: 'Choose'
},
{
value: 'A',
},
{
value: 'B'
},
{
value: 'C'
},
{
value: 'D'
}
],
TypeB: 'Choose',
TypeBOptions: [{
value: 'Choose'
},
{
value: '1'
},
{
value: '2'
},
{
value: '3'
},
{
value: '4'
}
],
},
computed:{
},
methods: {
changeType:function(){
this.errors.clear();
},
validateBeforeSubmit() {
this.$validator.validate(this.Type).then((result) => {
if (result) {
alert("Submit Success");
return;
}
alert("Correct them errors!");
});
}
}
})
</script>
Also you are validating all fields means at the time both dropdown is validating.
To make it work. Means to validate only one dropdown at a time I changed this line.
From
this.$validator.validateAll()
To
this.$validator.validate(this.Type)
This answer is just to update a few changes that need to be made to Niklesh Raut's answer, which was the original answer and correctly answered the question at that time.
Since that time vee-valdiate has been updated to V3.0 so the cdn for vee-validate needs to be specified to a recent version of V2.0. Also the vee-validate rule "not_in" was renamed to "excluded" as per this link: https://github.com/logaretm/vee-validate/issues/1351 .
So these minor changes will get Niklesh Raut's code running again. Many thanks to him and
the OP for the answer and question respectively. Consider up-voting their answer and question if you find this useful (as they have done the heavy lifting here).
<form id="form" #submit.prevent="validateBeforeSubmit">
<label>Type A</label>
<input v-on:change="changeType" type="radio" v-model="Type" value="TypeA" />
<label>Type B</label>
<input v-on:change="changeType" type="radio" v-model="Type" value="TypeB" />
<table>
<tr v-show="Type==='TypeA'">
<td>
<select v-model="TypeA" v-validate="'required|excluded:Choose'" name="TypeA">
<option v-for="option in TypeAOptions" v-bind:value="option.value">
{{ option.value }}
</option>
</select>
<span v-if="errors.has('TypeA')">
{{ errors.first('TypeA')}}
</span>
</td>
</tr>
<tr v-show="Type==='TypeB'">
<td>
<select v-model="TypeB" v-validate="'required|excluded:Choose'" name="TypeB">
<option v-for="option in TypeBOptions" v-bind:value="option.value">
{{ option.value }}
</option>
</select>
<span v-if="errors.has('TypeB')">
{{ errors.first('TypeB')}}
</span>
</td>
</tr>
</table>
<button type="submit">Submit</button>
</form>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vee-validate#2.2.15/dist/vee-validate.js"></script>
<script>
Vue.use(VeeValidate);
var form = new Vue({
el: '#form',
data: {
Type: 'TypeA',
TypeA: 'Choose',
TypeAOptions: [{
value: 'Choose'
},
{
value: 'A',
},
{
value: 'B'
},
{
value: 'C'
},
{
value: 'D'
}
],
TypeB: 'Choose',
TypeBOptions: [{
value: 'Choose'
},
{
value: '1'
},
{
value: '2'
},
{
value: '3'
},
{
value: '4'
}
],
},
computed:{
},
methods: {
changeType:function(){
this.errors.clear();
},
validateBeforeSubmit() {
this.$validator.validate(this.Type).then((result) => {
if (result) {
alert("Submit Success");
return;
}
alert("Correct them errors!");
});
}
}
})
</script>

How to edit particular row in a table by popping a form modal in vuejs?

I am using a modal form to add new details to the row of a table. After adding details, I’m just adding edit and delete buttons at the end of it. Now here delete button is working fine. How to edit a row of a table by popping replicate of form modal by clicking “edit” button in a row.
Here’s my code:
<div class="layout-padding">
<div
class="item item-link"
v-for="modal in types"
#click="$refs[modal.ref].open()"
>
<i class="item-primary">add</i>
<div class="item-content has-secondary">
<div>{{modal.label}}</div>
</div>
</div>
</div>
<q-modal ref="maximizedModal" class="minimized" :content-css="{padding: '50px'}">
<div class="main">
<label>Enter Your Name:</label>
<input id="name" name="name" type="text" placeholder="Enter your Name" v-model="YourName">
<br>
<label>I am:</label>
<input type="radio" id="Male" value="male" v-model="picked">
Male
<input type="radio" id="Female" value="female" v-model="picked">
Female
<br>
<div class="button">
<button class="red" #click="$refs.maximizedModal.close()">Close</button>
<button class="blue" v-on:click="sub" #click="$refs.maximizedModal.close()">Submit</button>
</div>
</div>
</q-modal>
<table>
<thead>
<th>Name</th>
<th>Gender</th> </thead>
<tbody class="result">
<tr v-for="(h, index) in final">
<td v-for="(value, key, index) in h">
{{ value }}
</td>
<td><button id="edit" class="green edit" v-for="modal in types"
#click="ed(h, index);$refs[modal.ref].open()" type="submit">EDIT</button></td>
<td><button id="delete" class="red delete" v-on:click="del(index)" type="submit">Delete</button></td>
</tr>
</tbody>
</table>
And my script is:
export default {
data () {
return {YourName: '',
details: [],
final: [],
types: [
{
label: 'Add Details',
ref: 'maximizedModal'
}
],
position: 'bottom'
}
},
methods: {
sub: function () {
this.details = {
'name': this.YourName,
'gender': this.picked,
}
this.ed()
if (index === '[object MouseEvent]') {
this.final.push(this.details)
}
if (index > -1) {
this.final.splice(index, 1, this.details)
}
else {
alert('else')
alert(JSON.stringify(this.details))
this.final.push(this.details)
}
},
del: function (index) {
this.$delete(this.final, index)
},
ed: function (details, index) {
return index
}
}
}
If edit button is clicked, the same row should be edited. I don’t know how to proceed further. Please, guide me.
Using the 'splice' can able to modify the given array of object.
Can simply include this inside an 'if' loop:
this.final.splice(this.indi, 1, this.details)

How to work with two columns containing different GetSelectLink method in the same WebGrid?

I am a beginner in ASP.Net MVC3 and trying implement a table using WebGrid I faced off with a problem.
In an row of this table I have "Id" and "Name" (came from DB) and two links more: "Edit" and "Delete". These links are executed using item.GetSelectLink() inside the same web grid, as follows:
<div id="grid">
#{
var grid = new WebGrid(source: Model, rowsPerPage: 30, canPage: true, canSort: true, fieldNamePrefix: "gridDivisoes_", selectionFieldName: "Id");
}
#grid.GetHtml(
tableStyle: "table", headerStyle: "header", footerStyle: "footer", alternatingRowStyle: "alternate",
columns: grid.Columns(
grid.Column("Name", header: "Division", style: "text-align-left", canSort: true),
grid.Column(header: "Update?", style: "text-align-center", format: (item) => item.GetSelectLink("[update]")),
grid.Column(header: "Delete?", style: "text-align-center", format:(item) => item.GetSelectLink("[delete]"))
))
if(grid.HasSelection)
{
if("[delete]" == grid. ????) //click's origin: "[delete]"
{
<input type="hidden" value="#Html.AttributeEncode(Model.ElementAt(grid.SelectedIndex).Id)" id="Id" name="Id" />
<input type="hidden" value="#Html.AttributeEncode(Model.ElementAt(grid.SelectedIndex).Name)" id="Name" name="Name" />
<br />
<br />
<br />
<p>Do you really want to delete the division "#Model.ElementAt(grid.SelectedIndex).Name" ?</p>
<p><input type="submit" value="Delete" /></p>
}
if ("[update]" == grid. ????) //click's origin: "[update]"
{
<input type="hidden" value="#Html.AttributeEncode(Model.ElementAt(grid.SelectedIndex).Id)" id="Id" name="Id" />
<div class="editor-label">
Name
</div>
<div class="editor-field">
#Html.TextBoxFor(Page => Page.ElementAt(grid.SelectedIndex).Name)
#Html.ValidationMessageFor(Page => Page.ElementAt(grid.SelectedIndex).Name)
</div>
<br />
<br />
<p><input type="submit" value="Update"/></p>
}
}
</div>
How could I get the click's origin and execute the grid.HasSelection accordingly "Delete" or "Update" options?
I can't believe that there I can't choose one between these options, select a row and, at same time, just to know the click origin.
How could I do a comparison? Something like that if("[delete]" == grid. ????) ?
Amanda, if i understood you correctly, you want to be able to both edit and delete a row, right?
If so, you can try this:
columns: grid.Columns(
grid.Column("Name", header: "Division", style: "text-align-left", canSort: true),
grid.Column(format: (item) => Html.ActionLink("Update?", "Update", new { updateId = item.ID })),
grid.Column(format: (item) => Html.ActionLink("Delete?", "Update", new { deleteId = item.ID }))
))
You can even use Ajax to render a partial with your row values, if you like