Passing information from one javascript page to another with specific information

Question

I am going through the following code of PeopleReviewPage.js file where an Ajax request is made and data is populated in the jqxgrid as shown below. Passing url to the webservice for getting data and many other things are happening behind the scenes which I believe are not relevant to my question and hence not mentioning that. I am trying to relate the onclick event defined in PeopleReviewPage.js page with the DocumentDetailsDialog.js page where I am performing more data related operations.

PeopleReviewPage.js

// This object is responsible for the "People review" page.
function PeopleReviewPage() {

    var self = this;

    // This maintains state after a cell is clicked and prevents double clicks from triggering an event twice.
    this.cellClicked = false;


    this.urlKey = "showIDNumber";

    // Get data related to IDNumber 
    this.getData = function (IDNumber_) {

        if (isEmpty(IDNumber_)) { alert("Invalid IDNumber in getData()"); return false; }

        // Lookup the AJAX web service URL
        var url = regman.getWebServiceURL(self.urlKey);
        if (isEmpty(url)) { alert("Invalid URL in getData()"); return false; }


        var ajaxRequest = jQuery.ajax({
            //beforeSend: TODO: show spinner!
            data: {
                registry_id: regman.registry.id,
                IDNumber: IDNumber_
            },
            dataType: "json",
            method: "GET",
            url: url
        })
        .done(function (data_, textStatus_, jqXHR_) {

            // Validate the web service and retrieve the status.
            if (typeof (data_) === "undefined" || data_ === null) { alert("Invalid data returned from web service"); return false; }
            if (isEmpty(data_.webservice_status) || isEmpty(data_.webservice_status.status)) { alert("Invalid web service status"); return false; }
            if (data_.webservice_status.status != "SUCCESS") { alert(data_.webservice_status.message); return false; }

            // Process and display data document data
            self.processdataDocuments(data_.data_document_list);



        })
        .fail(function (jqXHR_, textStatus_, errorThrown_) {
            alert("Error in getData(): " + errorThrown_);
            return false;
        });
    };


    // Initialize the page
    this.initialize = function () {

        // An IDNumber should've been provided by the page that called this page.
        var IDNumber = regman.selectedData["IDNumber"];

        if (isEmpty(IDNumber)) { alert("Invalid IDNumber provided by calling page"); return false; }

        self.getData(IDNumber);


    };


     // Process data document data and dynamically populate the UI.
    // Note that the "collection" parameter should correspond to data_.data_document_list. 

    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(
            {
            source: dataAdapter,
            width: '1000',
                height: 150,
                columns: [
                      {
                          text: 'Type', datafield: 'nc_type'
                      },
                      {
                          text: 'SubType', datafield: 'nc_subtype'
                      },
                      {
                          text: 'Concept', datafield: 'concept_text'
                      },
                      {
                          text: 'Date', datafield: 'nc_dos'
                      }
                  ]
             });

      $("#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 
         });

    };
};

DocumentDetailsDialog.js

function DocumentDetailsDialog() {


     var self = this;

    // This maintains state after a cell is clicked and prevents double clicks from triggering an event twice.
    this.cellClicked = false;

    this.urlKey = "showdocument";



    // get data for second url

     this.getData = function (IDNumber_) {

        if (isEmpty(IDNumber_)) { alert("Invalid IDNumber in getData()"); return false; }

        // Lookup the AJAX web service URL
        var url = regman.getWebServiceURL(self.urlKey);
        if (isEmpty(url)) { alert("Invalid URL in getData()"); return false; }


        var ajaxRequest = jQuery.ajax({
            //beforeSend: TODO: show spinner!
            data: {
                registry_id: regman.registry.id,
                IDNumber: IDNumber_
            },
            dataType: "json",
            method: "GET",
            url: url
        })
        .done(function (data_, textStatus_, jqXHR_) {

            // Validate the web service and retrieve the status.
            if (typeof (data_) === "undefined" || data_ === null) { alert("Invalid data returned from web service"); return false; }
            if (isEmpty(data_.webservice_status) || isEmpty(data_.webservice_status.status)) { alert("Invalid web service status"); return false; }
            if (data_.webservice_status.status != "SUCCESS") { alert(data_.webservice_status.message); return false; }


            // Process and display data document data
           //self.processNlpDocuments(data_.nlp_document_list);
           var doc_contents = data_.note_content;
            //console.log(doc_contents);

        })
        .fail(function (jqXHR_, textStatus_, errorThrown_) {
            alert("Error in getData(): " + errorThrown_);
            return false;
        });
    };

}

