forEach문을 사용하여 동적으로 radio 버튼을 생성한 경우, javaScript의 ready Function보다 늦게 생성되기 때문에,
시점이 맞지 않아 ready Function을 활용하여 DB에 저장되있는 값을 value값에 넣어주지를 못한다.
그러므로, 동적으로 생성 될 input type='radio' 폼 안에, value값을 c:out을 통해 직접 넣어 줄 수 있다.
하지만 이 방법으로 checked 속성을 지정할 경우 반복이 끝난 맨 마지막 속성에 checked가 되므로,
checked="checked" 를 사용하여, DB에 저장된 값이 오게되면 체크하도록 할 수 있다.
아래는 실 활용 구문
<c:choose>
<c:when test="${fn:length(authCodeList) > 0 }">
<c:forEach var="auth" items="${authCodeList}">
<input type="radio" name="authGroup" id="${auth.cdCd}" value="${auth.cdCd}" <c:if test="${auth.cdCd eq memberDetail.authGroup}"> checked="checked"</c:if> "/>${auth.cdNm}
</c:forEach>
</c:when>
</c:choose>
jstl과 다르게 ajax를 통해 동적으로 구현된 게시판이라면 ready Function을 통해 select 값을 DB에 저장되어있는 값으로 선택되어 불러올 수 있다.
먼저 ready function 안에 addAttribute로 보내준 값을 jstl로 받고 jQuery 셀렉트를 활용하여, value값을 넣어준다.
var 변수명 = "${member.name}";
jq('select[name="구현할 동적폼의 name"]').val(변수명);
이 때 만약 select문이 2depth로 구현되어 onchage가 적용되어 있다면, chage를 받는 function을 한번 더 raedy function안에 넣어준다.
아래는 실제 활용 구문
jq(document).ready(function(){
var company = "${memberDetail.company}";
jq('select[name="dcode"]').val(company);
changeMcode(company);
})
function changeMcode(data) {
fnSearchMCode(data);
}
function fnSearchMCode(data) {
ajax~~~~~로 동적구현 ~~~~
}
위 문제 해결의 다른 방법.
ON함수
bind() 함수와 one() 함수가 이미 <body>안에 생성되어 있는 요소에 대한 이벤트
정의인 반면, on() 함수는 앞으로 동적으로 추가할 요소에 대한 이벤트를 미리 정의
해 놓는 기능이다.
ON함수의 사용법
새로 추가될 요소에 대한 이벤트이기 때문에, 이 이벤트가 정의 되는 시점에서는 대
상이 존재하지 않게 된다. 그러므로, 이 이벤트는 document 객체에 설정해야 하고,
다음의 한가지 용법만 있다.
$(document).on( “이벤트”, “셀렉터”, function () {
... 이벤트 처리 로직 ...
} );
'jQuery' 카테고리의 다른 글
| ajax console.log 찍을 때 object object로 나올 때 해결 방법 (2) | 2017.03.22 |
|---|---|
| Input Box 내용 초기화 하는방법 (0) | 2017.03.10 |
| javascript 다른페이지에 파라미터 전달 (0) | 2017.03.10 |
| querySelectorAll 활용 (0) | 2017.03.10 |
| jQuery 기본(2) (0) | 2017.03.10 |
