Cannot read property 'mData' of undefined and Cannot read property 'parentNode' of null

xtonkz · July 2018

hello guys, i am kinda new to this datatable
i dont know for sure whats wrong with my code, it sasys an error "Cannot read property 'mData' of undefined" and "Cannot read property 'parentNode' of null".

to show datatable i am using onChange event like this

> var first;
>    $(function() {
>         $("#ddata").bind("change", function() {
>           first = document.getElementById("tollroute").value;
>           var e = $("#ddata").find(":selected").val();
>             $.ajax({
>                 type: "POST", 
>                 url: "showdata-experiment.php",
>                 data:'toll_id='+first + '&jenis_data_id='+e,
>                 success: function(data) {
>                     $("#mytable").html(data);
>                     var table = $("#mytable").DataTable({ 
>                       "pagination": true, 
>                     "searching":false,
>                       "destroy":true,
>                       "columns":[
>                               {"data":"sta"},
>                               {"data":"right"},
>                               {"data":"left"},
>                               {"data":"average"},
>                               {"data":"speed"},
>                               {"data":"latitude"},
>                               {"data":"longtitude"},
>                               {"data":"altitude"},
>                               {"data":"view"}
>                           ]
>                       
>                    });
>                   
>                   $("#mytable2").html(data);
>                     var table2 = $("#mytable2").DataTable({ 
>                       "pagination": true, 
>                     "searching":false,
>                       "destroy":true,
>                       "columns":[
>                           {"data":"date"},
>                               {"data":"object"},
>                               {"data":"start"},
>                               {"data":"finish"},
>                               {"data":"speed"},
>                               {"data":"test_water"},
>                               {"data":"skid_rest"}
>                       ]
>                    });
>                   
>                 }
>               
>             });
>           
>         });
> 
>     });

i have 2 table for result..

for the showdata-experiment it goes like this

