Jsgrid с формой подчинения ⇐ Javascript

[Anonymous]

У меня есть jsgrid, который возвращает данные в сетке. Я использую Rowrenderer, чтобы также прикрепить форму. Итак, когда вы нажимаете на один из строк в сетке, то отображается форма. Я пытаюсь использовать JavaScript, чтобы отправить форму, но по какой -то причине форма не распознается. Он возвращается как нулевое, когда я делаю консоли. P> Решение: прикрепите функцию JavaScript к кнопке отправки, которая выполняет выборку в соответствии с обычной сетью для представления. Фетч отправит информацию из формы на сервер. < /P>
Полный код < /p>


var params = "";
var options = "";
var term = "";
var priority = "";
var tax_exempt = "";
var voucher_type = "";
var banner_source = "";
var banner_source_code = "";
var date_account_type = "";

toastr.options = {
"closeButton": true,
"debug": false,
"newestOnTop": false,
"progressBar": true,
"positionClass": "toast-top-center",
"preventDuplicates": false,
"onclick": null,
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
}

$.datepicker.setDefaults($.datepicker.formatDate( "mm/dd/yy", new Date()));

var MyDateField = function(config) { jsGrid.Field.call(this, config); };

MyDateField.prototype = new jsGrid.Field({
sorter: function(date1, date2) { return new Date(date1) - new Date(date2); },

insertTemplate: function(value) {
return this._insertPicker = $("").datepicker({defaultDate: new Date().toLocaleDateString()});
},

editTemplate: function(value) {
return this._editPicker = $("").datepicker().datepicker("setDate", new Date(value).toLocaleDateString());
},

insertValue: function(value) {
if ($(this._insertPicker).datepicker("getDate") == null)
{
return false;
}
else
{
return this._insertPicker.datepicker("getDate").toLocaleDateString();
}
},

editValue: function(value) {
if ($(this._editPicker).datepicker("getDate") == null)
{
return false;
}
else
{
return this._editPicker.datepicker("getDate").toLocaleDateString();
}
}
});

jsGrid.fields.myDateField = MyDateField;

options = {
method: "get",
dataType: "json",
headers: {
"Content-Type": "application/json;charset=utf-8",
"Accept": "application/json;charset=utf-8"
}
};

fetch('......', options)
.then(response => response.json())
.then(data => {
data.forEach(item => {
term = JSON.parse(item.TERM);
priority = JSON.parse(item.PRIORITY);
tax_exempt = JSON.parse(item.TAX_EXEMPT);
voucher_type = JSON.parse(item.VOUCHER_TYPE);
banner_source = JSON.parse(item.BANNER_SOURCE);
banner_source_code = JSON.parse(item.BANNER_SOURCE_CODE);
date_account_type = JSON.parse(item.DATE_ACCOUNT_TYPE);
user_id_voucher_types = JSON.parse(item.USER_ID_VOUCHER_TYPES);
user_id_voucher_type_sources = JSON.parse(item.USER_ID_VOUCHER_TYPE_SOURCES);
user_id_grants = JSON.parse(item.USER_ID_GRANTS);
user_id_account_dates = JSON.parse(item.USER_ID_ACCOUNT_DATES);

jsGridVoucherType();
});
})
.catch((error) => {
toastr["error"]("Something went wrong.", "Error");
});

