javascript - 未捕获的类型错误 : Cannot read property 'outerHTML' of null

Question

我尝试获取表格的内容并将其放入新窗口中进行打印，但我总是收到此错误:表格位于模态中，通过ajax函数动态返回模态:

这是ajax函数:

 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');
}

这是此代码返回的htmt

$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;

这是 JavaScript

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

Answer 1

您应该在成功时调用打印数据，因为稍后将 dom 内容添加到 dom 后事件不会绑定(bind)。也不要忘记从按钮属性中删除 onClick="printData"

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');
}