[JSTL] ajax 사용시 변수 업데이트

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/jsp/ibuilder/cmm/common.jsp" %>
<%
    pageContext.setAttribute("newLineChar", "\n");
    pageContext.setAttribute("LF", "\n");
%>

<c:set var="siteInfo" value="${sessionScope.sessionSite }"/>
<style>
  #alignCenter td {
    text-align: center;
  }

  #alignCenter th {
    text-align: center;
  }

  .curFlex {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
  }

  .curFlex section,
  .curFlex form {
    width: calc(50% - 10px);
  }

  .curFlex form section {
    width: 100%;
  }

  #frmA {
    width: 0px;
  }

  .btn_type03 a {
    height: 30px;
    min-width: 60px;
    line-height: 30px;
    padding: 0 15px;
    color: #fff;
    text-align: center;
    background: black;
    border-radius: 5px;
  }

  a.uploadedVideo {
    display: flex;
    align-items: center;
    margin-top: 8px;
    text-decoration: underline;
  }

  .modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
  }

  .modal-content {
    background-color: #fefefe;
    margin: 3% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
  }

  .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }

  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }
</style>
<script type="text/javascript" src="/common/js/util.js"></script>
<script src="/flowplayer/hls.min.js"></script>
<script src="/flowplayer/flowplayer.js"></script>
<link rel="stylesheet" href="/flowplayer/skin/skin.css">
<script type="text/javascript" src="/js/egovframework/com/cmm/fms/EgovMultiFile.js"></script>
<script type="text/javascript">

  $(document).ready(function () {
    $("#selectLecCateIdx").val("${resultMap.lecType}");
    $("input[name=lec_status]").each(function () {
      if ($(this).val() == "${resultMap.lecStatus}") {
        $(this).prop('checked', true);
      }
    });
    $("#eduHour").val("${resultMap.eduHour}");
    $("#eduMin").val("${resultMap.eduMin}");

  });

  // 수정
  function fn_modifyView() {
    if (confirm("정말 수정 하시겠습니까?")) {
      var frm = document.frmP;
      frm.method = "post";
      frm.action = "/lecture/program/updateDetailView.do";
      frm.submit();
    }
  }

  // 삭제
  function fn_deleteProc() {
    if (confirm("이 프로그램을 정말 삭제 하시겠습니까?")) {
      var frm = document.frm;
      frm.method = "post";
      frm.action = "/lecture/program/deleteProc.do";
      frm.submit();
    }
  }

  function fn_view() {
    var frm = document.frm;
    frm.method = "get";
    frm.action = "/lecture/program/view.do";
    frm.submit();

  }

  function fn_programViewDetail() {
    var frm = document.frm;
    frm.method = "get";
    frm.action = "/lecture/program/viewDetail.do";
    frm.submit();

  }

  function fn_tabView() {
    var frm = document.frm;
    frm.method = "get";
    frm.action = "/lecture/program/noticeList.do";
    frm.submit();

  }

  function fn_addCurriculum(pi, so) {
    $("#curriculumDetailAdd").css("display", "block");
    $("#curriculumDetail").css("display", "none");
    let sectionSW = document.querySelector('#frmC');
    sectionSW.style.width = "0px";
    let sectionASW = document.querySelector('#frmA');
    sectionASW.style.width = "calc(50% - 10px)";
    $("#curriculumAddOrder").val(so);
    $("#runningAddTime").val("");
    $("#curriculumAddList").val("");
    $("#curriculumAddGoal").val("");
    $("#curriculumAddDesc").val("");
    //
    // var dataIdx = pi + '_' + so;
    // var chkFiles = {
    //   bbsMstIdx: "BM0000000042",
    //   dataIdx: dataIdx,
    //   updateFlag: "N"
    // }
    //
    // $.ajax({
    //   url: '/bbs/file/selectFileInfsForUpdateAjax.do',
    //   type: 'post',
    //   data: chkFiles,
    //   charSet: "utf-8",
    //   success: function (response) {
    //     $('#fileInformation').html(response);
    //   }
    // });
  }

  function fn_modifyCurriculum(pi, ci, so, st, sn, sg, sd) {
    $("#curriculumDetail").css("display", "block");
    $("#curriculumDetailAdd").css("display", "none");
    let sectionASW = document.querySelector('#frmA');
    sectionASW.style.width = "0px";
    let sectionSW = document.querySelector('#frmC');
    sectionSW.style.width = "calc(50% - 10px)";
    $("#curIdx").val(ci);
    $("#curriculumOrder").val(so);
    $("#curriculumCOrder").val(so);
    $("#runningTime").val(st);
    $("#curriculumList").val(sn);
    $("#curriculumGoal").val(sg);
    $("#curriculumDesc").val(sd);

    var dataIdx = pi + '_' + so;
    var chkFiles = {
      bbsMstIdx: "BM0000000042",
      dataIdx: dataIdx,
      updateFlag: "Y"
    }

    $.ajax({
      url: '/bbs/file/selectFileInfsForUpdateAjax.do',
      type: 'post',
      data: chkFiles,
      charSet: "utf-8",
      success: function (response) {
        $('#fileInformation').html(response);
      }
    });
  }

  function fn_confirmCurriculum() {
    if (confirm("정말 저장 하시겠습니까?")) {
      var frm = document.frmC;
      frm.method = "post";
      frm.action = "/lecture/program/processCurriculum.do";
      frm.submit();
    }
  }

  function fn_addConfirmCurriculum() {
    if (confirm("정말 저장 하시겠습니까?")) {
      var frm = document.frmA;
      frm.method = "post";
      frm.action = "/lecture/program/processCurriculum.do";
      frm.submit();
    }
  }

  function fn_deleteCurriculum() {
    if (confirm("정말 삭제 하시겠습니까?")) {
      var frm = document.frmC;
      frm.method = "post";
      frm.action = "/lecture/program/curriculumDelete.do";
      frm.submit();
    }
  }

  function fn_cancelCurriculum() {
    if (confirm("정말 취소 하시겠습니까?")) {
      fn_programViewDetail();
    }
  }

  let span = document.getElementsByClassName("close")[0];

  function showModal(e, pi, fn) {
    e.preventDefault();
    let modal = document.querySelector('.modal');
    modal.style.display = "block";

    flowplayer('.player', {
      clip: {
        sources: [{
          type: "application/x-mpegurl",
          src: "https://vod.mobilecen.kr/hls/xrcampus%2b" + fn + "/index.m3u8"
        }],
        title: "LiveStream"
      }
    });
    return modal;
  }

  function closeModal() {
    let modal = document.querySelector('.modal');
    modal.style.display = "none";
    flowplayer(".player").shutdown();
  }

  window.onclick = function (event) {
    let modal = document.querySelector('.modal');
    if (event.target == modal) {
      closeModal();
    }
  }

</script>

<form name="frm" id="frm" method="post">
    <input type="hidden" id="proIdx" name="proIdx" value="<c:out value="${proIdx}" />"/>
    <input type="hidden" id="bbs_mst_idx" name="bbs_mst_idx" value="BM0000000042"/>
</form>

<h1 class="info">
    <a href="#" onclick="javascript:fn_view();">프로그램 정보</a>
</h1>
<c:if test="${resultMap.lecType eq '007'}">
    <h1 class="info">
        <font color="blue"><a href="#">프로그램 상세정보 </a></font>
    </h1>
</c:if>

<c:if test="${resultMap.lecType ne '003'}">
    <h1 class="info">
        <a href="#" onclick="javascript:fn_tabView();"> 수강자 정보 </a>
    </h1>
</c:if>


<form name="frmP" id="frmP" method="post" enctype="multipart/form-data">
    <input type="hidden" id="proIdx_p" name="proIdx" value="<c:out value="${proIdx}" />"/>
    <input type="hidden" id="bbs_mst_idx_p" name="bbs_mst_idx" value="BM0000000042"/>
    <section>
        <h3>교육정보</h3>
        <div class="tbl_insert">
            <table class="data_tableW02">
                <caption></caption>
                <colgroup>
                    <col width="15%"/>
                    <col width="35%"/>
                    <col width="15%"/>
                    <col width="35%"/>
                </colgroup>
                <tbody>
                <tr>
                    <th scope="row">교육명<label style="color: red">*</label></th>
                    <td colspan="3">
                        <input id="pro_title" name="pro_title" class="textInput_size02"
                               value="${resultMap.proTitle}"/>
                    </td>
                </tr>
                <tr>
                    <th scope="row">카테고리<label style="color: red">*</label></th>
                    <td colspan="3" class="even">
                        <select id="lec_check" name="lec_check" onchange="changeContType();"
                                disabled>
                            <option value="">선택</option>
                            <c:forEach var="item" items="${lectureList}">
                                <option value="${item.lecIdx},${item.lecType}"
                                        <c:if test="${item.lecType eq resultMap.lecType}">selected="selected"</c:if>>${item.lecTitle}</option>
                            </c:forEach>
                        </select>
                    </td>
                </tr>
                <input type="hidden" id="pro_cate" name="pro_cate" value="${resultMap.proCate}"/>
                <tr>
                    <th scope="row">교육목표<label style="color: red">*</label></th>
                    <td colspan="3">
                        <%--                    <textarea name="" id="" value=""></textarea>--%>
                        <input type="text" id="lec_goal" name="lec_goal" class="textInput_size02"
                               placeholder="이 강의의 교육 목표 입니다." autocomplete="off"
                               value="${resultMap.lecGoal}"/>
                    </td>
                </tr>

                <tr>
                    <th scope="row">교육대상<label style="color: red">*</label></th>
                    <td colspan="3" class="even">
                        <input type="text" id="lec_target" name="lec_target"
                               class="textInput_size02" placeholder="교육 대상" autocomplete="off"
                               value="${resultMap.lecTarget}"/>
                    </td>
                </tr>
                <tr>
                    <th scope="row">교육설명<label style="color: red">*</label></th>
                    <td colspan="3">
                        <input type="text" id="edu_desc" name="edu_desc" class="textInput_size02"
                               placeholder="이 강의의 교육 설명 입니다." autocomplete="off"
                               value="${resultMap.eduDesc}"/>
                    </td>
                </tr>

                <tr>
                    <th scope="row">학습시간<label style="color: red">*</label></th>
                    <td colspan="3">
                        <div style="display: flex">
                            <input name="edu_hour" id="edu_hour"
                                   value="<fmt:formatNumber value='${resultMap.eduHour}' pattern="#"/>"
                                   readonly/>
                            <p> 시간 </p>
                            <input name="edu_min" id="edu_min"
                                   value="<fmt:formatNumber value='${resultMap.eduMin}' pattern="#"/>"
                                   readonly/>
                            <p> 분</p>
                        </div>
                    </td>
                </tr>
                <tr>
                    <th scope="row">강사명<label style="color: red"></label></th>
                    <td colspan="3">
                        <input type="text" id="lecturer" name="lecturer" class="textInput_size02"
                               value="${resultMap.lecturer}"/>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </section>
