장소 예약 시 일자 선택 후 예약된 시간대 막기

장소 예약시 일자를 선택하고 시간을 선택하려고 할 때 선택한 일자에 해당하는 이미 예약되어 있는 시간대는 선택하지 못하도록 막을 것

 

 

디비에 저장된 8월 10일 예약 정보

 

---

방법

날짜 선택 후 시간 선택 박스를 클릭할 때 ajax를 통해 선택한 일자를 데이터로 넘겨서 컨트롤러에서 해당 일자의 예약된 시간대 정보를 리스트로 가져옴

이렇게 가져온 리스트를 js로 가져온 select option value와 서로 비교

 

partnerPlaceContent.jsp

// 시간 선택 시 예약된 정보 비교 및 막기
$('#rental_time_no').click(function(){
	// 처음은 disalbed 속성 다 풀기 (전에 disabled 속성이 선택되었을 경우 해제)
	$('select option').removeAttr('disabled');
    
    var timeList = [];

    $.ajax({
        url : '${PageContext.request.contextPath }/rental/partnerPlaces/'+${partner_place_no}+'/dateCheck',
        type : 'GET',
        async : false,	// 전역변수에 데이터 저장
        data : {'rental_date':$('#rental_date').val()},
        success : function(data){
            timeList = data;
        }
    });
// 			console.log("해당 일자의 예약 시간대 : "+timeList);

    for(var i = 0; i < timeList.length; i++){
        var timeNo = timeList[i];
        $("select option[value*='"+timeNo+"']").prop('disabled', true);
    }

});

 

RentalController

@ResponseBody
@RequestMapping(value = "/partnerPlaces/{partner_place_no}/dateCheck", method = RequestMethod.GET)
public List<Integer> rentalDateGet(@PathVariable("partner_place_no") Integer partner_place_no, 
        @RequestParam("rental_date") Date rental_date){
    log.info(" rentalDateGet() 호출 ");
    log.info("partnoer_place_no : "+partner_place_no);
    log.info("rental_date : "+rental_date);
    List<Integer> rentalTimeList = rentalService.getRentalTime(rental_date, partner_place_no);
    log.info(rental_date+"에 해당하는 예약시간리스트 : "+rentalTimeList);

	return rentalTimeList;
}

 

처음에는 ajax로 가져온 데이터를 jsp에서 <c:foreach> 를 통해서 구현하려고 하니 js 변수는 jsp에서 사용할 수 없기 때문에 문제가 막혔으나 option value를 js로 가져와서 막으면 ajax데이터를 바로 사용할 수 있으므로 select 의 각각의 option에 disabled 속성을 걸 수 있게 된다!