전진

개발중 List에서 URL을 꺼내와 URL에서 JSON을 가져다 데이터를 가공하는 코드를 짜고 있었다.

$.ajax({

            type : "POST",

            url : jsonList.jsonUrl,

            dataType : "JSON", // 옵션이므로 JSON으로 받을게 아니면 안써도 됨

async : false,

        success : function(data) {

...

        },

        complete : function(data) {

           ...

        },

        error : function(xhr, status, error) {

...

        }

    });

위의 코드를 List길이 만큼 반복문을 돌며 데이터를 가져오는 부분인데 Safari를 제외한 모든 브라우저에서는 정상 작동을 했다.

하지만 Safari에서만 일부 데이터가 누락 되는것을 확인.

콘솔을 보니 Json파일을 제대로 못읽어 오는 에러가 발생을 했다.

Failed to load resource: the server responded with a status of 412 (Precondition Failed).

위와 같은 에러가 발생하는것을 알 수 있었다.

문제 해결은 POST방식으로 데이터를 호출 하던것을 GET으로 바꾸면서 해결이 되었는데..

이게 대체 어떤 이유에서 발생하는건지 모르겠다.

일단은 해결채근 찾긴했는데 왜그런지를 좀더 찾아봐야 할것 같다.

412 Status Code Explained

A 412 status code indicates that one of the conditions the request was made under has failed. A precondition specified in one or more Request-Header fields returned false.

Why it occurs

The server does not meet one of the preconditions that the requester put on the request. i.e.,The header of the request specified information about acceptable files that is not applicable to the requested file.

Fixing 412 Error Code

The problem can only be resolved by examining what your client system is trying to do and then discussing with your ISP why the Web server fails the 'Precondition' specification sent by the client system. If you are monitor your website through 100pulse, we will intimate whenever you encounter 412 status code error through e-mail or Short message service.

Status 412에 원인의 위와 같다.

서버가 원하는 요청에서 False를 반환해서생기는 에러라는데..영어를 자세히 모르니 답답하네..

412 Precondition Failed 에 대한 설명이 있는 사이트 링크 http://www.checkupdown.com/status/E412.html

여러개의 Json파일에서 Json객체를 불러와 이 객체를 순차적으로 Array에 담는 소스를 구현했는데..

Json파일을 불러오는 API를 검색하니 나온게 jQuery의 getJSON..

for(var i = 0;i <jsonList.length;i++){

var jqxhr = $.getJSON(jsonList[i].jsonUrl, function(json) {

list.push(json);

pushList(json);

});

}

위와 같은 코드를 작성후 테스트 해보니..데이터를 아주 잘 읽어들이고 list의 데이터를 디버거로 확인해봐도 아주 잘 저장 되 있는것을 확인..하지만 소스 실행이 다 된 후 list에 접근하려 한때마다 Undefined가 발생하였다.

분면 콘솔에는 데이터가 아주 이쁘게 들어있는것을 확인했는데 왜이런 것일까..

해결은 getJson을 안쓰고 Ajax를 이용해서 해결함..

for문 돌면서 데이터를 가지고 오는동시에 객체에 접근을 하려하니 Undefined가 발생하는것이었다.

Ajax로 파일을 불러올때 async옵션을 Fasle로 주니 이상없이 객체 접근도 가능하고 아주 잘됨..

괜히 소스코드 몇자 줄여보자고 안쓰던거 썼다가 몇시간동안 뭔 개고생이여..

$.ajax({

type : "POST",

url : url,

data : data,

dataType: "json",

contentType: "application/x-www-form-urlencoded; charset=utf-8",

success : function(data) {

console.log(data);

},

complete : function(data) {

console.log(data);

},

error : function(xhr, status, error) {

console.log("에러발생 : " + error);

}

});

jQuery에서 ajax통신할때 기본 문법..

옵션에 대한 설명은 나중에..

언제가 될지는 모름..나도 모름..

아무튼 기본문법..

$(this).closest('li').remove();

현재 이벤트가 발생된 Element의 부모 태그들중 li 태그를 찾아 지우기.

리스트에서 내가 지우고 싶은 Row를 지울때 사용하면 된다.

li태그 외에도 지우고 싶은 옵션을 closest함수의 파라미터로 넣으면 된다.

HTML의 CheckBox를 전체 선택을 jQuery로 구현.

if($("input:checkbox[id='allChk']").is(":checked")){

$("input:checkbox[name='chk']").attr("checked", true);

}else{

$("input:checkbox[name='chk']").attr("checked", false);

}

<input type='checkbox' id='allChk' name='allChk' onclick='selectCheckboxAll();' />

<input type='checkbox' id='chk' name='chk' />

이 소스 코드로 실행할 경우 제대로 동작 하지 않는다.

FireFox로 확인했을때 한번만 정상 작동하고 그 뒤 부터는 제대로 작동하지 않았다.

$("input[name=chk]:checkbox").prop("checked", true);

CheckBox의 checked Attribute의 속성을 바꿔주는 함수를 attr이 아닌 prop로 바꾸면 아주 잘 작동한다.

아이고 뭐가 이리 어려워..

오늘 한 실수..

jQuery로 가져온 리스트를 다루는데 난 리스트로 가져왔으니 당연히 자바 스크립트의 for in으로 해결이 될 줄 알았다.

하지만 안되는 것..

그러다 화장실 갔다오다 생각난게..jQuery로 ajax통신한 배열은 jQuery의 each로 해결 해야 한다는게 생각났다.

$.each(fileList, function(index, file) {

alert(index + " : " + file);

});

이거 때문에 삼십분 넘게 시간 버렸네..

jQuery의 ajax쿼리로 가져온 객체는 jQuery로 다루자.

Radio의 value가져오기.

$("input[name='ElementName']:checked").val();

CheckBox이 Check여부.

$("input:checkbox[id='ElementId']").is(":checked");

Element에 Attribute추가.

$("input[name=ElementName]").attr("AttributeName", "AttributeValue");

이렇게 써놨는데 또 까먹겠지..

<input type="radio" name="searchType" value="doro" onclick="" checked /><label for="ideaTech1">도로명주소</label>

<input type="radio" name="searchType" value="jibun" onclick="" /><label for="ideaTech1">지번주소</label>

위와 같이 두개의 radio가 있고 선택 된 radio의 값을 가져 오고 싶다면..

$(":radio[name='elementName']:checked").val();

elementName에는 내가 가져오고자 하는 radio의 name을 적어 준다.

이러면 선택 된 radio의 value를 가져올 수 있다.