</form>
<div class="btn_block02">
    <span class="btn_type01 btn"><a href="javascript:fn_modifyView();">저장</a></span>
    <span class="btn_type02 btn"><a href="javascript:fn_view();">목록</a></span>
    <span class="btn_type02 btn"><a href="javascript:fn_deleteProc();">삭제</a></span>
</div>
<div class="curFlex">
    <section id="lecCurriculum" name="lecCurriculum">
        <h3>교육 커리큘럼</h3>
        <div class="tbl_insert">
            <table class="data_tableW">
                <colgroup>
                    <col/>
                    <col/>
                    <col/>
                </colgroup>
                <thead>
                <tr>
                    <th>순서</th>
                    <th>목차명</th>
                    <th></th>
                </tr>
                </thead>
                <tbody>
                <c:forEach var="item" items="${curriculumList}">
                    <tr>
                        <td>${item.stepOrder}</td>
                        <td><a href="javascript:void(0)"
                               onclick="fn_modifyCurriculum('${proIdx}','${item.curIdx}','${item.stepOrder}', '${item.stepTime}', '${item.stepName}', '${item.stepGoal}', '${item.stepDesc}')">${item.stepName}</a>
                        </td>
                        <td>
                            <a href="" onclick="showModal(event,'${proIdx}','${item.fileName}')">
                                <svg xmlns="http://www.w3.org/2000/svg" height="24px"
                                     viewBox="0 0 24 24" width="24px" fill="#174e70">
                                    <path d="M0 0h24v24H0z" fill="none"/>
                                    <path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"/>
                                </svg>
                            </a>
                        </td>
                    </tr>
                </c:forEach>
                <c:if test="${fn:length(curriculumList) == 0}">
                    <tr>
                        <td colspan="3">등록된 커리큘럼이 없습니다.</td>
                    </tr>
                </c:if>
                </tbody>
            </table>
        </div>
        <div class="btn_block02">
            <span class="btn_type01 btn"><a
                    href="javascript:fn_addCurriculum('${proIdx}','${fn:length(curriculumList) + 1}')">과정추가</a></span>
        </div>
    </section>
    <form name="frmC" id="frmC" method="post" enctype="multipart/form-data">
        <input type="hidden" id="proIdx_c" name="proIdx" value="<c:out value="${proIdx}" />"/>
        <input type="hidden" id="bbs_mst_idx_c" name="bbs_mst_idx" value="BM0000000042"/>
        <input type="hidden" id="curIdx" name="curIdx" value="<c:out value="${curIdx}" />"/>
        <input type="hidden" id="curriculumCOrder" name="curriculumOrder"/>
        <input type="hidden" name="fileListCnt" id="fileListCnt"/>
        <input type="hidden" id="fileName" name="fileName" value="<c:out value="${fileName}" />"/>
        <section id="curriculumDetail" name="curriculumDetail" style="display: none">
            <h3>과정 상세 정보 수정</h3>
            <div class="tbl_insert">
                <table class="data_tableW02">
                    <colgroup>
                        <col style="width: 100px"/>
                        <col/>
                    </colgroup>
                    <tbody>
                    <tr>
                        <th>순서</th>
                        <td>
                            <select id="curriculumOrder" name="curriculumOrder" disabled>
                                <option value="">선택</option>
                                <c:forEach var="item" items="${curriculumList}">
                                    <option value="${item.stepOrder}"
                                            selected="selected">${item.stepOrder}</option>
                                </c:forEach>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <th>시간</th>
                        <td>
                            <input type="text" id="runningTime" name="runningTime"
                                   class="textInput_size02"/>
                        </td>
                    </tr>
                    <tr>
                        <th>목차</th>
                        <td>
                            <input id="curriculumList" name="curriculumList" type="text"
                                   class="textInput_size02"/>
                        </td>
                    </tr>
                    <tr>
                        <th>목표</th>
                        <td>
                            <textarea name="curriculumGoal"
                                      id="curriculumGoal"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <th>설명</th>
                        <td>
                            <textarea name="curriculumDesc"
                                      id="curriculumDesc"></textarea>
                        </td>
                    </tr>
                    <tr id="updateVFile" style="display: none">
                        <th scope="col">영상</th>
                        <td colspan="3">
                            <input type="hidden" name="posblAtchFileNumber" value="1"/>
                            <!-- 첨부 가능한 파일 개수 -->
                            <input type="file" name="file_v" id="egovComVFileUploader"
                                   class="input-file" size="71"/>
                            <div id="egovComVFileList"></div>
                        </td>
                    </tr>
                    <tr id="deleteVFile1" style="display: none">
                        <th scope="col">영상</th>
                        <td colspan="3">
                            영상을 변경하려면 커리큘럼을 삭제후 재등록해 주시기 바랍니다.
                        </td>
                    </tr>
                    <tr id="deleteVFile2" style="display: none">
                        <th scope="col">기등록파일</th>
                        <td colspan="3">
                            <div id="fileInformation"></div>
                        </td>
                    </tr>

                    <script type="text/javascript">
                      var existFileNum = document.getElementById('fileListCnt').value;
                      var maxFileNum = 1;
                      if (existFileNum == "undefined" || existFileNum == null) {
                        existFileNum = 0;
                      }
                      if (maxFileNum == "undefined" || maxFileNum == null) {
                        maxFileNum = 0;
                      }
                      var uploadableFileNum = maxFileNum - existFileNum;
                      if (uploadableFileNum < 0) {
                        uploadableFileNum = 0;
                      }
                    </script>
                    </tbody>
                </table>
            </div>
            <div class="btn_block02">
                <span class="btn_type03 btn"><a
                        href="javascript:fn_confirmCurriculum();">저장</a></span>
                <span class="btn_type02 btn"><a
                        href="javascript:fn_deleteCurriculum();">삭제</a></span>
                <span class="btn_type02 btn"><a
                        href="javascript:fn_cancelCurriculum();">취소</a></span>
            </div>
        </section>
    </form>
    <form name="frmA" id="frmA" method="post" enctype="multipart/form-data">
        <input type="hidden" id="proIdx_a" name="proIdx" value="<c:out value="${proIdx}" />"/>
        <input type="hidden" id="bbs_mst_idx_a" name="bbs_mst_idx" value="BM0000000042"/>
        <input type="hidden" id="curIdx_a" name="curIdx" value="<c:out value="${curIdx}" />"/>
        <section id="curriculumDetailAdd" name="curriculumDetailAdd" style="display: none">
            <h3>커리큘럼 추가</h3>
            <div class="tbl_insert">
                <table class="data_tableW02">
                    <colgroup>
                        <col style="width: 100px"/>
                        <col/>
                    </colgroup>
                    <tbody>
                    <tr>
                        <th>순서</th>
                        <td>
                            <select id="curriculumAddOrder" name="curriculumOrder">
                                <option value="">선택</option>
                                <c:forEach var="index" begin="1" end="${maxCOrder}">
                                    <c:set var="found" value="false"/>
                                    <c:forEach var="item" items="${curriculumList}">
                                        <c:if test="${index eq item.stepOrder}">
                                            <c:set var="found" value="true"/>
                                        </c:if>
                                    </c:forEach>
                                    <c:if test="${not found}">
                                        <option value="${index}">${index}</option>
                                    </c:if>
                                </c:forEach>
                                <option value="${maxCOrder + 1}"
                                        selected="selected">${maxCOrder + 1}</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <th>시간</th>
                        <td>
                            <input type="text" id="runningAddTime" name="runningTime"
                                   placeholder="영상 시간 (초 단위)" class="textInput_size02"/>
                        </td>
                    </tr>
                    <tr>
                        <th>목차</th>
                        <td>
                            <input id="curriculumAddList" name="curriculumList" type="text"
                                   placeholder="교육 커리큘럼 제목" class="textInput_size02"/>
                        </td>
                    </tr>
                    <tr>
                        <th>목표</th>
                        <td>
                            <textarea name="curriculumGoal"
                                      placeholder="교육 커리큘럼 목표" id="curriculumAddGoal"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <th>설명</th>
                        <td>
                            <textarea name="curriculumDesc"
                                      placeholder="교육 커리큘럼 설명" id="curriculumAddDesc"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <th scope="col">영상</th>
                        <td colspan="3">
                            <input type="hidden" name="posblAtchFileNumber" value="1"/>
                            <!-- 첨부 가능한 파일 개수 -->
                            <input type="file" name="file_v" id="egovComVFileUploader"
                                   class="input-file" size="71"/>
                            <div id="egovComVFileList"></div>
                        </td>
                    </tr>


                    <script type="text/javaScript">
                      var maxFileNum = 1;
                      if (maxFileNum == null || maxFileNum == "") {
                        maxFileNum = document.getElementById('fileListCnt').value;
                      }
                      var multi_selector = new MultiSelector(
                          document.getElementById('egovComVFileList'), maxFileNum, 60);
                      multi_selector.addElement(document.getElementById('egovComVFileUploader'));
                    </script>


                    </tbody>
                </table>
            </div>
            <div class="btn_block02">
                <span class="btn_type03 btn"><a
                        href="javascript:fn_addConfirmCurriculum();">저장</a></span>
                <span class="btn_type02 btn"><a
                        href="javascript:fn_cancelCurriculum();">취소</a></span>
            </div>
        </section>
    </form>
