Jquery中模态框的使用方法小结与实操练习

    $(document).ready(function(){
        initSelect();
        $("#registerUpdCount").attr('value',0);
        $("#registerShopNo").attr('value', $("#shopInfo").html().split(" ")[0]);
        getData(1);
    });
    function initSelect(){
        $.ajax({
            type: "GET",
            contentType: "application/json",
            url: "/hq/document/initSelect",
            success: function(data){
                var html = "";
                 $.each(data,function(key,value){
                      html += "<option value='"+key+"'>"+value+"</option>";
                 })
                $("#docLicenceNo").append(html);
            }
        })
    }
    function getData(docType){
           $.ajax({
               type: "GET",
               contentType: "application/json",
               url: "/hq/document/",
               data:"docType="+docType, 
               success: function(data){
                   if(data !=null && data != ""){
                       $(".doc-list-group").remove();
                       var html='<div class="doc-list-group" style="height: 400px; overflow-y: auto; border: 1px solid #ced4da;">';
                       $.each(data,function(key,value){
                           
                           html+="<div class='card'><div class='card-body'>"+'<div class="row">'
                               +'<a class="doc_menuLink" href="javascript:void(0);" onclick = "file_downLoad('+value.seqNo+');"><span class="col-sm-2">'+(! value.docName ? '-' : value.docName )+'</span></a></div>'
                               +'<div class="row"><label class="col-sm-2" style="margin-left:2em;">備考</label><span class="col-sm-6">'
                               +(!value.listNotes?'-':value.listNotes)+'</span>'
                               +'<div style="margin-left:10em;"><input type="hidden" id="resultUpdCount" name="updCount"  value="'+value.updCount+'">'
                               +'<input type="hidden" id="resultShopNo" name="shopNo"  value="'+value.shopNo+'">';
                               if(value.authorize){
                                   html += '<a class="btn btn-danger docDelete" style="color:white" id="'+value.seqNo+'">削除</a>';
                               }
                          html += '</div></div><div class="row">'
                               +'<label class="col-sm-2" style="margin-left:2em;">登録日</label>'
                               +'<span class="col-sm-3">'+(!value.listEndDate?'-':value.listEndDate)+'</span>'
                               +'<label class="col-sm-2">締結日</label>'
                               +'<span class="col-sm-2">'+(!value.listEnterDate?'-':value.listEnterDate)+'</span></div>'
                               +'<div class="row"><label class="col-sm-2" style="margin-left:2em;">アップロード者</label><span class="col-sm-3">'
                               +(!value.listUploadId?'-':value.listUploadId)+'</span>'
                               +'<label class="col-sm-2">アップロード日</label><span class="col-sm-2">'
                               +(!value.listUploadDate?'-':value.listUploadDate)+'</span></div></div></div>';
                      });
                      html+="</div>";
                      $("#sec2").append(html);
                   }else
                      $(".doc-list-group").remove();
               }
          });
     }
    $("#docLicenceNo").on("change",function(){
        getData($(this).val());
    });

    var seqNo,docType;
    $("#docRegister").click(function(){
            var isRegister = true;
            $(this).confirm("登録しますか？",{yesCallback:function(){
                            if(isRegister)
                                ajax_submit();
                            isRegister = false;
                    },
                        noCallback:function(){
                            pageRevival();
                    }
            });
    }); 
    function pageRevival(){
        $('#documentForm #docLicenceNo').prop('value',docType);
        $('#documentForm #docLicenceNo').trigger('change');
        $("#docLayout").css("overflow","auto" );
        $(document.body).css("overflow","hidden" );
    }
   function ajax_submit() {
       $("#documentForm span[class=text-danger]").remove();
       var formData = new FormData();
       formData.append("shopNo",$('#shopInfo').html().split(' ')[0]);
       formData.append("file",$('#documentForm #doc_file')[0].files[0]);
       formData.append("docType",$('#documentForm #docLicenceNo').val());
       formData.append("docName",$('#documentForm #docName').val());
       formData.append("endDate",$('#documentForm #endDate').val());
       formData.append("fileName",$('#documentForm #doc_file').next('.custom-file-label').html());
       formData.append("workflowNo",$('#documentForm #workflowNo').val());
       formData.append("fromDate",$('#documentForm #startYmd').val());
       formData.append("toDate",$('#documentForm #endYmd').val());
       formData.append("completeDate",$('#documentForm #completeDate').val());
       formData.append("notes",$('#documentForm #notes').val());
       
       var html = '<div class="message-alert alert alert-warning message_doc" role="alert">'
           html+='<button type="button" class="close" data-dismiss="alert" aria-label="閉じる">'
           html+='<span aria-hidden="true">×</span></button><ul>';
       
       $.ajax({
            type: "post",
            url: "/hq/document/register",
            data:formData,
            processData: false,
            cache:false,
            contentType: false,
            mimeType:"multipart/form-data",
            success: function(msg){
                    var msgIsEmpty = true; var isalertMessage = false
                    var objJson = jQuery.parseJSON(msg);
                    if($("#docNameCheck").length == 0){
                        $(".message_doc").remove();
                        $.each(objJson,function(key,value){
                            msgIsEmpty = false; 
                            var input =$("input[name='"+key+"']");
                            input.addClass("is-invalid");
                            if(key == "docName"){
                                input.after($("<span></span>").attr("class","text-danger")
                                    .attr("id","docNameCheck").html(value));
                            }else{
                                html+='<li>'+value+'</li>';
                                isalertMessage=true;
                            }
                        });
                        html+='</ul> </div>';
                        if(isalertMessage)
                            $("#message-doc-area").append(html);
                    }
                    if(msgIsEmpty){
                        $(".message_doc").remove();
                        //clear form
                        $("#fileNametxt").html("");
                        $("input[name='docForm_reset']").trigger('click');
                        $("#endYmd").removeClass("is-invalid");
                    }
                    //refresh
                    pageRevival();
            },
            error:function(msg){
                $("#docLayout").css("overflow","auto" );
                $(document.body).css("overflow","hidden" );
                 html+='<li>ファイルサイズが登録可能サイズ(10MB)を超えています。</li>';
                 html+='<li>入力エラーがあります。赤色の項目を確認し、修正してください。</li>';
                 html+='</ul> </div>';
                $("#doc_file").addClass("is-invalid");
                $("#message-doc-area").append(html);
            }
        });
        
    }
   //delete
   $("#sec2 ").on('click','.docDelete',function(){
        var isDelete = true;
        var resultShopNo,resultUpdCount;
        var seqNo=$(this).attr('id');
        var shopNo = $("#shopInfo").html().split(" ")[0];
        
        $(this).prev().attr('value',shopNo);
        resultShopNo = shopNo;
       resultUpdCount = $(this).prev().prev().val();
        $(this).confirm("削除しますか？",{yesCallback:function(){
                    if(isDelete)
                        deleteDoc(seqNo,resultUpdCount,resultShopNo);
                    isDelete = false;
                    $("#docLayout").css("overflow","auto" );
                    $(document.body).css("overflow","hidden" );
               }
        });
   });
  
   function deleteDoc(seqNo,resultUpdCount,resultShopNo){
       
       $.ajax({
           type: "GET",
           contentType: "application/json",
           url: "/hq/document/delete",
           data:{"seqNo":seqNo,"updCount":resultUpdCount,"shopNo":resultShopNo},
           success:function(data){
               docType = $("#docLicenceNo").val();
               getData(docType);
           }
       });
   }
   
   function file_downLoad(seqNo){
       var shopNo = $("#shopInfo").html().split(" ")[0];
       var form = $("<form></form>").attr("action", "/hq/document/fileDownLoad").attr("method", "get");
       form.append($("<input></input>").attr("type", "hidden").attr("name", "seqNo").attr("value", seqNo));
       form.append($("<input></input>").attr("type", "hidden").attr("name", "shopNo").attr("value", shopNo));
       form.appendTo('body').submit().remove();
       
   }
   var clearRed = function(e,dateflag){
       e.removeClass("is-invalid");
       if(!dateflag)
           e.next().remove();
   }
   $("#docName").on("focus",function(){
       if($(this).attr('class').indexOf("is-invalid") >= 0){
           clearRed($(this),false);
       }
   });
   $("#startYmd").on("focus",function(){
       if($(this).attr('class').indexOf("is-invalid") >= 0){
           clearRed($(this),true);
      }
   });
   $("#endYmd").on("focus",function(){
       if($(this).attr('class').indexOf("is-invalid") >= 0){
           clearRed($(this),true);
       }
   });
   $("#doc_file").on("focus",function(){
       if($(this).attr('class').indexOf("is-invalid") >= 0){
           clearRed($(this),true);
           $("#fileNametxt").html("");
       }
   });
   $("#docLayout").on('show.bs.modal',function(){
       $(document.body).css("overflow","hidden" );
       docModalResize();
   })
   $("#docLayout").on('hide.bs.modal',function(){
       $(document.body).css("overflow","auto" );
       $("#endYmd").removeClass("is-invalid");
       $("#docName").removeClass("is-invalid");
       $("#startYmd").removeClass("is-invalid");
       $("#doc_file").removeClass("is-invalid");
       $("#documentForm span[class=text-danger]").remove();
       $("input[name='docForm_reset']").trigger('click');
       $("#fileNametxt").html("");
   })
   $(window).resize(function(){
       docModalResize();
   })
   function docModalResize(){
       var winWidth = document.documentElement.clientWidth;
       var modalWidth = $("#docModalContent").width();
       var width = (winWidth-modalWidth)/2 + "px"
       $("#docLayout").find(".modal-dialog").css({
           'margin-left':width
       });
   }
   function fileNameShow(itemId) {
       var fileItem = $("#"+itemId);
       if (!isEmpty(fileItem[0].files[0])){
           fileItem.next('.custom-file-label').html(fileItem[0].files[0].name);
       }
    }
   function isEmpty(str) {
       if (str == null || str == undefined || str == "" || str.length == 0) {
           return true;
       }
       return false;
    }