2012-01-04 2 views
1

프로토 타입에서 ajaxreponse의 높이를 어떻게 얻을 수 있습니까? Ajax에서 반환 된 요소의 높이를 가져와야합니다.프로토 타입의 ajax 요청에서 높이 가져 오기

new Ajax.Updater('myDiv','myUrl' { 
      parameters: '?something=something', 
      onSuccess: function(transport){ 
      //get height from first div returned   

      } 
     }); 
+0

내 이해에서 DOM 내부에 없으면 요소의 높이를 가져올 수 없으므로 삽입하고 높이를 테스트해야합니다. –

+0

높이는 조각이 포함될 문서에 따라 달라지며, 글로벌 CSS 규칙에 따라 – clyfe

+0

필자의 첫 번째 대답은 요소가 추가되기 전에'onSuccess'가 호출된다는 사실을 놓쳤습니다. (onSuccess가 아닌'success'를 사용하고 요즘에는 너무 많은 jQuery 작업을했습니다!); 나는 지금 그것을 고쳤다. –

답변

2

DOM에 요소를 삽입하고 측정해야합니다. 가장 좋은 방법은 실제로 완료 될 때 어디에 삽입 할 것인가 (Ajax.Updater을 사용하기 때문에 수행 중임)입니다. [어떤 이유인지 먼저 측정하고 싶다면 스타일을 position: absolute에 붙이고 그 값을 큰 음수로 left (예 : left: -10000px)으로 지정하여 오프 페이지로 유지 한 다음 측정 한 다음 이동하십시오 (큰 left 등을 제거함). DOM의 위치와 관련된 스타일 및 기타 요인으로 인해 크기가 변하지 않도록주의하십시오.] Prototype은 일반적인 Ajax 콜백을 모두 호출하지만 그 onSuccess이라고하며 업데이트가 수행됩니다. 콜백 을 얻으려면을 사용하거나 onComplete을 사용합니다 (단, 실패도 호출됩니다). onSuccess에서 setTimeout을 사용하십시오.

는 다음과 같이 보일 것이다 onComplete를 사용하여 "먼저 DIV 반환에서 높이를 얻을"코드와 주석을 감안할 때 : 당신이 onSuccess + setTimeout 접근 방식을 선호한다 (그러나이주의 경우

onComplete: function() { 
    var firstDiv, height; 
    firstDiv = $("myDiv").down("div"); 
    if (firstDiv) { 
     height = firstDiv.getHeight(); 
     // ... 
    } 
} 

Live example

요소를 추가 할 때와 측정 할 때 사이에 더 긴 지연이 발생합니다.) :

onSuccess: function() { 
    setTimeout(function() { 
     var firstDiv, height; 
     firstDiv = $("myDiv").down("div"); 
     if (firstDiv) { 
      height = firstDiv.getHeight(); 
      // ... 
     } 
    }, 0); // Won't really be 0ms, but not much longer 
} 

Live example

+0

'setTimeout' 대신''Function # defer' (http://api.prototypejs.org/language/Function/prototype/defer/)를 선호합니다. 그것은 내부적으로 동일하게 작동하지만 약간 깔끔하게 보입니다. – clockworkgeek

+0

@clockworkgeek : 아, 예, 프로토 타입을 사용하는 것을 잊었습니다. :-) 나도 좋아해. –

+0

빠른 답장을 보내 주셔서 감사합니다. DOM에 요소를 삽입하여 높이를 확보해야한다고 했으므로 –