My question:

When I click on one of the row of jqxgrid, I am able to see all the information of that row in the dialog (alert(jsonStringify); defined in the PeopleReviewPage is doing that). I am getting the following information using the alert dialog (in JSON) as shown below:

"data_document_list" : [ {
    "webservice_status" : null,
    "IDNumber" : "3567973",
    "concept_id" : null,
    "concept_text" : "Multiple Distress",
    "nc_dos" : "2015-07-10",
    "nc_subtype" : "BMT",
    "nc_type" : "HTH"

  }

Is there a way from PeopleReviewPage.js, I can pass the nc_subtype and IDNumber related information to the DocumentDetailsDialog.js page? Because I need to pass nc_subtype and IDNumber for the showdocument webservice call to get more details about the data document. Please advise.

Answer 1

I haven't used jqGrids but seems like coding work around needs to be done.

Change call function and store it as object: var PeopleReviewPage = new PeopleReviewPage();

Edit this line: .done(function (data_, textStatus_, jqXHR_) {

Add this.data to: .done(function (data_, textStatus_, jqXHR_) { this.data = data_;

Access data array object with: PeopleReviewPage.data

Example. PeopleReviewPage.data[0].webservice_status

http://jsfiddle.net/d2ee1smd/

Answer 2

I think this is a case of publish/subscrib, that can be done in jquery with custom events.

You should define a custom event from your PeopleReviewPage module, where you will fire when you update the data from ajax request for example.

Then create an handler function in the DocumentDetailsDialog, that subscribe that event.

So you could have the 2 modules synched but decoupled.

Here is a trivial example:

$(function(){

 $('.aclass').click(function(ev){
    if (ev.target.tagName == 'INPUT') return false;
   
    var t = $(this).find('input').val();
    $(document).trigger('mycustomevent', [t]);
 });
 
 $(document).on('mycustomevent', function(ev, u){
    var t = $('.bclass').text();
    $('.bclass').text(t + " - " + u);
 });

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
 <span class="aclass">Click me: <input type="text" value="AAAA"/></span>
 <hr/>
 <span class="bclass">BBBB</span>
</div>

UPDATE:

To move into your specific case, in your function PeopleReviewPage(), in the result of the ajax call:

this.getData = function (IDNumber_) {

    ...

   var ajaxRequest = jQuery.ajax({
  ...
   .done(function (data_, textStatus_, jqXHR_) {

      ...

      // Process and display data document data
      self.processdataDocuments(data_.data_document_list);

      // here you trigger the custom event:
      var eventArgs = [data_.data_document_list.nc_subtype, data_.data_document_list.IDNumber];

      $(document).trigger('mycustomevent', eventArgs);

   })
   .fail(function (jqXHR_, textStatus_, errorThrown_) {
      alert("Error in getData(): " + errorThrown_);
      return false;
    });
};

Then you need to subscribe the custom event in your other function DocumentDetailsDialog():

function DocumentDetailsDialog() {


     ...

     var that = this;

     $(document).on('mycustomevent', function(ev, nc_subtype, IDNumber) {

         // here you can do what you need to do
         // maybe your getData()
         that.getData(IDNumber);

     });

     ...

}

I just cut the not need part from your code, and left just the part useful to see where to place the changes.

Like this way you should be able to update the DocumentDetailsDialog() each time the PeopleReviewPage() is updated, without a deep dependency between the modules.

Please feel free to adapt the code with a proper event name, so change the 'mycustomevent' to something more significant.

You also don't need to use the document as the object of your event bus if you have a different and well known DOM element where you could bind the event.

Pay attention to the that and this, you could use the jQuery proxy() function to do it better and use this inside the handler function.