i    nclude('./connections/connect.php');
    $db = mysql_select_db("gisdb", $connect);
    
    //IRI
    $tollid=isset($_POST['toll_id']) ? $_POST['toll_id']:"";
    $jenisdataid=isset($_POST['jenis_data_id']) ? $_POST['jenis_data_id']:"";
    $raw=mysql_query("SELECT * FROM iri_toll WHERE toll_id = '$tollid' AND jenis_data_id = '$jenisdataid'", $connect);
    $dat=array();
    while ($rdat = mysql_fetch_array($raw)){
    $dat[] = array('sta' => $rdat['sta'], 'right' => $rdat['right'], 'left'=> $rdat['left'], 'average' => $rdat['average'], 'speed' => $rdat['speed'], 'latitude' => $rdat['latitude'], 'longtitude' => $rdat['longtitude'], 'altitude' => $rdat['altitude']);} 
    
     
     
    //SKID
    $skid=mysql_query("SELECT * FROM skid_toll WHERE toll_id = '$tollid' AND jenis_data_id = '$jenisdataid'", $connect);
    $skid_d=array();
    while ($sdat = mysql_fetch_array($skid)){
    $skid_d[] = array('date' => $sdat['date'], 'object' => $sdat['object'], 'start'=> $sdat['start'], 'finish' => $sdat['finish'], 'speed' => $sdat['speed'], 'test_water' => $sdat['test_water'], 'skid_rest' => $sdat['skid_rest']);} 
    
    $jenisData = intval($_POST["jenis_data_id"]);
    
    
    if($jenisData <= 8) : 
    <div class="wrap-table1">
      <table class="table table-bordered table-hover">
      <thead>
        <tr>
          <th width="7%" valign="middle">STA</th>
          <th width="7%" valign="middle">Right</th>
          <th width="7%" valign="middle">Left</th>
          <th width="7%" valign="middle">Average</th> 
          <th width="5%" valign="middle">Speed</th>
          <th width="13%" valign="middle">Latitude</th>
          <th width="13%" valign="middle">Longtitude</th>
          <th width="10%" valign="middle">Altitude</th>
          <th width="7%" valign="middle">View on Map</th>
        </tr>
      </thead>
      <tbody>
       
       
        foreach($dat as $rdat){
        echo'<tr>';
        echo '<td>'.$rdat['sta'].'</td>';
        echo '<td>'.$rdat['right'].'</td>';
        echo '<td>'.$rdat['left'].'</td>';
        echo '<td>'.$rdat['average'].'</td>';
        echo '<td>'.$rdat['speed'].'</td>';
        echo '<td>'.$rdat['latitude'].'</td>';
        echo '<td>'.$rdat['longtitude'].'</td>';
        echo '<td>'.$rdat['altitude'].'</td>';
        echo '<td>'.'<input type=button onclick="openMap(' . $rdat['latitude'] . ',' . $rdat['longtitude'] . ')" value="View Map">'.'</td>';
        echo'</tr>';
        } 
        
      </tbody>  
    </table>
    </div>  
     else : 
    <div class="wrap-table2">
    <table class="table table-bordered table-hover">
      <thead>
        <tr>
          <th width="7%" valign="middle">Date</th>
          <th width="15%" valign="middle">Object</th>
          <th width="7%" valign="middle">Start</th>
          <th width="7%" valign="middle">Finish</th>
          <th width="5%" valign="middle">Speed</th>
          <th width="7%" valign="middle">Test Water Depth</th>
          <th width="13%" valign="middle">Skid Resitance</th>
        </tr>
      </thead>
      <tbody>
    <?php
        foreach($skid_d as $sdat){
        echo'<tr>';
        echo '<td>'.$sdat['date'].'</td>';
        echo '<td>'.$sdat['object'].'</td>';
        echo '<td>'.$sdat['start'].'</td>';
        echo '<td>'.$sdat['finish'].'</td>';
        echo '<td>'.$sdat['speed'].'</td>';
        echo '<td>'.$sdat['test_water'].'</td>';
        echo '<td>'.$sdat['skid_rest'].'</td>';
        echo'</tr>';
        }
    
      </tbody>  
    </table>
    </div>
     endif;

the problem is whenever i change value select option, it says and error and datable didnt works..
any clue guys?

sorry for my english..

colin · July 2018

Hi @xtonkz ,

At a glance, that looks OK. We're happy to take a look, but it would help if you could link to a running test case showing the issue so we can offer some help. 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

xtonkz · July 2018

hi colin,

thanks before..for now i dont have link page that i am working on.
all my work connected to local database, i dont know how to show you running test..lol

anyway, i have 3 main select..the first select is to determine 2nd select option..the 2nd select to determine 3rd select option..
https://jsbin.com/diriyim/edit?html,css,js

2 value from 2nd and 3rd select option is to determine which table that i have to show..if value < 8 then i have to show 1st table else 2nd table..

this my select-toll.php

        $db = mysql_select_db("gisdb", $connect);
        echo $_POST['jenis_toll_id'];
        $st = mysql_query("SELECT * FROM list_toll WHERE jenis_toll_id ='".$_POST['jenis_toll_id']."'",$connect);

                            <option value="" disabled selected>--Select--</option>


                            while ($rst=mysql_fetch_assoc($st)){
                            echo "<option value='". $rst['toll_id']. "'>" . $rst['nama_toll'] . "</option>";}

this my select-data.php

        include('./connections/connect.php');
        $db = mysql_select_db("gisdb", $connect);
        echo $_POST['toll_id'];
        $st = mysql_query("SELECT * FROM trial_tipe_data WHERE value BETWEEN 1 AND (SELECT iri_a FROM list_toll WHERE toll_id = '".$_POST['toll_id']."') or value BETWEEN 5 AND (SELECT iri_b FROM list_toll WHERE toll_id = '".$_POST['toll_id']."') or value BETWEEN 9 AND (SELECT skid_a FROM list_toll WHERE toll_id = '".$_POST['toll_id']."') or value BETWEEN 13 AND (SELECT skid_b FROM list_toll WHERE toll_id = '".$_POST['toll_id']."')", $connect);

        ?>

                            <option value="" disabled selected>--Select--</option>
                            <?php
                            while ($rdclass=mysql_fetch_assoc($st)){
                            echo "<option value='". $rdclass['jenis_data_id']."'>" . $rdclass['t_name'] . "</option>";}

