JSP hidden 값 실시간 변화 감지(MutationObserver) 적용 및 조건문

✔ IP설정 - 실시간 변화 필요

<input type="hidden" name="catname" value = "">
<input type="hidden" name="cpmstname" value = "">

 최초 변하는 부분은 hidden이 아닌 부분이 변하는 줄 알았지만 이는 수정 또는 저장을 해야 변하는 부분이고 실시간으로 변하는 부분은 <input type="hidden" name="cpmstname" value = ""> 부분이였다.

대표ID 부분도 동일 그렇기 때문에 실시간으로 확인하는 코드와 처음 들어오는 경우 hidden 부분에는 값이 없어 화면에 아무것도 표출하지 않아  <input type="hidden" name="cpmstname" value = "<%=cpmst%>"> 값을 넣어 주었다.

 

 

✔ 초기화

function renderIPSettings() {
        var dynamicIPSelect = document.getElementById('dynamicIPSelect');
        dynamicIPSelect.innerHTML = ''; // 이전 옵션 초기화
dynamicIPSelect 변수: dynamicIPSelect은 IP 설정을 담고 있는 <select> 요소

dynamicIPSelect.innerHTML = '': 이전에 생성된 옵션들을 초기화


    function renderIPSettings() {
      var dynamicIPSelect = document.getElementById('dynamicIPSelect');
      dynamicIPSelect.innerHTML = ''; // 이전 옵션 초기화

위의 코드는 필요한 변수들을 선언하고 초기값을 설정

catnameValue와 cpmstnameValue 변수는 각각 catname과 cpmstname 이름을 가진 input 요소의 값을 가짐currentServerValue 변수는 현재 서버의 값을 설정합니다. <%= CURRENT_SERVER %>는 서버에서 동적으로 제공되는 값이다.

cpid 변수는 현재 사용자의 아이디를 설정합니다. <%= cpid %>는 서버에서 동적으로 제공되는 값이다/

dynamicIPSelect.disabled 속성을 false로 설정하여 이전에 비활성화된 상태를 해제

selectedValue 변수는 해당 아이디의 선택한 IP 설정 값을 가져옵니다. 이 값은 세션 스토리지에서 사용

 

✔ 조건

if (
        (catnameValue === 'apple' && cpmstnameValue === 'banana') &&
        (currentServerValue === '1' || currentServerValue === '3' || currentServerValue === '7')
      ) {
        dynamicIPSelect.options.add(new Option('고정IP', '0'));
        dynamicIPSelect.options.add(new Option('유동IP', '1'));
      } else if ((catnameValue === 'orange' && cpmstnameValue === 'tomato') && currentServerValue === '8') {
        dynamicIPSelect.options.add(new Option('고정IP', '0'));
        dynamicIPSelect.options.add(new Option('유동IP', '1'));
      } else {
        dynamicIPSelect.options.add(new Option('고정IP', '0'));
        dynamicIPSelect.options.add(new Option('유동IP', '1'));
        dynamicIPSelect.disabled = true;
        selectedValue = '0'; // 기본값을 고정IP로 설정
      }

위의 코드는 조건에 따라 dynamicIPSelect의 옵션을 추가하거나 비활성화한다.

 

✔ MutationObserver 생성 - 객체의 속성 변경을 감시

// MutationObserver 생성
      var observer = new MutationObserver(function (mutationsList) {
        for (var mutation of mutationsList) {
          if (mutation.type === 'attributes' && (mutation.attributeName === 'value' || mutation.attributeName === 'data-value')) {
            renderIPSettings();
          }
        }
      });

      // catname, cpmstname hidden 필드 관찰
      var catnameInput = document.querySelector('input[name="catname"]');
      var cpmstnameInput = document.querySelector('input[name="cpmstname"]');

      observer.observe(catnameInput, { attributes: true });
      observer.observe(cpmstnameInput, { attributes: true });

 MutationObserver를 사용하여 catname와 cpmstname hidden 필드의 값 변경을 관찰한다.

attributes: true를 설정하여 속성 변경을 감지한다. 값이 변경될 때마다 renderIPSettings() 함수를 호출하여 IP 설정을 업데이트한다.
 

✔ 업데이트

 function updateIPSettings(selectedValue, cpid) {
        var cpipInput = document.getElementsByName('cpip')[0];

        if (selectedValue === '0') {
          cpipInput.value = ''; // 값을 지워줌
          cpipInput.removeAttribute('disabled');
          cpipInput.style.backgroundColor = '#FFFFFF';
        } else if (selectedValue === '1') {
          cpipInput.value = ''; // 값을 지워줌
          cpipInput.disabled = true;
          cpipInput.style.backgroundColor = '#dcdcdc';
        }

        // 선택한 IP 값을 세션 스토리지에 저장
        sessionStorage.setItem(cpid + '_selectedIP', selectedValue);

        // IP 설정 값 변경에 따라 표시 업데이트
        if (selectedValue === '0') {
          dynamicIPSelect.selectedIndex = 0; // "고정IP" 선택
        } else if (selectedValue === '1') {
          dynamicIPSelect.selectedIndex = 1; // "유동IP" 선택
        }
      }