Question

我将查看以下PeopleReviewPage.js文件的代码，其中发出Ajax请求并在jqxgrid中填充数据，如下所示。将网址传递给网络服务以获取数据以及许多其他事情正在幕后发生，我认为这与我的问题无关，因此没有提及。我试图联系onclick 在PeopleReviewPage.js页面中使用DocumentDetailsDialog.js页面定义的事件，我在其中执行更多与数据相关的操作。

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;
        });
    };

}

我的问题：

当我点击其中一行jqxgrid时，我能够在对话框中看到该行的所有信息（alert(jsonStringify);在 PeopleReviewPage正在这样做）。我使用警告对话框（在JSON中）获取以下信息，如下所示：

"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"

  }

是否有PeopleReviewPage.js的方式，我可以将nc_subtype和IDNumber相关信息传递到DocumentDetailsDialog.js页面？因为我需要将nc_subtype和IDNumber传递给showdocument网络服务调用，以获取有关数据文档的更多详细信息。请指教。

Answer 1

我没有使用jqGrids，但似乎需要完成编码工作。

更改通话功能并将其存储为对象：var PeopleReviewPage = new PeopleReviewPage();

修改此行：.done(function (data_, textStatus_, jqXHR_) {

将 this.data 添加到：.done(function (data_, textStatus_, jqXHR_) { this.data = data_;

使用以下内容访问数据数组对象：PeopleReviewPage.data

实施例。 PeopleReviewPage.data[0].webservice_status

http://jsfiddle.net/d2ee1smd/

Answer 2

我认为这是发布/订阅的情况，可以使用自定义事件在jquery中完成。

您应该从 PeopleReviewPage 模块定义自定义事件，例如，当您从ajax请求更新数据时，您将触发该事件。

然后在 DocumentDetailsDialog 中创建一个处理函数，订阅该事件。

所以你可以让2个模块同步但是解耦。

这是一个简单的例子：

$(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>

<强>更新

要进入特定情况，请在函数PeopleReviewPage()中，在ajax调用的结果中：

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;
    });
};

然后，您需要在其他函数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);

     });

     ...

}

我只是从您的代码中删除了不需要的部分，只留下了有用的部分，以查看更改的位置。

就像这样，每次更新DocumentDetailsDialog()时都应该能够更新PeopleReviewPage()，而模块之间没有深度依赖关系。

请随意使用正确的事件名称调整代码，因此请将“mycustomevent”更改为更重要的内容。

如果您有一个可以绑定事件的不同且众所周知的DOM元素，您也不需要使用document作为事件总线的对象。

注意that和this，你可以使用jQuery proxy()函数做得更好，并在处理函数中使用this。

将信息从一个javascript页面传递到另一个具有特定信息的页面

2 个答案: