Malek Ben el ouafi Malek Ben el ouafi - 4 months ago 25
Ajax Question

Uncaught TypeError: Cannot read property 'outerHTML' of null

I try to get the content of table and put it in a new windows to print , but i alwys get this error:
the table is inside a modal , and it is return to modal dynamcly by ajax function :

this is the ajax function :

function view(id){
var html;
$.ajax({
url: "<?php echo site_url('admin/prescription/view_prescription_ajax') ?>/"+id,
type: 'POST',
dataType: 'html',
success:function(data){
html = data;
},
async: false
});
$('#view .modal-body').html(html);
$('#view').modal('show');
}


this is the htmt returned by this code

$data='';
$prescription = $this->prescription_model->get_prescription_by_id($id);
$template= $this->notification_model->get_template();
$data.='<table width="100%" border="0" id="printTable" class="pt" style="padding-bottom:0px; height:100%;" >
<thead>
<tr>
<td>
<table width="100%" style="border-bottom:1px solid;">
<tr>
<td style="line-height:110%">'.$template->header.'
</td>

</tr>
</table>
</td>
</tr>
</thead>
<tbody>
<tr>
<td >
<table width="100%">
<tr>
<td width="40%"><b>'.lang('name').'</b> : '.substr($prescription->patient,0,20).'</td>
<td width="18%"><b>'.lang('age').'</b> : '. date("Y")-$prescription->dob .' Years</td>
<td ><b>'.lang('sex').'</b> : '. $prescription->gender.'</td>
<td ><b>'.lang('id').'></b> :'.$prescription->prescription_id.'</td>
<td ><b>'.lang('date').'</b> : '. date("d-m-y", strtotime($prescription->date_time)).'</td>
</tr>
</table>
</td>
</tr>

<tr height="100%">
<td valign="top">
<table width="100%" border="0">
<tr>
<td width="51%" valign="top">
<table width="80%" border="0">
<tr>
<td width="100%">
<table border="0" >
<tr>
<td><b>Medical History</b></td>
</tr>';

$c = json_decode($prescription->case_history_id);

if(is_array($c)){
foreach($c as $new){
$data.='<tr><td>'.$dis = $new .'</td></tr>';
}
}else{
$data.='<tr><td>'.$c.'</td></tr>';
}

$data.='<tr>
<td>'. $prescription->case_history.'</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0">
<tr>
<td><b>Frequency</b></td>
</tr>
<tr>
<td>'.$prescription->frequency.'</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="51%">';

$d = json_decode($prescription->tests);
//echo '<pre>'; print_r($d);'</pre>';
if(!empty($d[0])){

$data.='<table border="0" width="100%">
<tr>
<td><b>'.lang('test').'</b></td>
</tr>';


$ins = json_decode($prescription->test_instructions);
if(is_array($d)){
$i=1;
foreach($d as $key => $new){

$data.='<tr><td>'.$i.'. '.$d[$key] .'<td></tr>';
if(!empty($ins[$key])){
$data.='<tr><td><p style="padding-left:14px;"><small>('.$ins[$key] .')</small></p><td></tr>';
}
$i++;}
}else{
$data.='<tr><td>'.$i.' '.$d.'<td></tr>';
$data.='<tr><td><p style="padding-left:14px;"><small>( '.$ins.' )</small></p><td></tr>';
}
$data.='</table>';
}
$data.='</td>
</tr>
</table>
</td>
<td valign="top">
<table border="0" width="100%" >
<tr>
<td><p><span style="font-size:26px"><b>R</span ><sub style="font-size:18px">x</b></sub></p></td>
</tr>';

$d = json_decode($prescription->medicines);
$ins = json_decode($prescription->medicine_instruction);
if(is_array($d)){
$i=1;
foreach($d as $key => $new){
if(!empty($d[$key]))
$data.='<tr><td style="padding-left:18px;">'.$i.'. '.$d[$key] .'<td></tr>';
$data.='<tr><td><p style="padding-left:32px;"><small>'.@$ins[$key] .'</small></p><td></tr>';
$i++;}
}else{
$data.='<tr><td style="padding-left:18px;">'.$i.' '.$d.'<td></tr>';
$data.='<tr><td><p style="padding-left:32px;"><small>'.$ins.'</small></p><td></tr>';
}

$data.='<tr>
<td>';
if(!empty($prescription->remark)){
$data.='<table width="100%" border="0">
<tr>
<td><b>'.lang('remark').'</b></td>
</tr>
<tr>
<td>'.$prescription->remark.'</td>
</tr>
</table>';
}
$data.='</td>
</tr>
</table>
</td>
</tr>

</table>
</td>
</tr>

</tbody>
<tfoot>
<tr>
<td style="border-top:1px solid;" class="aligncenter">

'.$template->footer.'
</td>
</tr>
</tfoot>

</table>


<div class="form-group no-print">
<div class="row no-print">
<div class="col-sm-4 pull-right">
<a class="btn btn-default yes-print no-print" id="print_p" onClick="printData();" style="margin-right: 5px;"><i class="fa fa-print"></i>'.lang('print').'</a>
<a href="http://medicalfrequencycentre.com/drsystem/admin/prescription/pdf/'.$prescription->id.' id="pdf" class="btn btn-primary no-print" style="margin-right: 5px;"><i class="fa fa-download"></i>'.lang('generate_pdf').'</a>
</div>

</div>
</div>
';

echo $data;


this is javascript

function printData()
{
var divToPrint=document.getElementById("printTable");
newWin= window.open("");
newWin.document.write(divToPrint.outerHTML);
newWin.print();
newWin.close();
}

Answer

you should call print data on success because events are not binding after dom content added to dom later. also don't forget to remove onClick="printData" from button attribute

function view(id){
    var html;
        $.ajax({
          url: "<?php echo site_url('admin/prescription/view_prescription_ajax') ?>/"+id,
          type: 'POST',
          dataType: 'html',
          success:function(data){
            html = data;
    $("#print_p").on("click", function(e){ printData(); });
          },
          async: false
        });
    $('#view .modal-body').html(html);
    $('#view').modal('show');
}