this my show-data.php

        include('./connections/connect.php');
        $db = mysql_select_db("gisdb", $connect);

        //IRI
        $tollid=isset($_POST['toll_id']) ? $_POST['toll_id']:"";
        $jenisdataid=isset($_POST['jenis_data_id']) ? $_POST['jenis_data_id']:"";
        $raw=mysql_query("SELECT * FROM iri_toll WHERE toll_id = '$tollid' AND jenis_data_id = '$jenisdataid'", $connect);
        $dat=array();
        while ($rdat = mysql_fetch_array($raw)){
        $dat[] = array('sta' => $rdat['sta'], 'right' => $rdat['right'], 'left'=> $rdat['left'], 'average' => $rdat['average'], 'speed' => $rdat['speed'], 'latitude' => $rdat['latitude'], 'longtitude' => $rdat['longtitude'], 'altitude' => $rdat['altitude']);} 
        ?>

         <?php
        //SKID
        $skid=mysql_query("SELECT * FROM skid_toll WHERE toll_id = '$tollid' AND jenis_data_id = '$jenisdataid'", $connect);
        $skid_d=array();
        while ($sdat = mysql_fetch_array($skid)){
        $skid_d[] = array('date' => $sdat['date'], 'object' => $sdat['object'], 'start'=> $sdat['start'], 'finish' => $sdat['finish'], 'speed' => $sdat['speed'], 'test_water' => $sdat['test_water'], 'skid_rest' => $sdat['skid_rest']);} 

        $jenisData = intval($_POST["jenis_data_id"]);
        ?>

        <?php if($jenisData <= 8) : ?>
        <div class="wrap-table1">
          <table class="table table-bordered table-hover" id="mytable">
          <thead>
            <tr>
              <th scope="col" width="7%" valign="middle">STA</th>
              <th scope="col" width="7%" valign="middle">Right</th>
              <th scope="col" width="7%" valign="middle">Left</th>
              <th scope="col" width="7%" valign="middle">Average</th> 
              <th scope="col" width="5%" valign="middle">Speed</th>
              <th scope="col" width="13%" valign="middle">Latitude</th>
              <th scope="col" width="13%" valign="middle">Longtitude</th>
              <th scope="col" width="10%" valign="middle">Altitude</th>
              <th scope="col" width="7%" valign="middle">View on Map</th>
            </tr>
          </thead>
          <tbody>

            <?php
            foreach($dat as $rdat){
            echo'<tr>';
            echo '<td>'.$rdat['sta'].'</td>';
            echo '<td>'.$rdat['right'].'</td>';
            echo '<td>'.$rdat['left'].'</td>';
            echo '<td>'.$rdat['average'].'</td>';
            echo '<td>'.$rdat['speed'].'</td>';
            echo '<td>'.$rdat['latitude'].'</td>';
            echo '<td>'.$rdat['longtitude'].'</td>';
            echo '<td>'.$rdat['altitude'].'</td>';
            echo '<td>'.'<input type=button onclick="openMap(' . $rdat['latitude'] . ',' . $rdat['longtitude'] . ')" value="View Map">'.'</td>';
            echo'</tr>';
            } 
            ?>
          </tbody>  
        </table>
        </div>  
        <?php else : ?>
        <div class="wrap-table2">
        <table class="table table-bordered table-hover" id="mytable2">
          <thead>
            <tr>
              <th scope="col" width="7%" valign="middle">Date</th>
              <th scope="col" width="15%" valign="middle">Object</th>
              <th scope="col" width="7%" valign="middle">Start</th>
              <th scope="col" width="7%" valign="middle">Finish</th>
              <th scope="col" width="5%" valign="middle">Speed</th>
              <th scope="col" width="7%" valign="middle">Test Water Depth</th>
              <th scope="col" width="13%" valign="middle">Skid Resitance</th>
            </tr>
          </thead>
          <tbody>
        <?php
            foreach($skid_d as $sdat){
            echo'<tr>';
            echo '<td>'.$sdat['date'].'</td>';
            echo '<td>'.$sdat['object'].'</td>';
            echo '<td>'.$sdat['start'].'</td>';
            echo '<td>'.$sdat['finish'].'</td>';
            echo '<td>'.$sdat['speed'].'</td>';
            echo '<td>'.$sdat['test_water'].'</td>';
            echo '<td>'.$sdat['skid_rest'].'</td>';
            echo'</tr>';
            }
        ?>
          </tbody>  
        </table>
        </div>
        <?php endif; ?>

