<style>
.hidden {
display: none;
}
.imgSize {
height: 40px;
width: 70px;
}
.carousel-inner > .item > img, .carousel-inner > .item > div,
.carousel-inner > .item > a > img {
width: 100%;
margin: auto;
}
.modal1 {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.9);
}
.modal-content1 {
margin: auto;
display: block;
width: 80%;
max-width: 614px;
max-height: 400px;
}
.modal-content1, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
.close-popup {
position: absolute;
top: 60px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.download-file {
position: absolute;
top: 66px;
right: 70px;
color: #f1f1f1;
font-size: 25px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
</style>
<script>
$( document ).ready(function() {
$("#SavepatientResultsDetails_instruction").attr("disabled", true);
var docsCount = $('#SavepatientResultsDetails_docsCount').val();
$('#SavepatientResultsDetails_resultUploadFile1_div').remove();
if($("#SavepatientResultsDetails_testResultStatus").val() == "Close" ){
$("#SavepatientResultsDetails_testResult").attr("disabled", true);
}else{
$("#SavepatientResultsDetails_submitButton_div").removeClass("hidden");
adduploadDiv(1);
}
$("#EditpatientResultsDetails_").on('click',function(e){
e.preventDefault();
var index = $("#EditpatientResultsDetails_docsCount").val();
var nextIndex = parseInt(index)+1;
if(nextIndex < 6){ modifyOtheruploadDiv(nextIndex); }
$("#EditpatientResultsDetails__div").hide();
$("#SavepatientResultsDetails_submitButton_div").removeClass("hidden");
$("#SavepatientResultsDetails_testResult").attr("disabled", false);
$("#deleteDoc1").removeClass("hidden");
$("#deleteDoc2").removeClass("hidden");
$("#deleteDoc3").removeClass("hidden");
$("#deleteDoc4").removeClass("hidden");
$("#deleteDoc5").removeClass("hidden");
});
$("[id^=deleteDoc]").on("click", function(e) {
var id = $(this).attr("id");
var idLength = id.length;
var docsCount = $("#EditpatientResultsDetails_docsCount").val();
$("#SavepatientResultsDetails_deleteCheck").val("true");
$("#EditpatientResultsDetails_docsCount").val(parseInt(docsCount)-1);
var index = $(this).attr("id").charAt(idLength - 1);
var updatedDocumentCount = $("#EditpatientResultsDetails_docsCount").val();
var documentCnt = $("#EditpatientResultsDetails_documentCnt").val();
if(updatedDocumentCount == 0){
if(documentCnt == 5){
adduploadDiv(1);
$("#SavepatientResultsDetails_deleteCheck").val('false');
}else if(documentCnt == 1){
$("#SavepatientResultsDetails_deleteCheck").val('false');
}
}
var detail = new Object();
detail.testResultDocId = $(this).data("value");
$.ajax({
url : "ViewPatientTestResults/deleteTestResultDocs",
cache : false,
type : 'POST',
contentType: 'application/json',
data: JSON.stringify(detail),
async: false,
success : function() {
$("#attachment"+index+"_display").hide();
}
});
});
$('#SavepatientResultsDetails_submitButton').on('click', function(e) {
var doc1 = $('#SavepatientResultsDetails_resultUploadFile1').val();
var doc2 = $('#SavepatientResultsDetails_resultUploadFile2').val();
var doc3 = $('#SavepatientResultsDetails_resultUploadFile3').val();
var doc4 = $('#SavepatientResultsDetails_resultUploadFile4').val();
var doc5 = $('#SavepatientResultsDetails_resultUploadFile5').val();
var testResults = $('#SavepatientResultsDetails_testResult').val();
var deleteCheck = $("#SavepatientResultsDetails_deleteCheck").val();
if (typeof doc1 == 'undefined'){ doc1 = ""; }
if (typeof doc2 == 'undefined'){ doc2 = ""; }
if (typeof doc3 == 'undefined'){ doc3 = ""; }
if (typeof doc4 == 'undefined'){ doc4 = ""; }
if (typeof doc5 == 'undefined'){ doc5 = ""; }
if(doc1 != '' || doc2 != '' || doc3 != '' || doc4 != '' || doc5 != '' || testResults != '' || deleteCheck == "true"){
}else{
e.preventDefault();
alert("Either Results or Attachment is mandatory");
}
});
$('.close').on('click',function(){
modal.style.display = "none";
});
for(var i = 1; i < 6; i++){
var fileExtension = $("#attachment"+i+"_display").data("value");
if(fileExtension == 'pdf'){
var currPage = 1;
var numPages = 0;
var thePDF = null;
var fileData = $("#SavepatientResultsDetails_docUrl"+i).val();
showPDF(atob(fileData),i,currPage,numPages,thePDF);
}
}
function showPDF(pdf_url,index,currPage,numPages,thePDF){
PDFJS.getDocument({ data: pdf_url }).then(function(pdf) {
thePDF = pdf;
numPages = pdf.numPages;
pdf.getPage( 1 ).then( handlePages );
});
function handlePages(page)
{
var viewport = page.getViewport( 1 );
var canvas = document.createElement( "canvas" );
canvas.style.display = "block";
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
page.render({canvasContext: context, viewport: viewport});
document.getElementById("pdfDoc"+index).appendChild( canvas );
currPage++;
if ( thePDF !== null && currPage <= numPages )
{
thePDF.getPage( currPage ).then( handlePages );
}
}
}
$("[id^=viewDocs]").on("click", function () {
var docId = $(this).attr("id");
var docIndex = docId.substr(docId.length - 1);
var activeItemId = $(this).data("value");
$("div>div.item").removeClass("active");
$("#"+activeItemId).addClass("active");
var appName = $('#SavepatientResultsDetails_appName').val();
var paramValue = $(this).data("id");
$("#myModal").removeClass("hidden");
$('#downloadDocId').attr('href',appName+'/apps/PatientDetailsDoctor/ViewPatientTestResults/downloadUploadDocs?testResultsDocsId='+paramValue);
var modal = document.getElementById("myModal");
modal.style.display = "block";
});
$('#myCarousel').on('slide.bs.carousel', function (ev) {
var itemId = ev.relatedTarget.id;
var paramValue = $('#'+itemId).data('value');
var appName = $('#SavepatientResultsDetails_appName').val();
$('#downloadDocId').attr('href',appName+'/apps/PatientDetailsDoctor/ViewPatientTestResults/downloadUploadDocs?testResultsDocsId='+paramValue);
})
});
function addOtheruploadDiv(index){
var prevIndex = parseInt(index)-1;
var nextIndex = parseInt(index)+1;
$("#SavepatientResultsDetails_addDocs"+prevIndex+"_div").hide();
$("#SavepatientResultsDetails_removeDocs"+prevIndex+"_div").hide();
var rowStr='';
rowStr = rowStr +'<div id="SavepatientResultsDetails_resultUploadFile'+index+'_div" class="col-sm-5 " style="display: block;">'
+'<div class="form-group"><label for="SavepatientResultsDetails_resultUploadFile'+index+'" class=" col-sm-3 col-sm-offset-3 fontBold control-label">Upload </label>'
+'<div class=" col-sm-6 "><input type="file" size="30" value="" name="resultUploadFile'+index+'" onchange="validateFile(this);" class="validate[required] form-control" id="SavepatientResultsDetails_resultUploadFile'+index+'">'
+'</div></div></div>';
if(parseInt(index) < 5){
rowStr += '<div id="SavepatientResultsDetails_addDocs'+index+'_div" class="col-sm-1 " style="display: block; width: 30px; margin-top: 7px;">'
+'<div class="form-group"><label for="SavepatientResultsDetails_addDocs'+index+'" class=" "> </label><div class=" col-sm-5 ">'
+'<center><a title="" data-toggle="tooltip" null="" class="" onclick="addOtheruploadDiv('+nextIndex+')" "="" id="SavepatientResultsDetails_addDocs'+index+'" href="#" data-original-title="Edit"><i class="glyphicon glyphicon-plus"></i>'
+'</a></center></div></div></div>';
}
rowStr += '<div id="SavepatientResultsDetails_removeDocs'+index+'_div" class="col-sm-1 " style="display: block; width: 30px; margin-top: 7px;">'
+'<div class="form-group"><label for="SavepatientResultsDetails_removeDocs'+index+'" class=" "> </label><div class=" col-sm-5 ">'
+'<center><a title="" data-toggle="tooltip" null="" class="" onclick="removeUploadDiv('+index+')" "="" id="SavepatientResultsDetails_removeDocs'+index+'" href="#" data-original-title="Edit"><i class="glyphicon glyphicon-minus"></i>'
+'</a></center></div></div></div>'
+'<div id="SavepatientResultsDetails_emptyField'+index+'_div" class="col-md-12 " style="display: block;">'
+'<div class="form-group"><label for="SavepatientResultsDetails_emptyField'+index+'" class=" col-sm-5 control-label "> </label><div class=" col-sm-7 ">'
+'</div></div></div>';
$('#SavepatientResultsDetails_emptyField'+prevIndex+'_div').after(rowStr);
}
function modifyOtheruploadDiv(index){
var prevIndex = parseInt(index)-1;
var nextIndex = parseInt(index)+1;
$("#SavepatientResultsDetails_addDocs"+prevIndex+"_div").hide();
$("#SavepatientResultsDetails_removeDocs"+prevIndex+"_div").hide();
var rowStr='';
rowStr = rowStr +'<div id="SavepatientResultsDetails_resultUploadFile'+index+'_div" class="col-sm-5 " style="display: block;">'
+'<div class="form-group"><label for="SavepatientResultsDetails_resultUploadFile'+index+'" class=" col-sm-3 col-sm-offset-3 fontBold control-label">Upload </label>'
+'<div class=" col-sm-6 "><input type="file" size="30" value="" name="resultUploadFile'+index+'" onchange="validateFile(this);" class="validate[required] form-control" id="SavepatientResultsDetails_resultUploadFile'+index+'">'
+'</div></div></div>';
if(parseInt(index) < 5){
rowStr += '<div id="SavepatientResultsDetails_addDocs'+index+'_div" class="col-sm-1 " style="display: block; width: 30px; margin-top: 7px;">'
+'<div class="form-group"><label for="SavepatientResultsDetails_addDocs'+index+'" class=" "> </label><div class=" col-sm-5 ">'
+'<center><a title="" data-toggle="tooltip" null="" class="" onclick="addOtheruploadDiv('+nextIndex+')" "="" id="SavepatientResultsDetails_addDocs'+index+'" href="#" data-original-title="Edit"><i class="glyphicon glyphicon-plus"></i>'
+'</a></center></div></div></div>';
}
rowStr += '<div id="SavepatientResultsDetails_emptyField'+index+'_div" class="col-md-12 " style="display: block;">'
+'<div class="form-group"><label for="SavepatientResultsDetails_emptyField'+index+'" class=" col-sm-5 control-label "> </label><div class=" col-sm-7 ">'
+'</div></div></div>';
$('#SavepatientResultsDetails_testResult_div').after(rowStr);
}
function adduploadDiv(index){
var nextIndex = parseInt(index)+1;
var rowStr='';
rowStr = rowStr +'<div id="SavepatientResultsDetails_resultUploadFile'+index+'_div" class="col-sm-5 " style="display: block;">'
+'<div class="form-group"><label for="SavepatientResultsDetails_resultUploadFile'+index+'" class=" col-sm-3 col-sm-offset-3 fontBold control-label">Upload </label>'
+'<div class=" col-sm-6 "><input type="file" size="30" value="" name="resultUploadFile'+index+'" onchange="validateFile(this);" class="validate[required] form-control" id="SavepatientResultsDetails_resultUploadFile'+index+'">'
+'</div></div></div>'
+'<div id="SavepatientResultsDetails_addDocs'+index+'_div" class="col-sm-1 " style="display: block; width: 30px; margin-top: 7px;">'
+'<div class="form-group"><label for="SavepatientResultsDetails_addDocs'+index+'" class=" "> </label><div class=" col-sm-5 ">'
+'<center><a title="" data-toggle="tooltip" null="" class="" onclick="addOtheruploadDiv('+nextIndex+')" "="" id="SavepatientResultsDetails_addDocs'+index+'" href="#" data-original-title="Edit"><i class="glyphicon glyphicon-plus"></i>'
+'</a></center></div></div></div>'
+'<div id="SavepatientResultsDetails_emptyField'+index+'_div" class="col-md-12 " style="display: block;">'
+'<div class="form-group"><label for="SavepatientResultsDetails_emptyField'+index+'" class=" col-sm-5 control-label "> </label><div class=" col-sm-7 ">'
+'</div></div></div>';
$('#SavepatientResultsDetails_testResult_div').after(rowStr);
}
function removeUploadDiv(index){
var prevIndex = parseInt(index)-1;
$("#SavepatientResultsDetails_removeDocs"+prevIndex+"_div").show();
$("#SavepatientResultsDetails_addDocs"+prevIndex+"_div").show();
$("#SavepatientResultsDetails_emptyField"+prevIndex+"_div").show();
$('#SavepatientResultsDetails_resultUploadFile'+index+'_div').remove();
$('#SavepatientResultsDetails_addDocs'+index+'_div').remove();
$('#SavepatientResultsDetails_removeDocs'+index+'_div').remove();
$('#SavepatientResultsDetails_emptyField'+index+'_div').remove();
}
function validateFile(param){
var Msg =$('[id^=SavepatientResultsDetails_fileError]').val();
if(param.files[0].size/1024 > 500){
alert('Upload file size should be lesser than 500KB');
$(param).val('');
}else{
var fileUpload = $(param)[0];
var regexPNG = new RegExp("([a-zA-Z0-9\s_\\.\-:;()*\+,\/;\-=[\\\]\^_{|}<>~`])+(.png)$");
var regexJPG = new RegExp("([a-zA-Z0-9\s_\\.\-:;()*\+,\/;\-=[\\\]\^_{|}<>~`])+(.jpg)$");
var regexPDF = new RegExp("([a-zA-Z0-9\s_\\.\-:;()*\+,\/;\-=[\\\]\^_{|}<>~`])+(.pdf)$");
if (regexPNG.test(fileUpload.value.toLowerCase()) || regexJPG.test(fileUpload.value.toLowerCase()) || regexPDF.test(fileUpload.value.toLowerCase()) )
{
return true;
} else {
alert(Msg);
$(param).val('');
$(param).focus();
return false;
}
}
}
仅在Chrome浏览器中显示幻灯片的第一张图片。当图像开始移动它工作正常，它显示隐藏的图像。我尝试添加jquery＆＃34;可见性：可见！重要＆＃34;，但它没有解决。它似乎在Safari和Internet Explorer上都能正常工作。这是我工作的代码部分。