</div>

<div id="myModal" class="modal" style="display: none">
    <div class="modal-content">
        <span class="close" onclick="closeModal()">close</span>
        <div class="player" data-swf="flowplayer.swf" data-engine="html5"></div>
    </div>
</div>

	/**
	 * Ajax를 이용해 첨부파일 변경을 위한 수정페이지로 이동한다.
	 *
	 * @param fileVO
	 * @param atchFileId
	 * @param sessionVO
	 * @param model
	 * @return
	 * @throws Exception
	 */
	@RequestMapping("/bbs/file/selectFileInfsForUpdateAjax.do")
	public String selectFileInfsForUpdateByBbsAjax(HttpServletRequest request , HttpSession session ,  @CommandMap Map<String , Object> commandMap , ModelMap model  ) throws Exception{
		commandMap = SecurityUtil.getRequestSessionMap(request); //유효성 체크

		List<Map<String , Object>> bbsDataFile = null;

		String bbsMstIdx  = StringUtil.nvl2(commandMap.get("bbsMstIdx"), "");
		String dataIdx    = StringUtil.nvl2(commandMap.get("dataIdx"),   "");
		String updateFlag = StringUtil.nvl2(commandMap.get("updateFlag"),"Y");

		logger.debug("commandMap ::::" + commandMap);


		if( !StringUtil.empty(dataIdx) ){
			try{
				commandMap.put("bbs_mst_idx", bbsMstIdx);
				commandMap.put("data_idx",    dataIdx);
				bbsDataFile = iBuilderBbsAttachFileService.bbsAttachFileList(commandMap);
				commandMap.put("attachIdx", bbsDataFile.get(0).get("attachIdx"));
			}catch(Exception e){

			}
		}

		List<String> attachIdxList = new ArrayList<>();
		for (Map<String, Object> fileMap : bbsDataFile) {
			if (fileMap.containsKey("attach_idx")) {
				Object attachIdx = fileMap.get("attach_idx");
				model.addAttribute("attachIdx", attachIdx);
				if (attachIdx != null) {
					attachIdxList.add(attachIdx.toString());
				}
			}
		}

		model.addAttribute("bbsDataFile", bbsDataFile);
		model.addAttribute("dataIdx", dataIdx);
		model.addAttribute("fileList_" + dataIdx, bbsDataFile);
		model.addAttribute("updateFlag", updateFlag );
		model.addAttribute("fileListCnt_" + dataIdx, bbsDataFile.size());
		model.addAllAttributes(commandMap);

		return "ibuilder/comp/bbs/file/vFileList";
	}

	/**
	 * 첨부파일에 대한 삭제를 ajax로 처리한다.
	 *
	 * @param fileVO
	 * @param returnUrl
	 * @param sessionVO
	 * @param model
	 * @return
	 * @throws Exception
	 */
	@RequestMapping("/bbs/file/deleteFileAjax.do")
	public String deleteFileAjax( HttpSession session , HttpServletRequest request , HttpServletResponse response ,   @CommandMap Map<String , Object> commandMap , ModelMap model  ) throws Exception{
		commandMap = SecurityUtil.getRequestSessionMap(request); //유효성 체크

		List<Map<String , Object>> bbsDataFile = null;

		String dataIdx    = StringUtil.nvl2(commandMap.get("dataIdx"),   "");
		String updateFlag = StringUtil.nvl2(commandMap.get("updateFlag"),"Y");

		commandMap.put("bbs_mst_idx", (String) commandMap.get("bbsMstIdx"));
		commandMap.put("data_idx", (String) commandMap.get("dataIdx"));
		commandMap.put("attach_idx", (String) commandMap.get("attachIdx"));

		try{
			iBuilderBbsAttachFileService.deleteAttachFile(commandMap);
			bbsDataFile = iBuilderBbsAttachFileService.bbsAttachFileList(commandMap);
		}catch(Exception e){
			logger.debug("e ::" + e);
		}

		model.addAttribute("bbsDataFile", bbsDataFile);
		model.addAttribute("dataIdx", dataIdx);
		model.addAttribute("fileList_" + dataIdx, bbsDataFile);
		model.addAttribute("updateFlag", updateFlag );
		model.addAttribute("fileListCnt_" + dataIdx, bbsDataFile.size());
		model.addAllAttributes(commandMap);

		return "ibuilder/comp/bbs/file/vFileList";
	}

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@page import="com.idasystem.ibuilder.cmm.util.lang.StringUtil" %>
<%@page import="com.idasystem.ibuilder.cmm.util.FileUtil" %>
<%@page import="java.util.List" %>
<%@page import="java.util.Map" %>
<%
    String dataIdx = (String) request.getAttribute("dataIdx");
    List<Map<String, Object>> fileList = (List) request.getAttribute("fileList_" + dataIdx);
    String updateFlag = (String) request.getAttribute("updateFlag");
    int fileListCnt = (Integer) request.getAttribute("fileListCnt_" + dataIdx);
    String bbsMstIdx = "";
    String attachIdx = "";
    String orgFileNm = "";
    int index = 0;
    String fileExt = "";
    int fileSize = 0;

%>
<!-- link href="<c:url value='/css/egovframework/com/com.css'/>" rel="stylesheet" type="text/css"-->
<script type="text/javascript">
  $(document).ready(function () {
    var chkExistFile = '<%=fileListCnt%>';
    document.getElementById('fileListCnt').value = chkExistFile;
    $("#fileListCnt").val(chkExistFile);
    if(chkExistFile > 0) {
      document.getElementById('updateVFile').style.display = 'none';
      document.getElementById('deleteVFile1').style.display = 'table-row';
      document.getElementById('deleteVFile2').style.display = 'table-row';
    }else{
      document.getElementById('updateVFile').style.display = 'table-row';
      document.getElementById('deleteVFile1').style.display = 'none';
      document.getElementById('deleteVFile2').style.display = 'none';
    }
  });

  function fn_egov_downFile(bbs_mst_idx, data_idx, attach_idx) {
    window.open(
        "<c:url value='/bbs/dataFile/fileDown.do?bbs_mst_idx="+bbs_mst_idx+"&data_idx="+data_idx+"&attach_idx="+attach_idx+"'/>");
  }

  function fn_egov_deleteFile(bbs_mst_idx, data_idx, attach_idx) {
    $.ajax({
      url: '/bbs/file/deleteFileAjax.do',
      type: 'post',
      data: {
        bbsMstIdx: bbs_mst_idx,
        dataIdx: data_idx,
        attachIdx: attach_idx
      },
      charSet: "utf-8",
      success: function (response) {
        $('#fileInformation').html(response);
      }
    });
  }