and the problem is..
when i am selecting the 3rd select option

then

everthing looks fine,,but i have 1 eror

then when i am change the value of 3rd select option

ps : IRI -> table 1
SKID -> table 2

thanks before..

colin · July 2018

Hi @xtonkz ,

The problem is because you're building the two tables with the same data that's returned in the Ajax call:

$("#mytable").html(data);
$("#mytable2").html(data);

But the two tables have a different number of columns, so one of them will fail. That's why in the last screenshot above, you're seeing less column in the data.

Cheers,

Colin

xtonkz · July 2018

hi @colin ,

do you have any idea to solve this?

i've made some progress,,there is no error message, 1st and 2nd tables looks good..
but still my 2nd table's datatable didnt work..

here's my code for now

        var select2;
            var select3;
            $(function(){
                $("#ddata").bind("change", function(){
                    select2  = document.getElementById("tollroute").value;
                    select3 = $("#ddata").find(":selected").val();
                    if(select3 <= 8){
                        $.ajax({
                            type:"POST",
                            url:"showdata-experiment.php",
                            data:{toll_id:select2, jenis_data_id:select3},
                            success:function(data){
                                $("#mytable").html(data);
                                var table1 = $("#mytable").DataTable({
                                    "pagination": true, 
                                    "searching":false,
                                    "destroy":true,

                                })
                            }
                              });

                                    }
                    else {
                        $.ajax({
                            type:"POST",
                            url:"showdata-experiment.php",
                            data:{toll_id:select2, jenis_data_id:select3},
                            success:function(data){
                                alert(select2);
                                alert(select3);
                                $("#mytable").html(data);
                                var table2 = $("#mytable2").DataTable({
                                    "pagination":true,
                                    "searching":false,
                                    "destroy":true

                                })

                            }
                              });

                            } 

                });
            });

i've some rough idea in my mind,maybe i should make "if statement" inside ajax but i am not sure..
thanks for your answer before

regards,
xtonkz

colin · July 2018

Just a fast one as on phone, but should line 32 be setting up the second table? It looks like it's setting up the html for the first table, then initialising the second

xtonkz · July 2018

oh right my mistake..
just now i changed it to mytable2 then the 2nd table didnt show at all..
/sigh

colin · July 2018

Doesn't my comment from July 9th still stand - it looks like you're initialising both tables with the same HTML, despite them having different widths? I think you need to follow that code through, looking at what it does, both tables seem a bit jumbled.

xtonkz · July 2018

oh right @colin ,

i've figured it out..thanks a lot

regards,

xtonkz

Cannot read property 'mData' of undefined and Cannot read property 'parentNode' of null

Cannot read property 'mData' of undefined and Cannot read property 'parentNode' of null

Replies

Howdy, Stranger!

Categories

DataTables

Cannot read property 'mData' of undefined and Cannot read property 'parentNode' of null

Cannot read property 'mData' of undefined and Cannot read property 'parentNode' of null

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables