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>