🥐포스 메뉴 클릭시 주문 넣기

each 활용, 값 넣을 때, 값 바뀔 때

메뉴 클릭 시 주문에 넣기

주문상황에 넣어주는 코드

//현재주문 상황에 넣기
	$("body").on("click",".menu_btn",function(){
		console.log(cnt);
		if(cnt < 7){
			
			$("#menuNo").val($(this).attr("mno"));
	//주문상황을 그려주는 함수
          reloadOrd();
		
			cnt++;
			
		}else{
			ordPopup("", "더이상 품목추가는 불가합니다.",function(){
			});
		}
			
	}); 

.menu_btn이 메뉴이름이 들어가 있는 버튼이다. 그래서 그것을 클릭 시

form 안에 있는 #menuNo로 메뉴 번호를 넣어준다.

<!-- 오더메뉴 -->
	<select id="getMOrd" parameterType="hashmap" resultType="hashmap">
		SELECT  PM.MENU_NO AS MNO, PM.MENU_NAME AS MNAME, PC.CATE_NAME AS CNAME, PM.MENU_PRICE AS MPRICE, PM.MENU_IMG AS MIMG,PC.CATE_NO AS CNO
		FROM POS_MENU PM INNER JOIN POS_CATE PC
	                         ON PM.POS_CATE_NO = PC.CATE_NO
		WHERE PM.MENU_NO = #{menuNo}
	</select>

위에서 사용한 #menuNo가 xml에서 활용된다. 풀어서 설명해보면 만약 DB에 저장된 메뉴번호가 2번인 것을 포스에서 클릭 시 xml에서는 #{menuNo} 에 2가 들어가게 된다.

 <!-- 오더메뉴 -->
	<select id="getMOrd" parameterType="hashmap" resultType="hashmap">
		SELECT  PM.MENU_NO AS MNO, PM.MENU_NAME AS MNAME, PC.CATE_NAME AS CNAME, PM.MENU_PRICE AS MPRICE, PM.MENU_IMG AS MIMG,PC.CATE_NO AS CNO
		FROM POS_MENU PM INNER JOIN POS_CATE PC
	                         ON PM.POS_CATE_NO = PC.CATE_NO
		WHERE PM.MENU_NO = 2
	</select>

위에 처럼 번호가 들어가게되서 데이터가 출력된다.
그다음 DB에서 메뉴 번호 2번의 데이터를 꺼내와서 컨트롤러에서 ORD 라는 키 값으로 modelMap에 넣어준다.

@RequestMapping(value="/PosOrd",
			method = RequestMethod.POST,
			produces = "text/json;charset=UTF-8")
	@ResponseBody
	public String PosOrd(
		@RequestParam HashMap<String, String> params) throws Throwable{
	ObjectMapper mapper = new ObjectMapper();
	Map<String, Object> modelMap = new HashMap<String, Object>();
	
	System.out.println("오더Params"+params);
	// 오더 취득
	HashMap<String, String>ord= ijhService.getMOrd(params);
	
	modelMap.put("ord", ord);
	
	System.out.println("오더 목록 보자"+ord);
	return mapper.writeValueAsString(modelMap);
		
	}
    컨트롤러에서 ord로 메뉴번호 2번의 데이터를 받는다.

받은 데이터를 가지고 reloadOrd()로 다시 그려준다.

function reloadOrd(){
	var params = $("#ord_form").serialize();
	console.log(params);
	$.ajax({
		url: "PosOrd",
		type: "post",
		dataType: "json",
		data: params,
		success: function(res){
			console.log(res.ord);
			inputOrd(res.ord); //주문을 넣고 그려주는 함수
			
		},
		error: function(request, status, error){
			console.log(error)
		}
	});
}

//현재 주문 넣기
function inputOrd(ord){
	var order ="";
//MNO는 메뉴 번호
// MIMG는 메뉴 이미지
// MNAME은 메뉴 이름
// MPRICE은 메뉴 가격
	order+= 		"<div class=\"ord_stat\">";
	order+= 			"<div class=\"ord_img\" mNo=\""+ ord.MNO +"\">";
	order+= 				"<img src=\"resources/upload/"+ord.MIMG+"\" class=\"choice_img\">";
	order+= 			"</div>";
	order+= 			"<div class=\"ord_div\">";
	order+= 				"<input type=\"text\" value=\""+ ord.MNAME + "\" class=\"choice_menu\">";
	order+= 			"</div>";
	order+= 			"<div class=\"ord_div\">";
	order+= 				"<input type=\"text\" value=\""+ ord.MPRICE + "\" class=\"choice_price\">";
	order+= 			"</div >";
	order+= 			"<div class=\"ord_div\">";
	order+= 				"<select id=\"ord_cnt\" name=\"ord_cnt\">";
	order+= 					"<option value=\"1\" selected=\"selected\">1</option>";
	order+= 					"<option value=\"2\">2</option>";
	order+= 					"<option value=\"3\">3</option>";
	order+= 					"<option value=\"4\">4</option>";
	order+= 					"<option value=\"5\">5</option>";
	order+= 					"<option value=\"6\">6</option>";
	order+= 					"<option value=\"7\">7</option>";
	order+= 					"<option value=\"8\">8</option>";
	order+= 					"<option value=\"9\">9</option>";
	order+= 					"<option value=\"10\">10</option>";
	order+= 				"</select>";
	order+= 			"</div>";
	order+= 			"<div class=\"ord_div\">";
	order+= 				"<input type=\"button\" value=\"취소\" class=\"choice_cnl\">";
	order+= 			"</div >";
	order+= 		"</div>";
	
	$(".ord_area").append(order);
	ordRes();
	ord_pay();
}

ord에서 받은 데이터를 가지고 메뉴를 그려준다.

🌈교훈 : 오늘 큰산을 넘은 느낌이다.