Calling another function upon onclick event

Question

I have two javscript files f1.js and f2.js in the same directory/folder which are part of a web application. f1 is responsible for displaying jqxdatagrid with multiple rows and columns.

My goal :

I am basically trying to figure out a way to call function f2 when a user clicks on a row of the jqxdatagrid. All the logic related to grabbing row data is defined in f1.js inside this line $("#dataDocumentPanel").on('rowclick',function(event){

My Attempt:

I was looking at this post Call variables from one javascript file to another So I declared var SUBTYPE

which will initialize mySubtype.

In order to access the above value, I did the following in f2.js

var forf1 = new Object;
alert(forf1.mySubtype);

So, before doing anything, I want to check via alert whether I am getting the value of mySubtype in f2.js or not.

Please correct me if I am wrong but the reason because alert in f2.js isn't working is because I feel like I would need to call the f2 file when a user clicks on a particular row of jqxdatagrid. I mean something needs to happen on this line $("#dataDocumentPanel").on('rowclick',function(event){ ?

Here are my two javascript files :

f1.js

function f1() {
 var self = this;
 this.urlKey = "showIDNumber";
 this.getData = function (IDNumber_) {
 //Some code related to ajax reques
 .done(function (data_, textStatus_, jqXHR_) {
 self.processdataDocuments(data_.data_document_list);
 })
 .fail(function (jqXHR_, textStatus_, errorThrown_) {
 // some code here
 });
 };
 // Initialize the page
 this.initialize = function () {
 self.getData(IDNumber);
 };
 this.processdataDocuments = function (collection_) {
 var source =
 {
 localdata: collection_,
 datatype: "array"
 };
 var dataAdapter = new $.jqx.dataAdapter(source, {
 loadComplete: function (data) { },
 loadError: function (xhr, status, error) { }
 });
 $("#dataDocumentPanel").jqxGrid(
 // some code here to populate jqxgrid
 });
 // For getting the contents of a row, I am using jqxgrid approach as mentioned in their doc here :
 // http://www.jqwidgets.com/getting-the-clicked-grid-row/ 
 $("#dataDocumentPanel").on('rowclick',function(event){
 var row = event.args.rowindex;
 var datarow = $("#dataDocumentPanel").jqxGrid('getrowdata', row);
 var jsonStringify = JSON.stringify(datarow,null,10);
 alert(jsonStringify); // This alert displays the JSON data in a formatted manner 
 var obj = jQuery.parseJSON(response);
 //alert("display Subtype "+obj.nc_subtype) // Works fine
 var SUBTYPE = {
 mySubtype : obj.nc_subtype
 };
 });
 };
};

f2.js

function f2() {
 var self = this;
 var forf1 = new Object;
 alert(forf1.mySubtype); // Trying to display obj.nc_subtype value from f1
 this.getData = function (IDNumber_) {
 // some code will be here 
 var ajaxRequest = jQuery.ajax({
 // some code will be here
 })
 .done(function (data_, textStatus_, jqXHR_) {
 // some code will be here
 })
 .fail(function (jqXHR_, textStatus_, errorThrown_) {
 // some code will be here
 });
 };
}

Answer 1

From Properties of Javascript function objects

You could make f1 into a class (as F1, since classes are uppercased) with

var F1 = (function() {
 var cls = function() { }
 var self = cls.prototype;
 self.foo = "Foo";
 self.bar = funciton() { ... },
 ...
 return cls;
})();

From there, provided that you're referencing both f1 and f2 in your HTML page, you can create an F1 object with

var f1 = new F1();

and then access its properties simply by doing

f1.property

and assigning them with

f1.property = ...

To set mySubType of f1, instead of

var SUBTYPE = {
 mySubtype : obj.nc_subtype
};

do

self.mySubtype = ...

which will assign f1.mySubtype.

Here is an example snippet with f1 and f2 turned into classes (F1 and F2), with F2 objects creating an F1 object and accessing its mySubtype. In the demo I set F1.mySubtype to the string Foo, and created an f2, so when the snippet is run it should print "Foo"; however, in the real program those two things should probably be removed:

//f1.js ---
var F1 = (function() {
 var cls = function() { }
 var self = cls.prototype;
 
 self.urlKey = "showIDNumber";
 self.getData = function (IDNumber_) {
 //Some code related to ajax reques
 this.done(function (data_, textStatus_, jqXHR_) {
 self.processdataDocuments(data_.data_document_list);
 });
 this.fail(function (jqXHR_, textStatus_, errorThrown_) {
 // some code here
 });
 };
 // Initialize the page
 self.initialize = function () {
 self.getData(IDNumber);
 };
 self.processdataDocuments = function (collection_) {
 var source =
 {
 localdata: collection_,
 datatype: "array"
 };
 var dataAdapter = new $.jqx.dataAdapter(source, {
 loadComplete: function (data) { },
 loadError: function (xhr, status, error) { }
 });
 $("#dataDocumentPanel").jqxGrid({
 // some code here to populate jqxgrid
 });
 // For getting the contents of a row, I am using jqxgrid approach as mentioned in their doc here :
 // http://www.jqwidgets.com/getting-the-clicked-grid-row/ 
 $("#dataDocumentPanel").on('rowclick',function(event){
 var row = event.args.rowindex;
 var datarow = $("#dataDocumentPanel").jqxGrid('getrowdata', row);
 var jsonStringify = JSON.stringify(datarow,null,10);
 alert(jsonStringify); // This alert displays the JSON data in a formatted manner 
 var obj = jQuery.parseJSON(response);
 //alert("display Subtype "+obj.nc_subtype) // Works fine
 
 self.mySubtype = obj.nc_subtype;
 });
 };
 
 //I added this line for the demo to show 'f2' accessing this property from 'f1'. You should remove it if copying this code into your application
 self.mySubtype = "Foo";
 return cls;
})();
var f1 = new F1();
//f2.js ---
var F2 = (function() {
 var cls = function() { }
 var self = cls.prototype;
 alert(f1.mySubtype);
 self.getData = function (IDNumber_) {
 // some code will be here 
 var ajaxRequest = jQuery.ajax({
 // some code will be here
 })
 .done(function (data_, textStatus_, jqXHR_) {
 // some code will be here
 })
 .fail(function (jqXHR_, textStatus_, errorThrown_) {
 // some code will be here
 });
 };
 return cls;
})();
var f2 = new F2();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

• Tan: Thanks. Yes, I have both the files included in the HTML. For some reason, specifying self.mySubtype = obj.nc_subtype; in f1 is prohibiting page from loading. However, with var SUBTYPE = { mySubtype : obj.nc_subtype }; page loads perfectly fine. I hope you didn't mean to define f2(); in the very last line?
• Tan: Also, changing function f1() to f1 = { ... is breaking the page loading. Do you think it's possible to keep both the functions as it is ( By as it is I mean, we don't change function f1() to f1 = { ... and keep it as function f1() only) and achieve the goal? Thanks
• Doc: You can see what's breaking the page from loading by looking at the browser console; right-click in the webpage and you should see an option "Inspect Element". Click on that, and a mini-editor should pop up in the browser, usually below the page. There should be a "Console" option on that mini-editor; click on it. Then, wherever there's a red line, an error occurred. It should show the name of the file that's causing the error on the right of the line, and if its your file, click on that name and it should take you into the source, showing the line the error occurred on
• Doc: I think the self.mySubtype = obj.nc_subtype case isn't working because obj is nil, or doesn't have the property nc_subtype. Check response
• Tan: This line works fine and I get the result in my original code //alert("display Subtype "+obj.nc_subtype) // Works fine