글

작성일자

jQuery UI의 draggable 기능에서 Scroll 오류 해결 방법

jQuery UI에서는 dom 요소에 대해 마우스로 쉽게 이동할 수 있도록 draggable 기능을 제공합니다. Windows 10에서는 문제가 없는데, Windows 7 등과 같은 버전에서는 이 draggable 기능 적용시 Scroll 기능에 오류가 있습니다. 즉, Scroll 기능이 작동하면 해당 dom이 계속 마우스에 붙어 따라다니는 기이한 현상이 발생합니다. 이에 대한 해결책은 아래의 코드와 같습니다.

var containerDiv = $("#layerManager");
containerDiv.draggable({ handle: "#layerManagerTitle" });

위의 코드가 적용된 dom 요소의 구성은 아래 이미지와 같습니다.

즉, ID가 layerManager인 DIV에 draggable 기능을 적용어 이동시키되, ID가 layerManagerTitle인 DIV에 대해서만 draggable 적용을 받도록 하는 것입니다.

작성일자

GeoService-Xr의 SQL 실행 서비스 호출 코드

GeoService-Xr에서 DBMS를 대상으로 Query 문을 호출하는 코드를 정리해 둡니다. GET 방식과 POST 방식 모두 적용할 수 있는데요. 먼저 POST 방식에 대한 예는 다음과 같습니다.

sql = "SELECT USER_ID, SEC_NUM, NAM, EMAIL from web_user_man";
url = "http://168.192.76.103:8080/Xr?sql|BzSewage|1";
                        
$.ajax({
    url: url,
    type: "POST",
    crossDomain: true,
    data: sql,
    dataType: "text",
    
    success: function (response) {
        response = response.substr(0, response.length - 1); // data 문자열 끝에 \0 문자를 제거
        response = JSON.parse(response);

        // ...
    },

    error: function (xhr, status) {
        alert("ajax error");
    }
});

아래는 위와 동일한 SQL 문에 대해 GET 방식으로 호출한 예입니다.

sql = "SELECT USER_ID, SEC_NUM, NAM, EMAIL from web_user_man";
url = "http://168.192.76.103:8080/Xr?sql|" + encodeURIComponent(sql) + "|BzSewage|1";

$.ajax({
    url: url,
    type: "GET",
    crossDomain: true,
    dataType: "text",

    success: function (response) {
        response = response.substr(0, response.length - 1); // data 문자열 끝에 \0 문자를 제거
        response = JSON.parse(response);

        // ...
    },

    error: function (xhr, status) {
        alert("ajax error");
    }
});

이런 방식은 개발 단계에서 별도의 서버설정없이 바로 SQL 문을 실행할 수 있는데요. 최종적으로는 SQL 문을 이처럼 코드 단에 담기 보다는 GeoService-Xr의 SQL 실행 서비스의 방식으로 변경해 소스코드를 배포해야 합니다.