2010-07-14 2 views
2

jQuery에서 AJAX를 통해 페이지를 호출하고 있습니다.jQuery AJAX 데이터를 필터링 한 다음 데이터를 바꿉니다.

특정 DIV 클래스 만 가져올 수 있도록 이러한 페이지의 내용을 필터링해야합니다. 이 인스턴스에서는 'Section1'입니다.

이 필터링 된 데이터는 같은 클래스의 DIV에서 현재 페이지의 동일한 데이터를 대체해야합니다.

I 현재이를하지만 정말 나를 위해 작동하지 않습니다 :

var $filteredData = $(data).find('.Section1'); 
$('.Section1').replaceWith($filteredData); 

.filter() 단지에서 최상위 요소를 찾아 낼 것입니다 :

$("#dialog_select").live('change', function() { 

    //set the select value 
    var $optionVal = $(this).val(); 

    //$(this).log($optionVal); 

    $.ajax({ 
     type: "GET", 
     url: $optionVal, 
     dataType: "html", 
     cache: false, 
     success: function(data) { 

      var $filteredData = $(data).filter('.Section1'); 

      $('.Section1').replaceWith($filteredData); 
     }, 
     error: function(xhr, ajaxOptions, thrownError) { 
      alert(xhr.status); 
      alert(thrownError); 
     } 
    }); 

}); 
+2

'filter()'는 ** 최상위 ** 요소 만 반환합니다. 응답의 내용에 포함되어 있지 않습니까? –

답변

2

나는 문제는 여기 가능성이 높습니다 생각 응답 (페이지 인 경우 <html>이며 결과가 없습니다). .find()은 decendant 요소를 찾습니다. 또한 .Section1 요소가 여러 개있는 경우 예상대로 작동하지 않으며 중복이 진행될 수 있습니다.

0

이것은 까다로운 작업이며 데이터를 DOMParser 또는 document.implementation.createDocument 또는 MSXML에 배치하는 것이 좋습니다.

if (window.DOMParser) { 
    parser=new DOMParser(); 
    xmlDoc=parser.parseFromString(text,"text/xml"); 
} 
else { 
    xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); 
    xmlDoc.async="false"; 
    xmlDoc.loadXML(text); 
} 

은 기본 코드 예입니다. jQuery 자체는로드 함수를 사용하여 선택기를 필터링 할 수 있습니다. http://api.jquery.com/load/ 그러나 여기에는 html, head 또는 body 태그를 필터링 할 수없는 등의 몇 가지 제한 사항이 있습니다. 이것이 위의 방법이 더 안전한 이유입니다.

+2

그는 그 요소들 중 어떤 것에 대해서도 필터하려고하지 않고 단지 ''필터 안의 표준은 ... 이것은 적어도 지나치게 복잡하다는 것 같습니다. –

+0

동의. 당신의 제안을 시도하십시오. Nick 그리고 그것은 정말 잘 작동합니다. otehr 포인트는 항상 유용합니다. :) – RyanP13

+0

Nick에게 유일한 문제는 콘텐츠가 전체 HTML 페이지 인 경우입니다. 과 의 모든 요소는 동일한 레벨에 있으며 엄청난 혼란을 야기하고 의도하지 않은 결과가 발생할 수 있습니다. 단순함을 위해 내 대답이 제공되지 않았습니다. 이 경우 귀하의 대답은 괜찮습니다. – tbranyen

관련 문제