Ashzabin Wadud Ashzabin Wadud - 3 months ago 21
Javascript Question

How to obtain data in javaScript before submitting form in JTable

Want to get data from JTable form but when I'm trying to get the data it says undefined.

This is customStudent.js

.......
$(document).ready(function() {

$('#StudentTableContainer').jtable({
title: 'Student List',
paging: true,
pageSize: 10,
sorting: true, //Enable sorting
defaultSorting: 'name ASC',
actions: {
listAction: actionRoom,
deleteAction: 'HallManagementServlet?action=DeleteStudent',

updateAction: 'HallManagementServlet?action=UpdateStudent',


},
fields: {
reg_id: {
title: 'Registration',
key: true,
sort: true,
create: true,
edit: false
},
name: {
title: 'Name',
width: '20%',
edit: true
},
dept_id: {
title: 'Department',
edit: true,
options: 'HallManagementServlet?action=dropDownDepartment',
width: '5%'
},
session: {
title: 'session',
edit: true,
width: '7%'
},
degree_type: {
title: 'Degree type',
width: '10%',
options: {'Bachelors/Honours': 'Bachelors/Honours', 'Masters': 'Masters'},
edit: true,
list: true
},
room_number: {
title: 'Room',
width: '5%',
edit: true,
options: 'HallManagementServlet?action=dropDownRooms'
},
date_of_birth: {
title: 'Date of Birth',
type: 'date',
displayformat: 'yyyy-mm-dd',
edit: true,
list: false
},
blood_group: {
title: 'Blood Group',
width: '10%',
options: {'O-': 'O-', 'O+': 'O+', 'A-': 'A-', 'A+': 'A+', 'B-': 'B-', 'B+': 'B+', 'AB-': 'AB-', 'AB+': 'AB+'},
edit: true,
list: false
},
contact_number: {
title: 'Phone',
width: '10%',
edit: true,
list: true
},
address_line_1: {
title: 'Address line 1',
width: '13%',
edit: true,
list: false
},
address_line_2: {
title: 'Address line 6',
width: '13%',
edit: true,
list: false
},
fathers_name: {
title: 'Father\'s Name',
width: '13%',
edit: true,
list: false
},
mothers_name: {
title: 'Mother\'s Name',
width: '13%',
edit: true,
list: false
},
email: {
title: 'E-mail address',
width: '5%',
edit: true,
list: false
},
hall_id: {
title: 'Hall',
create: false,
edit: false,
list: false
},
admitted_on: {
title: 'Admitted On',
type: 'date',
displayformat: 'yyyy-mm-dd',
create: true,
edit: true,
list: true
},
payment_expires_on: {
title: 'Payment expires on',
width: '11%',
type: 'date',
displayformat: 'yyyy-mm-dd',
create: false,
edit: true,
list: true
},
paymentStatus: {
title: 'Payment Status',
width: '8%',
options: {'Paid': 'Paid', 'Due': 'Due'},
create: false,
edit: false,
list: true
},
imageFile: {
title: "Image Upload",
list: false,
create: true,
edit: false,
input: function(data) {
return '<input id="docBytes" type="file" name="docBytes" accept="image/*"><iframe name="postiframe" id="postiframe" style="display: none" />';
}
}
},
formCreated: function(event, data) {
data.form.find('input[name="reg_id"]').addClass('validate[required,[custom[number]],minSize[10],maxSize[10]');
data.form.find('input[name="name"]').addClass('validate[required,[custom[onlyLetterSp]]');
data.form.find('input[name="mothers_name"]').addClass('validate[[custom[onlyLetterSp]]');
data.form.find('input[name="fathers_name"]').addClass('validate[[custom[onlyLetterSp]]');
data.form.find('input[name="email"]').addClass('validate[custom[email]]');
data.form.validationEngine();
},
//Validate form when it is being submitted
formSubmitting: function(event, data) {
return data.form.validationEngine('validate');
},
//Dispose validation logic when form is closed
formClosed: function(event, data) {
data.form.validationEngine('hide');
data.form.validationEngine('detach');
},
recordsLoaded: function(event, data) {
$('.jtable-data-row').click(function() {
var reg_id = $(this).attr('data-record-key');
window.location.assign("viewstudent.jsp?reg_id=" + reg_id);
});
}

});
//Re-load records when user click 'load records' button.
$('#LoadRecordsButton').click(function(e) {
e.preventDefault();
$('#StudentTableContainer').jtable('load', {
name: $('#name').val(),
reg_id: $('#registration').val(),
dept_id: $('#pd_dept').val(),
session: $('#pd_session').val(),
degree_type: $('#pd_degree_type').val()
});
});
//Load all records when page is first shown
$('#LoadRecordsButton').click();
});


More precisely to speak, I want to get the updated date from here:

payment_expires_on: {
title: 'Payment expires on',
width: '11%',
type: 'date',
displayformat: 'yyyy-mm-dd',
create: false,
edit: true,
list: true
},


What should I do to get the date? After getting the date i want to claculate something and show paymentStatus on Jtable.

Answer
updateAction: function(postData) {
                var payment_date = [];
                console.log("updating from custom function...");
                return $.Deferred(function($dfd) {
                    $.ajax({
                        url: 'HallManagementServlet?action=UpdateStudent',
                        type: 'POST',
                        dataType: 'json',
                        data: postData,
                        success: function(data) {
                            $.each(data, function(entryindex, entry) {
                              payment_date.push(entry['payment_expires_on']);  
                            });
                            alert(payment_date);
                            $dfd.resolve(data);
                        },
                        error: function() {
                            $dfd.reject();
                        }
                    });
                });
            }

Use this custom updateAction. It worked for me.