2017. 3. 20.

[JavaScript] Dynamic Popup with using JSTL

Dynamic Popup with using JSTL


같은 팝업을 여러 곳에서 쓰면서 각각 UI를 달리 해야 하는 경우가 있다. 이때 JSP를 쓰고 있다면 체크변수를 컨트롤러단에 하나 넘겨서 UI를 다르게 보여주면 된다. 예를 들면, 같은 내용의 팝업인데 '하루 동안 열지 않기'라는 체크박스만 추가해야 하는 경우 JSP에 아래와 같이 쓰면 된다.

If you have to show dynamically different UI, just send checking variable to controller level. For example, when you put 'don't show today' checkbox on popup that has same content, just write LIKE THIS :

1
2
3
4
5
<c:if test="${cookieCheck eq 1}">
    <div style="background-color: white; clear :both; width: 100%; margin-top: 10px; text-align: right;" >
        <input type="checkbox" name="chkbox" id="noticeCookieCheck">하루동안 열지 않기
    </div>    
</c:if>
cs

이런 식으로 cookieCheck라는 변수를 controller단에 보내고 특정 값인 경우에만 html 태그가 추가되도록 한다. 이때 controller단은 다음과 같다.

1
2
3
4
5
6
@RequestMapping(value="somePopup")
public String somePopup(@RequestParam("cookieCheck"String cookieCheck, Model model) throws Exception {
    model.addAttribute("cookieCheck", cookieCheck);
    
    return "somePopupName.jsp";
}
cs


javascript에서는 아래와 같이 window를 열어주었다. 간단히 팝업만 띄우기 때문에 url에 변수를 붙이는 방식으로 열었으나, 보안상 좋지는 않다. I just put variable(cookieCheck) to window and open because it is test popup. But this way(showing url) is not good for security.

1
2
settings = 'toolbar=0, status=0, menubar=0, location=0, scrollbars=0, resizable=0, height=500, width=500';
window.open("/somePopup?cookieCheck=1"'', settings);
cs


댓글 없음:

댓글 쓰기