在Jquery数据表中打开一个弹出窗口，相关数据不起作用

What I want is, I am binding a Jquery datatable in which there are lots of records coming.In each row there is a div onclick of which I want to open the form with its relevant data.

我想要的是,我绑定了一个Jquery数据表,其中有很多记录即将到来。在每一行中都有一个div onclick,我想用它的相关数据打开表单。

First of all below is my code for binding the data.

首先,下面是我绑定数据的代码。

function getDashboardData(STATE) {
    try {

        $.ajax({
            type: "POST",
            url: "Dashboard.aspx/BindMWSiteSurvey",
            data: JSON.stringify({ STATE: STATE }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {

                var datVal = JSON.parse(data.d);

                var details = [];

                for (var i = 0, len = datVal.length; i < len; i++) {

                    var result = datVal[i];
                    
                    var buttonColumn = "<b><div style='cursor: pointer;' value='VALIDATE' onClick=" + 'OpenPopUpForUpdate("' + this + '");' + " />Validate</div></b>";                  

                    details.push([result.SAP_ID, result.CANDIDATE_ID, result.STATE, result.SITE_NAME, result.CANDIDATESTATUS, result.CURRENT_STATUS, buttonColumn]);
                }

                $('#grdMWSiteSurvey').DataTable({
                    destroy: true,
                    autoWidth: false,
                    "aaData": details,
                    "aoColumns": [
                        { "sTitle": "Sap ID" },
                        { "sTitle": "Candidate ID" },
                        { "sTitle": "State" },
                        { "sTitle": "Site Name" },
                        { "sTitle": "Candidate Status" },
                        { "sTitle": "Current Status" },
                        { "sTitle": "ACTION" }
                    ],
                    "bDestroy": true
                });
            },
            error: function (data) {
                alert('Something went wrong..!!');
            }
        });
    } catch (e) {
        //exception
    }
}

<div class="col-md-12">
                <table id="grdMWSiteSurvey" class="display responsive nowrap"></table>
            </div>

In every row, there is a div with name VALIDATE on click of which I want to open the pop up.

在每一行中,都有一个名为VALIDATE的div,点击其中我想打开弹出窗口。

So for that what I tried a little bit is as followed.

因此,我尝试了一下,如下所示。

function OpenPopUpForUpdate(a) {
    var row = a.parentNode.parentNode;
    var rowIndex = row.rowIndex - 1;
    var SAPID = row.cells[0].innerHTML;       
}

<div id="popupdiv">
        <h1>This is opened in pop up</h1>
    </div>

But it is not opening the pop up. Also alert for some column is also not working. Please suggest on how to get this achieved.

但它没有打开弹出窗口。还警告某些列也无法正常工作。请告知如何实现这一目标。

1 个解决方案

#1

You can use jQueryui to display your data in a dialog. Given your snippet, you can go about doing it this way.

您可以使用jQueryui在对话框中显示数据。鉴于你的代码片段,你可以这样做。

$('#popupdiv').on('click', function(){
  $(this).dialog();
})

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

<div id="popupdiv">
   <h1>This is opened in pop up</h1>
</div>

A complete solution of displaying each row of a table can be done as demonstrated below where one can implement its own dialog with CSS style and Js function

显示表的每一行的完整解决方案可以完成,如下所示,可以用CSS样式和Js函数实现自己的对话框

$('table').on('click', 'tr', function(){
 let values = [];
 $(this).children().each(function(){
  values.push($(this).html());
 })
 $('#mod').css('display', 'block');
 $('#mod-value1').html(values[0]);
 $('#mod-value2').html(values[1]);
})

$('#mod').on('click', function(){
  $(this).css('display', 'none');
})

table {
  background-color: orange;
}
td {
  border: 1px solid red;
  margin: 0;
  cursor: pointer
}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content {
 top: 50%;
 left: 50%;
 width: 3cm;
 height: 3cm;
 border-radius: 2px;
 background-color: #fefefe;
 margin: auto
}

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

<table>
  <tr>
      <td>col11</td>
      <td>col12</td>
  </tr>
    <tr>
      <td>col21</td>
      <td>col22</td>
  </tr>
</table>
<div id="mod" class="modal">
   <div id="mod-content" class="modal-content">
      <div id="mod-value1"></div>
      <div id="mod-value2"></div>
   </div>
</div>

#1