function jsGridVoucherType() {

$("#jsGridVoucherType").jsGrid({
width: "100%",
height: "auto",

heading: true,
editing: false,
filtering: true,
inserting: false,
sorting: true,
paging: true,
autoload: true,

filterRowRenderer: true,
insertRowRenderer: true,
editRowRenderer: true,

pageSize: 50,
pageButtonCount: 5,

noDataContent: "No data was returned.",
deleteConfirm: "Do you really want to delete this Voucher Type?",

invalidMessage: "",
invalidNotify: function(args) { var messages = $.map(args.errors, function(error) { return error.message || null; }); },

rowRenderer: function(item) {
var row = $("");
var subDetail = $('').hide();

var DetailForm = '' +
'' +
'' +
'' +
'' +
' First name' +
' ' +
' Looks good!' +
'' +
'' +
' Last name' +
' ' +
' Looks good!' +
'' +
'' +
' City' +
' ' +
' Please provide a valid city.' +
'' +
'' +
' State' +
' ' +
' Choose...' +
' ...' +
' ' +
' Please select a valid state.' +
' ' +
'' +
' Zip' +
' ' +
' Please provide a valid zip.' +
'' +
'' +
' ' +
' ' +
' Agree to terms and conditions' +
' You must agree before submitting.' +
' ' +
'' +
'' +
' Submit' +
'' +
'' +
'' +
'' +
'';

items = Object.keys(item);

for(let key in item){
if(item.hasOwnProperty(key)){
switch(key) {
case "ROW_NUMBER":
case "PIDM":
case "ANUMBER":
case "AID_YEAR":
case "CREATE_DATE":
var cell = $("").addClass("jsgrid-cell").append(item[key]);
break;

default:
var cell = $("").addClass("jsgrid-cell").append(item[key]);
}

row.append(cell);
}
}

row.click(function() {
subDetail.toggle();
})

subDetail.append(DetailForm );
return row.add(subDetail);
},

controller: {
loadData: function (filter) {
return fetch("....?" +
"pidm=" + filter.PIDM +
"&anumber=" + filter.ANUMBER +
"&student_name=" + filter.STUDENT_NAME +
"&counselor_id=" + filter.COUNSELOR_ID +
"&status=" + filter.STATUS +
"&create_date=" + filter.CREATE_DATE)
.then(response => response.json())
.catch((error) => {
toastr["error"]("Something went wrong.", "Error");
});
},
},

fields: [
{ name: "ROW_NUMBER", type: "text", title: "Row Number", align: "left", editing: false, filtering: false, inserting: false },
{ name: "PIDM", type: "text", title: "Student PIDM", align: "left", editing: false, filtering: false, inserting: false },
{ name: "ANUMBER", type: "text", title: "Student ID", align: "center", editing: false, filtering: false, inserting: false },
{ name: "AID_YEAR", type: "text", title: "Aid Year", align: "center", editing: false, filtering: false, inserting: false },
{ name: "STUDENT_NAME", type: "text", title: "Student Name", align: "left", editing: false, filtering: false, inserting: false },
{ name: "COUNSELOR_ID", type: "text", title: "Counselor ID", align: "left", editing: false, filtering: false, inserting: false },
{ name: "STATUS", type: "text", title: "Status", align: "left", editing: false, filtering: false, inserting: false },
{ name: "CREATE_DATE", type: "text", title: "Create Date", align: "left", editing: false, filtering: false, inserting: false }
]
});
}

let loginForm = document.getElementById("#loginForm");
console.log(loginForm);



< /code>
Здесь я создаю сетку, а также прикрепляю от того, когда строка нажимается на сетку. < /p>

rowRenderer: function(item) {
var row = $("");
var subDetail = $('').hide();

var DetailForm = '' +
'' +
'' +
'' +
'' +
' First name' +
' ' +
' Looks good!' +
'' +
'' +
' Last name' +
' ' +
' Looks good!' +
'' +
'' +
' City' +
' ' +
' Please provide a valid city.' +
'' +
'' +
' State' +
' ' +
' Choose...' +
' ...' +
' ' +
' Please select a valid state.' +
' ' +
'' +
' Zip' +
' ' +
' Please provide a valid zip.' +
'' +
'' +
' ' +
' ' +
' Agree to terms and conditions' +
' You must agree before submitting.' +
' ' +
'' +
'' +
' Submit' +
'' +
'' +
'' +
'' +
'';

items = Object.keys(item);

for(let key in item){
if(item.hasOwnProperty(key)){
switch(key) {
case "ROW_NUMBER":
case "PIDM":
case "ANUMBER":
case "AID_YEAR":
case "CREATE_DATE":
var cell = $("").addClass("jsgrid-cell").append(item[key]);
break;

default:
var cell = $("").addClass("jsgrid-cell").append(item[key]);
}

row.append(cell);
}
}

row.click(function() {
subDetail.toggle();
})

subDetail.append(DetailForm );
return row.add(subDetail);
},

< /code>
Следующий оператор возвращает NULL. < /p>

let loginForm = document.getElementById("#loginForm");
console.log(loginForm);



Подробнее здесь: https://stackoverflow.com/questions/794 ... submission