javascript - Cannot read property childnotes of null while fetching data with ajax in php

Hello i am getting an error while fetching data with ajax as Cannot read property 'childNodes' of null can any one tell me what is going wrong with my codes, actually i have made a form to search data with date from to date to so after fetching the records i want to display them in table but childnode error is showing how can i resolve it. Most interestingly when i console i found the desired data just it is not showing inside of div2.

Jquery

$(document).on('submit','#date-search',function(e){
    e.preventDefault();
    // var url = $(this).attr('action');
    var data = $(this).serialize();
    $.ajax({
        url:"model/orders/orders.php?selectdate",
        type:"POST",
        data:data,
        success:function(data){
            // console.log(data);
            
            // $('#date-search')[0].reset();
            $('#div2').html(data);
            if(data==''){
            $('#div2').append('<tr class="odd"><td valign="top" colspan="5" class="dataTables_empty">No data available in table</td></tr>');
            }

            // $("#div2").html(data, function () {
            //   $(".table").dataTable({
            //     retrieve:true,
            //   });
            // });
        }

    });
    return false;
});

Copy code

php part

if(isset($_GET['selectdate'])){

  $date_from = $_POST['date_from'];
  $date_to = $_POST['date_to'];

  $sql_date = "select * from $tb_orders where book_date >=   '$date_from'  and  book_date <= '$date_to' order by id DESC";
  $res_date = mysqli_query($conn,$sql_date);
  if($num_date = mysqli_num_rows($res_date) > 0){
    $i=0;
    while($rows_date = mysqli_fetch_assoc($res_date)){
      $i++;

      $order_id = $rows_date['id'];
      $product = $rows_date['product_id'];
      $total_price = $rows_date['total_price'];
      $transac = $rows_date['transaction_no'];

      $sel_pro = "select * from $tb_products where id='$product'";
      $res_pro = mysqli_query($conn,$sel_pro);
      if($res_pro){
        $rows_pro = mysqli_fetch_assoc($res_pro);
        $pname = $rows_pro['pname'];
      }


      $sel_ro = "select * from $tb_customers where order_id='$order_id'";
      $res_ro = mysqli_query($conn,$sel_ro);
      if($res_ro){
        $rows_ro = mysqli_fetch_assoc($res_ro);
        $cust_name = $rows_ro['cust_name'];
        $cust_number = $rows_ro['cust_number'];
      }
      ?>
      <tr>
        <td><?php echo $i; ?></td>
        <td>
        <?php 
        if($cust_name == ''){
        echo 'N/A';
        }else{
        echo $cust_name; 
        }
        ?>
        </td>
        <td><?php echo date("d-m-Y", strtotime($rows_date['book_date'])); ?></td>
        <td><?php echo ucfirst($pname); ?></td>
        <td><a href="../uploads/<?php echo $rows['file']; ?>" target="_blank" class="btn btn-success btn-sm ml-1" download>Download</a></td>
        <td>Rs. <?php echo $total_price; ?></td>
        <td>
          <?php 
          if($transac == ''){
          echo 'N/A';
          }else{
          echo $transac; 
          }
          ?>
        </td>
        <td>
          <button onclick="alertify.confirm('Want to Delete','Are you sure you want to Delete?',function(){typedel(<?php echo $rows['id']; ?>)},function(){});" class="btn btn-danger btn-sm ml-2" title="Delete"><i class="mdi mdi-delete"></i></button>
        </td>
      </tr>
      <?php
    }
  }
}

Copy code

html part

<div class="card-body">
                     <div class="row">


                        <div class="col-sm-2"></div>
                        <div class="col-sm-8">
                         <div class="mx-auto">
                             <form class="form-inline mt-4 d-flex justify-content-center" method="post" id="date-search">
                                <input type="date" class="form-control mb-2 mr-sm-2" id="date_from" name="date_from" placeholder="Date from" required>
                                <input type="date" class="form-control mb-2 mr-sm-2" id="date_to" name="date_to" placeholder="Date to" required>
                                <button type="submit" class="btn btn-primary mb-2">Submit</button>
                             </form>
                         </div>
                         
                        </div>
                        <div class="col-sm-2"></div>

                        
                     </div>

                 </div>

                <div class="table-responsive pl-3 pr-3" id="tableWrap">
                    <table class="table download-excel">
                        <thead class="thead-light">
                            <tr>
                                <th scope="col">#</th>
                                <th scope="col">Customer</th>
                                <th scope="col">Booking</th>
                                <th scope="col">Product</th>
                                <th scope="col">File</th>
                                <th scope="col">Amount</th>
                                <th scope="col">Transaction Details</th>
                                <th scope="col">Actions</th>
                            </tr>
                        </thead>                        
                        <tbody id="div2">
                        </tbody>
                    </table>
                </div>
Copy code

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.