</script>

<%

    if (fileList != null) {
        for (int i = 0; i < fileList.size(); i++) {
            bbsMstIdx = StringUtil.nvl(fileList.get(i).get("bbsMstIdx"));
            dataIdx = StringUtil.nvl(fileList.get(i).get("dataIdx"));
            attachIdx = StringUtil.nvl(fileList.get(i).get("attachIdx"));
            orgFileNm = StringUtil.nvl(fileList.get(i).get("orgFileNm"));
            fileSize = StringUtil.nvlForInt(fileList.get(i).get("fileSize").toString(), 0);

%>
<a href="javascript:fn_egov_downFile('<%=bbsMstIdx %>','<%=dataIdx %>','<%=attachIdx%>')"><%=orgFileNm %>
</a> <% if (fileSize > 0) { %>(<%= FileUtil.setUnitString(fileSize) %>)<%} %>
<%
    if ("Y".equals(updateFlag)) {
%>
<img src="<c:url value='/images/icon/bu5_close.gif' />"
     width="19" height="18"
     onClick="fn_egov_deleteFile('<%=bbsMstIdx %>','<%=dataIdx %>','<%=attachIdx%>');"
     alt="파일삭제"/>
<%
    }
%>
<br/>
<%
        }
    }
%>

 

JSP에서 ajax를 이용해 파일 리스트를 가져옴(다른 JSP, 이하 JSP2)

JSP에서 fileListCnt가 1이 나오는 것을 delete수행시 0으로 변하게 해야했음

controller에서는 삭제되어 fileListCnt가 0으로 변하는데 JSP2의 ajax의 결과에서는 success, complete, done모두 유지됨

이유는 페이지가  ajax이전에 1번 로딩되면 그 값은 고정이기에 그렇다고 함

하지만 JSP2에서 java코드를 삽입한 부분에서 System.out.println을 찍어보면 값이 변하는 것을 볼수있다.

따라서 fileListCnt를 사용할때 fileListCnt를 반영해 주기위해 JSP2에 document.ready를 사용해서 돔이 로딩되면 바로 변수로 사용할수있게 작업해서 해당 부분을 수정했다.

프론트... 어렵다....