더 많은 Ajax를로드 한 후 DOM 문제 - SilverStripe

더 많은 Ajax를로드하는 SilverStripe를 사용하는 페이지에서 작업하고 있습니다. 아약스는 #pagination 사업부가 자신을 비우고 응답 데이터를 추가 전화가있을 때마다이 HTML 구조더 많은 Ajax를로드 한 후 DOM 문제 - SilverStripe

<div id="pagination"...> 
    // items goes here 
</div> 
<div id="loadmore"...> 
    // load more button 
</div>

입니다. 더 많은 버튼을로드하려면 링크를 업데이트해야하므로 응답 데이터 (템플릿으로 렌더링)에 포함했습니다.

success: function(data) { 
    loadmore.remove(); 
    container.empty(); 
    container.append(data); 
}

이것은, 그러나, 부하 더 DIV 아약스 후 pagination 사업부 내에 중첩되는 문제가 발생합니다.

어떻게하면이 문제를 해결할 수 있습니까?

출처

2016-06-30 Nam Nguyen

가 UPDATE : 나는 마침내 네가 근무있어 솔루션은 실제로 전문적이지 않습니다. html에 주석을 추가하고 그 주석으로 응답을 분할했습니다. 페이지 매김 div가 첫 번째 분할 문자열을 추가하고 페이지 매김과 loadmore를 모두 포함하는 큰 div가 두 번째 분할 문자열을 추가합니다. 나는 더 나은 솔루션을 원합니다. –

잠시 후 솔루션으로 답변을 작성하고 자동 수락 할 수 있습니다. – wmk

"페이지 매김"만 포함하는 템플릿을 만들고 AJAX를 통해 반환하십시오. 그러면 JS에서 다음과 같이 할 수 있습니다. $ ("# page"). replaceWith ($ (data)); ' – bummzack

당신은 같이하는 템플릿을 변경할 수 있습니다 :

<div id="wrapper"> 
    <div id="pagination"...> 
     // items goes here 
    </div> 
    <div id="loadmore"...> 
     // load more button 
    </div> 
</div>

을 다음과 같이하십시오 추가 DOM 노드를 추가하지 않으려면

success: function(data) { 
    $("#wrapper").replaceWith($(data)); 
}

, 당신은에 콜백 핸들러를 다시 작성할 수 있습니다 다음과 같이 :

이

success: function(data) { 
    var content = $(data); 
    $("#pagination").replaceWith(content.filter("#pagination")); 
    $("#loadmore").replaceWith(content.filter("#loadmore")); 
}

출처

2016-07-05 08:22:30 bummzack

나에게 좋은 소리입니다. –

더 많은 Ajax를로드 한 후 DOM 문제 - SilverStripe

답변

관련 문제