Problem datatable modal datatable

Jorge toro

From a search engine I create a table

var table = $('#tabla1').DataTable( {

    "ajax": {
    "url" : "buscador.php",
    "type": "POST",
    "data" : valor},
     "columns": [
        { "data": "correlativo" },
        { "data": "num_cuenta_doc" },
        { "data": "num_docu_doc" },
        { "data": "monto_doc" },
        { "data": "fecha_doc" },
        { "data": "tipo_doc" },
        { "data": "ruta_doc" },
        { "data": 'id_doc', "visible": false }
    ]

    });

When selecting a tr call modal and table load

$('#tabla1 tbody').on('click', 'tr', function (e) {

    $("#myModal").modal({
     keyboard: false   
    });

    var data2 = table.row( this ).data();
    var id=data2.id_doc 

    $.ajax({
    processing: true,
    serverSide: true,
    data: {'id_foto':id} ,
    dataType: "json",
    url:   'valida.php',
    type:  'post',
    success:  function (data1) {

        $("#foto").html("").append($("<iframe></iframe>",{
        src:data1,
        css:{"width":"800", "height":"400"}
     })); 

            }
    }); 

   var valor={"id":id};

   var tabla2= $('#modaltabla').DataTable( {   
    destroy:true,
    ordering: false,
    "ajax": {
    "url" : "buscador.php",
    "type": "POST",
    "data" : valor},
    "columns": [
        { "data": "correlativo" },
        { "data": "num_cuenta_doc" },
        { "data": "num_docu_doc" },
        { "data": "monto_doc" },
        { "data": "fecha_doc" },
        { "data": "tipo_doc" },
        { "data": "ruta_doc" },
        { "data": 'id_doc_foto2' , "visible": false} //"visible": false   
    ]
    });     

    $('#foto2').empty();

});

next al hacer click en tr llama una imagen

$('#modaltabla').on('click', 'tr', function () {

    var tabla2 = $('#modaltabla').DataTable();  

    alert(tabla2);  
    var data3 = tabla2.row( this ).data();

    var id2=data3.id_doc_foto2;


    $.ajax({
    processing: true,
    serverSide: true,
    data: {'id_foto':id2} ,
    dataType: "json",
    url:   'valida.php',
    type:  'post',
    success:  function (data3) {

      $("#foto2").html("").append($("<iframe></iframe>",{
        src:data3,
        css:{"width":"800", "height":"400"}
     })); 

            }
    });


    });

//  data3.id_doc_foto2=null;
//  data.id_doc=null;
}); 

The problem that when the second table is empty by not fetching data, sie, pre gives error canot ready '_aData' of undefined.

If the second tabal brings data that error does not give.

The error in firefox does not problem the error in Chrone problem