<style> #modal-add-document{ overflow-y:scroll; } </style> <div id="image_div"> </div> <div class="modal fade" id="modal-add-document" name="modal-add-document" role="dialog" aria-hidden="true"> <form role="form" id="medical_exam_document_form" name="medical_exam_document_form" enctype="multipart/form-data" action="#" method="post"> <div class="modal-dialog"> <div class="modal-content"> <div class="widget-header"> <h5 class="widget-title">Upload Supporting Document </h5> <div class="widget-toolbar"> <div class="widget-menu"> <button type="button" class="close" style="" data-dismiss="modal" ><i class="ace-icon fa fa-times"></i> </button> </div> </div> </div> <div class="modal-body"> <div class="row" style="margin-top:0px;"> <div class="col-xs-3"> </div> <div class="col-xs-6"> <select style="width: 271px;" name= "medical_exam_document_opt" id="medical_exam_document_opt" onclick="load()"> <?php $query = "SELECT id, document_name, code FROM document_type_master"; $result = @mysqli_query($conn,$query); while( $row = mysqli_fetch_assoc($result)){ echo '<option value="'.$row['document_name'].'" >'.$row['document_name'].'</option>'; } ?> </select> <input type="text" style="width:100%; margin-top: 5px; margin-left:0px" placeholder="Enter Document Name" id="medical_exam_document" name="medical_exam_document" /> </div> </div> <div class="row" style="margin-top: 10px"> <div class="form-group"> <div class="col-xs-3"> </div> <div class="col-xs-6"> <div class="form-group"> <input type="file" id="file_medical_exam" name="file_medical_exam" onchange="return fileValidation()"/> </div> <input id="doc_id" name="doc_id" type="hidden" /> <input type="hidden" name="medical_exam_id_doc" id="medical_exam_id_doc" value="<?php echo $_REQUEST['medical_exam_id']; ?>"> </div> </div> </div> </div> <div class="widget-toolbox padding-8 clearfix" > <button type="button" id="upload" onclick="save_medical_exam_doc()" class="btn btn-info btn-sm save_button" ><i class="ace-icon fa fa-floppy-o bigger-110"></i>Upload </button> <button type="button" class="btn btn-danger btn-sm" data-dismiss="modal"><i class="ace-icon fa fa-times bigger-110"></i>Cancel</button> </div> </div> </div> </form> </div> <style> .row{ margin-top:40px; padding: 0 10px; } .clickable{ cursor: pointer; } .panel-heading span { margin-top: -20px; font-size: 15px; } img { max-width: 100%; height: auto; width: auto\9; /* ie8 */ } </style> <script> function open_popup_img(){ $("#medical_examination_form").submit(function(e){ e.preventDefault(); }); $('#medical_exam_document').val(""); $('#file_medical_exam').val(""); $('#modal-add-document').modal("show"); } function open_doc_popup_img(medical_exam_id){ $("#medical_examination_form").submit(function(e){ e.preventDefault(); }); $('#medical_exam_id_doc').val(medical_exam_id); $('#medical_exam_document').val(""); $('#file_medical_exam').val(""); $('#modal-add-document').modal("show"); } function image(value,title){ var src=value.src; var content=""; var content='<div class="modal fade" id="modal-img" role="dialog" aria-hidden="true">' content+='<div class="modal-dialog modal-lg" style="width:80%;height:100%">' content+='<div class="modal-content" style="width:100%;height:100%">' content+='<div class="modal-header">' content+='<h5 class="modal-title" style="text-align: center">'+title content+='<button type="button" class="close" data-dismiss="modal"' content+='aria-label="Close">' content+='<span aria-hidden="true">×</span>' content+='</button></h5>' content+='</div>' content+='<div class="modal-body" style="width:100%;height:100%">' content+='<a href='+src+' download><div class="form-group col-sm-12">' content+='</div style="width:100%;height:100%" ><img height="300" weight="300" src='+src+' alt="new image"/></a></div>' content+='</div>' content+='</div><div><div>' $("#image_div").html(content); $('#modal-img').modal("show"); } function pdf_preview(value, title){ var src=value.src; var content=""; var content='<div class="modal fade" id="modal-img" role="dialog" aria-hidden="true">' content+='<div class="modal-dialog modal-lg" style="width:80%;height:100%" >' content+='<div class="modal-content" style="width:100%;height:100%">' content+='<div class="modal-header">' content+='<h5 class="modal-title" style="text-align: center">'+title content+='<button type="button" class="close" data-dismiss="modal"' content+='aria-label="Close">' content+='<span aria-hidden="true">×</span>' content+='</button></h5>' content+='</div>' // content+='<div class="modal-body" style="width:100%;height:100%">' content+='<a href='+src+' download>' content+='<iframe style="width:100%;height:100%" src='+src+'/></iframe></a>' // content+='</div>' content+='</div><div><div>' $("#image_div").html(content); $('#modal-img').modal("show"); } function save_medical_exam_doc(){ $("#upload").disabled = true; $.ajax({ url:"save_medical_exam_document.php", method:"POST", data:new FormData(document.getElementById("medical_exam_document_form")), contentType:false, processData:false, success:function(data){ BootstrapDialog.alert('Document uploaded successfully '); getMedicalDocData(); $("#modal-add-document").modal('hide'); }, error:function(data){ BootstrapDialog.alert('Error Uploading Document'); } }); } function fileValidation(){ var fileInput = document.getElementById('file_medical_exam'); var filePath = fileInput.value; var allowedExtensions = /(\.jpg|\.jpeg|\.png|\.pdf)$/i; if(!allowedExtensions.exec(filePath)){ BootstrapDialog.alert('Please upload only image and pdf file '); fileInput.value = ''; return false; }else{ return; } } function getMedicalDocument(id){ $("#doc_id").val(id); $("#medical_exam_document_form").attr('target', '_blank'); $("#medical_exam_document_form").attr('method', 'POST'); $("#medical_exam_document_form").attr('action', 'get_document.php'); $("#medical_exam_document_form").submit(); } var counter=0; function getMedicalDocData(){ $.ajax({ url:"getMedicalDocData.php", method:"get", data:{medical_exam_id:$('#medical_exam_id').val()}, dataType:'json', async:false, success:function(data){ var content=""; if (data.medical_doc_type=='application/pdf'){ content="<tr id='medical_doc_"+data.id+"'><td>"+data.medical_doc_desc+"</td><td>" content+="<a href= \"#\" ><img src= \"images/pdf.png\" width=\"35\" height=\"35\" onclick=\"$('#med_doc_"+data.id+"').click()\" /></a> <img id=\"med_doc_"+data.id+"\" style= \"display:none\" src = \"data:"+data.medical_doc_type+";base64,"+data.medical_doc+"\" alt = \"pdf\" onclick=\"getMedicalDocument('"+data.id+"')\" /> </td>" content+='<td align="center"><a href="#" class="btn-lg" data-toggle="tooltip" id="deletebtn" onclick="delete_opd_document('+data.id+')" title="Delete"><span class="glyphicon glyphicon-trash"></span></a></td></tr>' $("#medical_doc_id tbody").append(content); }else{ content="<tr id='medical_doc_"+data.id+"'><td>"+data.medical_doc_desc+"</td><td>" content+="<img width=\"35\" height=\"35\" src = \"data:"+data.medical_doc_type+";base64,"+data.medical_doc+"\" alt = \"new image\" onclick=\"image(this,'"+data.medical_doc_desc+"')\" /></td>" content+='<td align="center"><a href="#" class="btn-lg" data-toggle="tooltip" id="deletebtn" onclick="delete_opd_document('+data.id+')" title="Delete"><span class="glyphicon glyphicon-trash"></span></a></td></tr>' $("#medical_doc_id tbody").append(content); } counter++; }, error:function(data){ } }); } function delete_opd_document(delete_id){ $("#medical_doc_id").on("click", ".glyphicon-trash", function (event) { $('#medical_doc_'+delete_id).remove(); }); $.ajax({ url:"delete_sickness_document.php", data:{delete_id:delete_id}, method:"POST", success:function(data){ BootstrapDialog.alert('Document Deleted Successfully '); //getMedicalDocData(); }, error:function(data){ BootstrapDialog.alert('Error In deleting Upload Document'); } }); } document.getElementById("medical_exam_document").style.display = "none"; function load(){ var option = document.getElementById("medical_exam_document_opt").value; if(option == "Other"){ document.getElementById("medical_exam_document").value = ""; document.getElementById("medical_exam_document").style.display = "block"; }else{ document.getElementById("medical_exam_document").style.display = "none"; document.getElementById("medical_exam_document").value = document.getElementById("medical_exam_document_opt").value; } } </script>