I'm trying to get a clickable row with no results

I'm trying to get a clickable row with no results

I just need a clickable row that creates a simple link to go to another page based on the data in the first column. Unfortunately, I'm not getting any results when I click. The example

$('#example tbody').on('click', 'tr', function () {
        var data = table.row( this ).data();
        alert( 'You clicked on '+data[0]+'\'s row' );
    } );

from https://datatables.net/examples/advanced_init/events_live.html doesn't seem to work.

My entire code: //Everything else works but that. //

<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/se/jszip-2.5.0/dt-1.10.20/b-1.6.1/b-html5-1.6.1/fc-3.3.0/fh-3.1.6/sl-1.3.1/datatables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/zf-6.4.3/jq-3.3.1/jszip-2.5.0/dt-1.10.20/b-1.6.1/b-html5-1.6.1/fc-3.3.0/fh-3.1.6/kt-2.5.1/sc-2.0.1/sl-1.3.1/datatables.min.css"/>
<link href="dt-alter.css" rel="stylesheet" type="text/css">
</head>
<body style="margin:auto;padding-top:50px">
    <table cellpadding="3" cellspacing="0" border="0" style="width: 67%; margin: 0 auto 2em auto;">
        <thead>
            <tr>
                <th>Target</th>
                <th>Search text</th>
            </tr>
        </thead>
        <tbody>
            <tr id="filter_global">
                <td>Global search</td>
                <td align="center"><input type="text" class="global_filter" id="global_filter"></td>
            </tr>
            
           
            
           
        </tbody>
    </table><table id="example" cellpadding="3" cellspacing="0" border="0" class="display stripe dt-responsive nowrap dt-left hover" >
        <thead>
            <tr>
                <th>master program number</th>
                <th>master program name</th>
                <th>program</th>
                <th>account number</th>
                <th>account name</th>
                <th>policy number</th>
                <th>credit risk analyst</th>
                <th>agency name</th>
                <th>csc</th>
            </tr>
        </thead>
      
        
    </table>
    
    
   

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/v/zf-6.4.3/jq-3.3.1/jszip-2.5.0/dt-1.10.20/b-1.6.1/b-html5-1.6.1/fc-3.3.0/fh-3.1.6/kt-2.5.1/sc-2.0.1/sl-1.3.1/datatables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script>
function filterGlobal () {
    $('#example').DataTable().search(
        $('#global_filter').val()
    ).draw();
}
 
function filterColumn ( i ) {
    $('#example').DataTable().column( i ).search(
        $('#col'+i+'_filter').val() 
    ).draw();
}
    
    $(document).ready(function () {
      $.ajax({
        url: "http://sunrhythms.com/work/HCL/amerisure/json/open_query.json",
        dataType: "jsonp", // jsonp
        type: "POST",
        jsonpCallback: 'processFunction', // add this property
        contentType: "application/json; charset=utf-8",
        success: function (result, status, xhr) {
         var table = $('#example').DataTable({
              "scrollX": true,
              fixedHeader: true,
               fixedColumns:   {
            leftColumns: 2
        },
              sDom: 't',
            data: result,
            columns: [
              { data: 'master program number' },
              { data: 'master program name' },
              { data: 'program' },
              { data: 'account number' },
              { data: 'account name' },
              { data: 'policy number' },
              { data: 'credit risk analyst' },
              { data: 'agency name' },
              { data: 'csc' }
            ],
              columnDefs: [{
      targets: -1,
     
      className: 'dt-nowrap',
      className: 'dt-left'
                 
    }],
            "pageLength": 25
          });
        },
          
          
          
        error: function (xhr, status, error) {
          console.log("Result: " + status + " " + error + " " + xhr.status + " " + xhr.statusText)
        }
      });
        
        
        
    $('#example tbody').on('click', 'tr', function () {
        var data = table.row( this ).data();
        alert( 'You clicked on '+data[0]+'\'s row' );
    } );
        
        $('input.global_filter').on( 'keyup click', function () {
        filterGlobal();
    } );
        
        
        $('input.column_filter').on( 'keyup click', function () {
        filterColumn( $(this).parents('tr').attr('data-column') );
    } );
        
        
        
    });
 

    </script>
</body>
</html>

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735
    edited December 2019

    Is the click event running but you are getting errors? Take a look at the browser's console.

    I think your are getting something like table is undefined. You have var table = $('#example').DataTable({ within the success function of your ajax call. This means that table is available in that function's scope. You will need declare the variable globally, var table;, for example. Then remove the var from the Datatables init line.

    Next issue is this line alert( 'You clicked on '+data[0]+'\'s row' );. Since you are using objects you need to change data[0] to data['master program number'].

    If this doesn't help then please provide a link to your page or a test case replicating the issue so we can help debug.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

  • amazeinstudios@gmail.comamazeinstudios@gmail.com Posts: 35Questions: 6Answers: 0
    edited December 2019

    I am not getting an error... ' var table = ' is at the start of the datable...
    My guess is that this is serverside from json.

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735
    edited December 2019

    The test case helps! Its not always easy or obvious all the issues with code snippets even if they are complete like yours :smile:

    When the page is loaded you don't have a tbody tag for this statement to add an event handler to: $('#example tbody').on('click', 'tr', function () {. The reason is due to the async Ajax call not being complete when that code is executed on page load. You can either move the click event code into initComplete or you can change the selector to: $('#example').on('click', 'tbody tr', function () {. Now the event is attached to the table which exists.

    Now you will get the errors I mentioned:

    Uncaught ReferenceError: table is not defined

    Instantiated the table variable globally and removed var from the statement in the success function.

    The alert then shows:

    You clicked on undefined's row

    Changed data[0] to data['master program number'].

    Here is the updated example:
    http://live.datatables.net/buguhuku/1/edit

    Kevin

  • amazeinstudios@gmail.comamazeinstudios@gmail.com Posts: 35Questions: 6Answers: 0
    edited December 2019

    I thought the "table" variable has to point to the datatables instance.

    it shows this for me on click:

    ReferenceError: alert is not defined
        at HTMLTableRowElement.<anonymous> (http://live.datatables.net/runner:64:9)
        at HTMLTableElement.dispatch (http://code.jquery.com/jquery-1.11.3.min.js:4:8549)
        at HTMLTableElement.r.handle (http://code.jquery.com/jquery-1.11.3.min.js:4:5252)"
    
  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735
    edited December 2019 Answer ✓

    I thought the "table" function has to point to the datatables instance.

    You are assigning the Datatables API to the variable table. The variable falls under Javascript scope rules.

    ReferenceError: alert is not defined

    I don't see that error. When I run the script I see this:

    runner:64 Ignored call to 'alert()'. The document is sandboxed, and the 'allow-modals' keyword is not set.
    

    This means the the JS BIN environment won't pop alerts. You can either change the alert statement to a console.log statement. Or you can click upward pointing arrow, next to Auto-run JS, in the upper right of the Output tab.

    Kevin

This discussion has been closed.