<script> // function validate() { // var cat_name = $('#cat_name').val(); // save_category(); // } </script> <style> #modal-add-category { overflow-y: scroll; } </style> <div class="modal fade" id="modal-add-section-document" name="modal-add-section-document" role="dialog" aria-hidden="true"> <form role="form" id="medical_exam_section_document_form" name="medical_exam_section_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 for <input class="widget-header" id='up_sec_name' name="up_sec_name" style="border:none;text-align :left;padding-left: 0px;"><input type="hidden" class="widget-header" id='up_sec_id' name="up_sec_id" style="border:none"> </h5> <div class="widget-toolbar"> <div class="widget-menu"> <button type="button" class="close" data-dismiss="modal"><i class="ace-icon fa fa-times"></i> </button> </div> </div> </div> <div class="modal-body"> <div class="row"> <div class="col-xs-3"> </div> <input id="appoint" type="hidden" style="height: 30px" class="form-control" name="appointment_id" id="appointment_id" value="<?php echo $checkup_id?>" /> <input id="emp_id" name="emp_id" type="hidden" value="<?php echo $emp_id?>" /> <input id="doc_id" name="doc_id" type="hidden" /> <div class="col-xs-6"> <input type="text" style="width:100%" 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_section" name="file_medical_exam_section" onchange="return fileValidation()" /> </div> <input type="hidden" name="medical_exam_id_doc" id="medical_exam_id_doc" value="<?php echo $_REQUEST['patient_id']; ?>"> </div> </div> </div> </div> <div class="widget-toolbox padding-8 clearfix"> <button type="button" onclick="save_checkup_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> .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() { $("#opd_form").submit(function(e) { e.preventDefault(); }); $('#modal-add-document').modal("show"); } function image(value) { 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">' content += '<div class="modal-content">' content += '<div class="modal-header">' content += '<h5 class="modal-title" style="text-align: center">Image ' 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">' content += '<div class="row"><a href=' + src + ' download><div class="form-group col-sm-12">' content += '</div><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 target="_blank" onclick="getMedicalDocument()">' // content+='</a>' // // content+='</div>' // content+='</div><div><div>' // $("#image_div").html(content); // $('#modal-img').modal("show"); // } function save_checkup_medical_exam_doc() { $.ajax({ url: "save_checkup_section_document.php", method: "POST", data: new FormData(document.getElementById("medical_exam_section_document_form")), contentType: false, processData: false, success: function(data) { BootstrapDialog.alert('Document Uploaded Successfully '); // getMedicalDocData(); location.reload(); $("#modal-add-section-document").modal('hide'); }, error: function(data) { BootstrapDialog.alert('Error Uploading Document'); } }); } function fileValidation() { var fileInput = document.getElementById('file_medical_exam_section'); 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_checkup_section(id) { $("#doc_id").val(id); $("#medical_exam_section_document_form").attr('target', '_blank'); $("#medical_exam_section_document_form").attr('method', 'POST'); $("#medical_exam_section_document_form").attr('action', 'get_checkup_section_document.php?doc_id=' + id); $("#medical_exam_section_document_form").submit(); } function getMedicalDocData() { $.ajax({ url: "get_opd_document.php", method: "get", data: { appointment_id: $('#appointment_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_checkup_section('" + data .id + "')\" /> </td>" content += '<td align="center"><a href="#" class="btn-lg" data-toggle="tooltip" id="deletebtn" onclick="delete_checkup_section_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_checkup_section_document(' + data.id + ')" title="Delete"><span class="glyphicon glyphicon-trash"></span></a></td></tr>' $("#medical_doc_id tbody").append(content); } }, error: function(data) {} }); } function delete_checkup_section_document(delete_id) { $("#medical_doc_id").on("click", ".glyphicon-trash", function(event) { $('#medical_doc_' + delete_id).remove(); }); $.ajax({ url: "delete_checkup_section_document.php", data: { delete_id: delete_id }, method: "POST", success: function(data) { BootstrapDialog.alert('Document Deleted Successfully '); //getMedicalDocData(); location.reload(); }, error: function(data) { BootstrapDialog.alert('Error In deleting Upload Document'); } }); } </script>