I am working on a Dojo application that includes a Dgrid. My objective is to send the javascript containing the dgrid data to the server. However, I am encountering difficulties in accessing the javascript object beyond the file where it is defined.
The application uses a dojo wizard, so when users click "next" on the wizard to proceed to the next page, I want to submit the data (javascript object) from the current page to the server for validation and processing.
I have encountered issues related to the scope of the javascript object. Even after moving the javascript object (studentData) to global scope, the problem persists. Below are snippets of code from the javascript file and the form wizard:
Javascript function creating dgrid:
//Imports Dojo items
require([ "dojo/parser", "dojo/_base/declare", "dojo/store/Memory",
], function(parser, declare, Memory, OnDemandGrid, ColumnSet, Selection,
selector, Keyboard, DijitRegistry, editor, ColumnHider, ready, Dialog,
on, registry, Observable, lang) {
var studentData = [ {
id : "1",
age : "33",
idtype : "1",
first_name : "Edward",
surname : "Davis"
}, {
id : "2",
age : "41",
idtype : "2",
first_name : "Lewis",
surname : "Holl"
}, {
id : "3",
age : "59",
idtype : "3",
first_name : "Fred",
surname : "James"
} ];
dojo.ready(function() {
// Code
function byId(Id) {
return document.getElementById(Id);
}
});
var aliasStore = new dojo.store.Observable(new Memory({
data : aliasData,
idProperty : "id"
}));
var CustomStudentGrid = declare([ OnDemandGrid, selector, Selection,
Keyboard, editor, DijitRegistry, ColumnHider ]);
var studentGrid = new CustomStudentGrid({
store : studentData,
columns : {
id : {
label : "Id",
field : "id",
hidden : true
},
idtype : {
label : "Id Code",
field : "idtype",
hidden : true
},
chkBox : selector({}),
first_name : {
label : "First Names",
field : "first_name"
},
surname : {
label : "Surname",
field : "surname"
}
},
selectionMode : "none",
loadingMessage : "Loading data...",
noDataMessage : "No results found....",
allowSelectAll : true
}, "studentGrid");
aliasNameGrid.on('dgrid-select', function(event) {
for ( var i in selectedRows) {
event.rows[i].element.className = "deleteRow";
}
});
aliasNameGrid.on('dgrid-deselect', function(event) {
for ( var i in deSelectedRows) {
// alert('Deselected Rows are ' + i);
event.rows[i].element.classList.remove('deleteRow');
}
});
studentGrid.refresh();
});
Wizard Form:
'passFunction' is called when the user clicks "next" button, invoking 'SendForm' function
How can I access the studentData within the SendForm function or any other external javascript file? The studentData will undergo changes by the user on the grid.
!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script>
function SendForm(dojo) {
console.log('Entered...');
console.log(studentData.id[0]);
};
</script>
<title>Student</title>
</head>
<body class="claro">
<form data-dojo-type="dijit/form/Form" id="student_form" name="student_form">
<div dojoType="dojox.widget.WizardPane" id="StudentWizPane" passFunction="SendForm">
<div data-dojo-type="dojox.layout.TableContainer"
data-dojo-props="cols:1,customClass:'employee_labels', labelWidth:180"
id="StudentContainer">
<div id= "studentGrid"></div>
</div>
<!-- Other pages -->
Firebug Error
Within the Script tab, I am encountering the following error:
Object { error="Mozilla error: invalid scope variables"}