I have a jsGrid that returns the data in the grid. I'm using rowRenderer to also attach a form. So, when you click on one of the rows in the grid then the form is shown. I'm trying to use javascript to submit the form but for some reason the form is not being recognized. It's being returned as null when I do a console.log.
Solution: Attach a javascript function to the Submit button that does a Fetch versus the normal Web for submission. The Fetch will send the information from the form to the server.
NOTES: I believe the problem is the FORM is hidden until a row is clicked so the javascript doesn't know the FORM exists. Is there a way to attach a Javascript function when a row is clicked so that the FORM can be found?
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: "<font color=red>No data was returned.</font>",
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 = $("<tr>");
var subDetail = $('<td colspan="8">').hide();
var DetailForm = '<html>' +
'<body>' +
'<div style="padding: 20px 20px 20px 20px; ">' +
'<form id="loginForm-' + item.ROW_NUMBER + '" class="row g-3 needs-validation" novalidate>' +
'<div class="col-md-4">' +
' <label for="validationCustom01" class="form-label">First name</label>' +
' <input type="text" class="form-control" id="validationCustom01" value="Mark" required>' +
' <div class="valid-feedback">Looks good!</div>' +
'</div>' +
'<div class="col-md-4">' +
' <label for="validationCustom02" class="form-label">Last name</label>' +
' <input type="text" class="form-control" id="validationCustom02" value="Otto" required>' +
' <div class="valid-feedback">Looks good!</div>' +
'</div>' +
'<div class="col-md-6">' +
' <label for="validationCustom03" class="form-label">City</label>' +
' <input type="text" class="form-control" id="validationCustom03" required>' +
' <div class="invalid-feedback">Please provide a valid city.</div>' +
'</div>' +
'<div class="col-md-3">' +
' <label for="validationCustom04" class="form-label">State</label>' +
' <select class="form-select" id="validationCustom04" required>' +
' <option selected disabled value="">Choose...</option>' +
' <option>...</option>' +
' </select>' +
' <div class="invalid-feedback">Please select a valid state.</div>' +
' </div>' +
'<div class="col-md-3">' +
' <label for="validationCustom05" class="form-label">Zip</label>' +
' <input type="text" class="form-control" id="validationCustom05" required>' +
' <div class="invalid-feedback">Please provide a valid zip.</div>' +
'</div>' +
'<div class="col-12">' +
' <div class="form-check">' +
' <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>' +
' <label class="form-check-label" for="invalidCheck">Agree to terms and conditions</label>' +
' <div class="invalid-feedback">You must agree before submitting.</div>' +
' </div>' +
'</div>' +
'<div class="col-12">' +
' <button id="button" class="btn btn-primary" type="submit">Submit</button>' +
'</div>' +
'</form>' +
'</div>' +
'</body>' +
'</html>';
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 = $("<td align=center>").addClass("jsgrid-cell").append(item[key]);
break;
default:
var cell = $("<td>").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("/..........?" +
"&aid_year=" + filter.AID_YEAR +
"&student_name=" + filter.STUDENT_NAME +
"&counselor_id=" + filter.COUNSELOR_ID +
"&status=" + filter.STATUS +
"&create_date=" + filter.CREATE_DATE)
.then(response => response.json())
.catch((error) => {
console.log("Something went wrong.", "Error");
});
},
},
fields: [
{ 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 }
]
});
}
Running the following just returns null.
I have a jsGrid that returns the data in the grid. I'm using rowRenderer to also attach a form. So, when you click on one of the rows in the grid then the form is shown. I'm trying to use javascript to submit the form but for some reason the form is not being recognized. It's being returned as null when I do a console.log.
Can anyone see what I might be doing wrong that my form is not be recognized?
Solution: Attach a javascript function to the Submit button that does a Fetch versus the normal Web for submission. The Fetch will send the information from the form to the server.
NOTES: I believe the problem is the FORM is hidden until a row is clicked so the javascript doesn't know the FORM exists. Is there a way to attach a Javascript function when a row is clicked so that the FORM can be found?
`<script>
jsGridVoucherType();
</script>`
Running the following just returns null.
`<script>
window.addEventListener('DOMContentLoaded', () => {
let loginForm = document.querySelector("#loginForm-1");
console.log("Form ");
console.log(loginForm);
document.querySelector('#button').addEventListener('click', () => {
console.log('You clicked me!')
});
});
</script>`