Dojo - dojo.byId() 아약스 응답

Question

Dojo 지원을 사용하고 있습니다. Ajax

function handleSubmit(evt, targetUrl, submitForm, updateDiv) { 
      dojo.stopEvent(evt); 
      dojo.xhrPost({ 
       url: targetUrl, 
       handleAs: "text", 
       load: function(response){ 
        updateDiv.innerHTML = response; 
        wireEvents(); 
        return response; 
        }, 
       form: submitForm, 
       error: function(response, ioArgs) { 
        console.error("HTTP status code: ", ioArgs.xhr.status); 
        return response; 
       }    
      }); 
     } 

서버의 응답에 필요한 것보다 많은 데이터가 있습니다. 나는이

load: function(response){ 
    updateDiv.innerHTML = response; 
    wireEvents(); 
    return response; 
}, 

을

 load: function(response){ 
     updateDiv.innerHTML = dojo.byId('elemToExtract', response); 
     wireEvents(); 
     return response; 
    }, 

로 대체 할 수 있기를 바란다. 내 페이지를 아약스 응답의 일부로 업데이트해야한다. dojo.byId 선택기를 응답 (컨텍스트 루트 또는 jQuery에서 찾은 것과 같은 응답으로 사용)을 사용하는 기능이 필요합니다.

이것을 어떻게 할 수 있습니까?

고맙습니다.

Answer 1

최대 & seth ..고마워요!

결국 솔루션은 Massimiliano가 제안한 바를 기반으로합니다.

나는 이것을 dojo 1.2.3에 적용했다 (이 기능은 dojo.empty() 함수도 빠짐). dojo 변수에서 dom을 추출하려면 "results [0] .innerHTML"을 호출해야합니다. 그런 다음 empty()를 호출하지 않고 대상 "updateDiv"의 innerHTML을 직접 바꿀 수 있습니다.

요점은 domNode를 컨텍스트로 전달하는 트리를 쿼리하는 dojo.query() 기능입니다 (미안합니다. .. 나는 도장을 처음 사용했습니다.)

load: function(response){ 
     var tempDiv = document.createElement("div"); 
     tempDiv.innerHTML = response; 
     var results = dojo.query("[id=elemToExtract]", tempDiv); 
     updateDiv.innerHTML = results[0].innerHTML; 
     wireEvents(); 
     return response; 
}, 

"if (results.length) {"가 런타임에 문제를 일으키는 지 확인하는 이유는 확실하지 않습니다. 내가 JS를 디버깅한다면 나는 약간의 지연을 추가하고 있다고 생각한다. 문제는 내가

내가 API를 문서를 살펴 데 다시

Answer 2

감사드립니다. 이 응답에 포함 된 마크 업을 dojo.byId로 쿼리하려면 구문 분석 된 HTML로 변환하여 DOM을 작성해야한다. 이렇게하려면 응답을 사용하여 임시 html 요소를 만들 수 있습니다. dojo.byId를 사용하여 필요한 부분을 추출 할 수있다.

load: function(response){ 
    var tempDiv = dojo.create('div', {innerHTML: response}); 
    updateDiv.innerHTML = dojo.byId('elemToExtract', tempDiv); 
    wireEvents(); 
    return response; 
}, 

편집 :

가 위의 (또한 Seth's answer 참조) dojo.byId 두 번째 인수로 문서를 필요로하고,이 노드에 동의하지 않는 한, 오류가; 또한 innerHTML에 할당 할 수없는 Node 인스턴스를 반환합니다. 작업중인 솔루션에서 임시 요소가있을 때 dojo.query를 사용하여 필요한 부분을 추출해야한다. 그런 다음 dojo.place를 사용하여 실제 페이지의 DOM 안에 붙여 넣을 수 있습니다. 이전 내용을 바꾸려면 dojo.place를 사용하기 전에 dojo.empty를 사용하여 대상 노드의 모든 자식을 삭제해야합니다.

load: function(response){ 
    var tempDiv = dojo.create('div', {innerHTML: response}); 
    var results = dojo.query('[id=elemToExtract]', tempDiv); 
    if (results.length) { 
     dojo.empty(updateDiv); 
     dojo.place(results[0], updateDiv); 
     wireEvents(); 
    } 
    return response; 
}, 

dojo.place 및 dojo.create 함수가 각각 버전 1.2 및 1.3에서 추가되었습니다. 이전 버전이있는 경우, 그것은 DOM API를 사용하여 교체 할 수 있습니다 :이와

load: function(response){ 
    var tempDiv = document.createElement('div'); 
    tempDiv.innerHTML = response; 
    var results = dojo.query('[id=elemToExtract]', tempDiv); 
    if (results.length) { 
     dojo.empty(updateDiv); 
     updateDiv.appendChild(result[0]); 
     wireEvents(); 
    } 
    return response; 
}, 

Answer 3

문제는 dojo.byId가 두 번째 인수에 대한 문서를 기대하고 있다는 것입니다. 또 다른 문제점은 요소가 DOM에 배치 될 때까지 ID가 '알려지지 않음'이라는 것입니다. (이 마지막 지점에서 잘못되었을 수도 있고 브라우저에 따라 다를 수도 있습니다. 수행 한 실험에서 dojo.byId는 HTML이 DOM에 있어야만 아무것도 반환하지 않았습니다.) ajax 호출에 의해 반환 된 데이터를 숨겨진 요소에 배치 한 다음 dojo.query을 사용하여 원하는 결과를 얻을 수 있습니다.

당신이 당신의 HTML이있는 가정 :

는 그런 다음 xhrGet은 다음과 같습니다

dojo.xhrGet({ 
    url: 'http://jsbin.com/erawu', 
    handleAs: 'text', 
    load: function(data) { 
     var storage = dojo.byId('storage'); 
     storage.innerHTML = data; 
     var want = dojo.query('#iwant', storage)[0]; // or dojo.query(...).forEach(...) 
     if (want) { 
      dojo.byId('hello').innerHTML = want.innerHTML; 
      // depending on what you want 
      // you could also use dojo.place(want, dojo.byId('hello'), 'first') 
     } 
    }, 
    error: function() { 
     console.log(arguments); 
     console.error('ONOES!'); 
    } 
}); 

여기 도장 1.2을 사용하여 working example입니다.