캘린더 (calIdx 값 찾기 대소동)

체크 부분값(calCategory)을 가져와야하는데, 해당 값은 CalInfo 클래스에 있었다. 

캘린더가 최대 5개이기 때문에 해당 캘린더를 클릭하면 현재페이지로 calIdx을 가져와야했다. 

뷰어(jsp)에서는 calIdx값이 있는데 이 값이 컨트롤러에서 받아오지 못했다. 

callistresult.jsp에서는 있는 calIdx값을 calpostlistresult.jsp에서는 가져오지 못하는 상황ㅠㅠ 

 

진짜 이거 값 가져오려고 세션연결하고, Requestparam값도 넣어보고 했는데 너무 어려웠다. ㅠ 

각 페이지마다 관계를 잘 알아야했고, 어느 페이지를 누를때 어떤 이벤트가 발생하는지!

그 이벤트에서는 어떤 값을 가져와서 보내주는지 파악하는 것이 중요했다. 

 

캘린더의 경우 진입하는 과정은 2가지가 있음. 메인(index.jsp = callistresult.jsp)화면 섹션영역에 있는

1. 캘린더 썸네일 사진을 클릭해서 넘어가는 방법 (title_list.jsp) 

2. 탭에 있는 영역을 클릭해서 넘어가는 방법 (tap.jsp 

 

트리거를 활용하고 싶었지만 아직 실력이 부족하였고...각각 만드는 수밖에 없었다. 

2가지 방법은 처리해주는 js가 달랐고, 해당 jap 페이지도 달랐다. 

 

1번의 경우는 callist.js에서 처리를 하고 

/*-callistresult화면에서 캘린더 썸네일 클릭했을때-*/
function calThumbnailClick(){
	 	let $calThumbnailObj = $('div.calIdx img');
	 	console.log("calThumbnailClick()");
		$calThumbnailObj.click(function(){
			let $calIdxObj =  $(this).parents('.calIdx'); /*값을 2가지 경우로 나누기 위해 분리해줌*/
			let calIdx = $calIdxObj.attr('id'); /*1번 : calIdx값 */
			let calCategory = $calIdxObj.find('p.title_front').html(); /*2번 calCategory값*/
			
			let tableName = $(this).attr('id');
	        console.log("tableName=" + tableName + "calCategory" + calCategory);
			let ajaxUrl = "./calpostlist";	 
			    
			$.ajax({
	            url: ajaxUrl,
	            method : 'get',
				data:{calIdx:calIdx, calCategory: calCategory}, 
	            success:function(responseData){
					let $articlesObj = $('section>div.articles');
	                $articlesObj.empty();
	                $articlesObj.html(responseData);
			     	window.scrollTo(0, 0);
			    }
	        }); 
	        return false;
				
		});
	}

 

얘를 보여주는 화면은 title_list.jsp페이지.

원래 크게보면 callistresult.jsp페이지가 있는데 

홈페이지 구성이 커뮤니티를 누르면 탭 전환이 일어나게 되면서 두가지 화면으로 나뉘게 된다. 

1. title_list.jsp 

2. tap.jsp

/*title_list.jsp*/
<li>
	<div id="<%=calIdx %>" class="calIdx"> 
	  <div class="title_wrap" id="title5">
	    <a href="#"> <!-- 썸네일 -->
	     	<img id="<%=thumbnailName %>" alt="ADD" title="ADD">
	    </a>
	  </div>
	  
	  <div class="title_info">
	   	 <p class="title_front"><%=ci.getCalCategory() %></p>
	  </div>
	</div>
</li>

 

---

2. tap.js / tap.jsp

 

tap.js

//tap.js 페이지 
//캘린더 생성 후 캘린더 메뉴탭 클릭했을때 
function calMenuClick(){ //callistresult.jsp
	//alert("calMenuClick()");
	let $calMenuObj = $('div.tab>ul.caltab>li>a');
	/*console.log('$calMenuObj = '); 
	console.log($calMenuObj);
	console.log('-------------');*/
	$calMenuObj.click(function(){
		let menuHref = $(this).attr('href'); 
        //console.log("메뉴 href=" + menuHref); //81번행과 중복 
		
        let ajaxUrl = ""; 
		switch(menuHref){
 			case '#':
				break;
			default :
				/*alert("in tab.js menuHref=" + menuHref);
				alert("카테고리 = " + $(this).html());*/
				//tab에서 캘린더 카테고리 클릭되었을때
				//calpost 작동하면 변경해야함.
				ajaxUrl = menuHref;
				//let calIdx = $(this).attr('class');
                //$('section>div.articles').empty();
                $('section>div.articles').load(ajaxUrl,function(responseText, textStatus, jqXHR){
					//console.log(responseText);
                    if(jqXHR.status != 200){
                        alert('응답실패:' + jqXHR.status);
                    }
                });
				return false;
			}
	});
}

tap.jsp의 calIdx값과 calCategory를 이용.

<ul class="caltab">
<%	List<CalInfo> list = (List)request.getAttribute("list");
	
for(CalInfo ci : list){
	
%>   <li><a href="./calpostlist?calIdx=<%= ci.getCalIdx()%>&calCategory=<%=ci.getCalCategory()%>"><%=ci.getCalCategory() %></a></li>
<%} //end for 
for(int i=list.size(); i<5; i++){
%>
	 <li><a href="./html/calInfowrite.html" id = "clickadd" >ADD+</a></li>
<%}//end for
%>

 

---

중요!!!!

생각치 못했던 포인트 

controller에서 list만 보내줬지 calinfo값을 또 보내줘야 하는지 몰랐다...

왜냐면 리스트에  calinfo값을 넣어줘서 그대로 뽑아오면 되는줄 알았음 ㅠ 

 

해결책 : 컨트롤에서 model.addAttribute("calinfo",calinfo);로 보내주기

 

//캘린더 달력을 보는 컨트롤러 
@GetMapping("calpostlist")
public String CalPostList (@RequestParam(value = "calIdx")int calIdx,
						   @RequestParam(value="calCategory")String calCategory,
		                   String calDate,
		                   //@RequestParam(value = "dateValue")String calDate,
		                   HttpSession session, Model model) {
	Customer c = (Customer)session.getAttribute("loginInfo");

	CalInfo calinfo = new CalInfo();
	calinfo.setCustomer(c);
	calinfo.setCalIdx(calIdx);
	
	
	//String calIdx =  request.getParameter("calIdx");
	

	//요청전달데이터로 년/월정보가 없으면 오늘날짜기준의 년/월값으로 설정한다
	//String calDate = request.getParameter("dateValue");  
	if(calDate == null ||calDate.equals("")) {
		SimpleDateFormat sdf = new SimpleDateFormat("yyyy/MM");
		calDate = sdf.format(new Date());
	}


	System.out.println("in CalendarController CalPostList calIdx = " + calIdx +", calDate=" + calDate );

	try {
		List<CalPost> list = service.findCalsByDate(calinfo,calDate);
		model.addAttribute("list", list);	
		model.addAttribute("calinfo",calinfo); //얘를 해줘야 했던것......
		
		return "calpostlistresult.jsp";
	} catch (FindException e) {
		e.printStackTrace();
		model.addAttribute("msg", e.getMessage());
		return "calpostlistresult.jsp";	
	}

}