2011-12-21 8 views
1

JQuery 1.6과 최신 tablesorter (sorttable)를 사용하고 있습니다. 나는 "child_url"에 의해 참조 된 페이지가있는 sorttable이있는Firefox 3.5의 JQuery와 tablesorter

$("div#child_container").load(child_url);

을 수행 한 페이지가 있습니다.

FireFox 8에서 이것은 원하는대로 작동합니다. 내가 div에 포함 된 테이블을 sortable 있습니다.

FireFox 3.5에서는 작동하지 않습니다. 열 제목은 클릭 할 수 없습니다. 그것들은 일반 텍스트입니다. 얼룩말 스타일링도 발생하지 않으며 초기 정렬도 마찬가지입니다. FireBug를 실행하면 child_url (데이터 테이블을로드하므로 확인 됨)이로드되고 sorttable.js 파일이로드됩니다. 오류가 없습니다. 모든 경고는 CSS와 관련이 있습니다.

FireFox 3.5에 child_url을로드 할 수 있으며 예상 한대로 작동하므로 테이블 자체의 문제는 아닙니다. 그것은 tablesorter를 사용하는 페이지를 포함하기 위해 JQuery .load()를 수행 할 때 문제가되는 것 같습니다.

진행 방법에 대한 제안이 있습니다. 단지 "죄송합니다.하지만 브라우저가 너무 오래되어 파열되었습니다."

편집 : jquery.tablesorter.js로 전환했습니다. 같은 문제.

편집 : 그것은 등 DOCTYPE, 머리, 그것은 단지에 $("#tablediv").tablesorter(...)를 호출 할 것이다 <table><script> 블록을 제공을 제공하지 않았다 그래서 난 내 child_url 페이지를 modded하게. .js 파일로드를 상위 페이지로 승격했습니다. 이는 3.5와 8.0에서 동일하게 오작동했다. .tablesorter() 전화에서 자바 스크립트 오류가 발생했습니다. 이전에는 없었습니다.

+0

문서에 새로운 요소가 포함되어 있다는 사실을 감안할 때 FF 3.5는 하나 이상의 doctype과 head stuff를 주 문서 (내 추측)에 도입 할 수 없습니다. 그래서, 당신은 *** $ ("div # child_container")와 같은 일을 할 수 있습니다. JQuery 문서 상태로 load ("child_url #some_id_with_table_within"); ***, 당신은 단지 적절한 조각을로드하고 있습니다 ... 또한, 스크립트를 포함시키고 그 부분을 호출해야합니다. – Alfabravo

+0

kryogenix.org에서 sorttable.js를 사용하고있는 것 같습니다. tablesorter.com에서 jQuery 기반 tablesorter.js로 전환 해보십시오. 우리는 Firefox 3.6에서 사용합니다. –

+0

Vik David - tablesorter.com에있는 jquery.tablesorter.js를 사용하도록 코드를 수정했습니다. 같은 문제. 분명히, 그들은이 이슈를 공유합니다. – Meower68

답변

0

먼저 Alfabravo를 신용 할 방법이 있다면, 그렇게 할 것입니다. 그의 코멘트가 문제를 완전히 해결하지는 못했지만 올바른 방향으로 나를 놓았습니다.

child_url 페이지를 잘라내어 <table> 만 제공합니다. 부모 페이지까지 jquery.tablesorter.js을 뽑았습니다. 테이블에 .tablesorter()을 실행하려면 상위 페이지가 필요했습니다.

$("div#pending").load(
    "pending.jsp", 
    function() { 
     $("table#pending_records").tablesorter({ 
      sortList: [[4, 0]], 
      widgets: ["zebra"] 
     }); 
    } 
); 

JQuery.load()

는로드 할 수있는 URL과는 완전히 장전 할 때 실행할 콜백을 지정할 수 있습니다. 그것은 두 번째 편집에서 언급 한 Javascript 오류를 지나치는 데 필요한 비밀 소스였습니다.

다른 노트 : 실제로 두 개의 다른 탭에 두 개의 정렬 테이블을로드했습니다. jquery.ui.tabs.js을 사용했습니다. 두 번째 탭도 작동하지 않았습니다. display: none 블록에있는 경우 sorttable이 작동하지 않기 때문입니다.

  • 첫 번째 탭의 내용을 볼 수 있었다, 그래서이 내용을로드했지만 .sorttable()가 실행되지 않도록 내용 때문에, 두 번째 탭의 내용이 숨겨진 제대로
  • 렌더링이 : 페이지를로드 할 때 제대로 렌더링되지 않았습니다.

나는 그 문제를 해결하기 위해 JQuery.load() doc 페이지에서 언급 된 해킹을 사용할 수있었습니다.

.ui-tabs .ui-tabs-hide { display: none; } 

이 있습니다 : 콘텐츠를 포함하는 프레임이 존재하기 때문에

.ui-tabs .ui-tabs-hide { position: absolute; left: -10000px; } 

가 (화면 밖으로이기는하지만) "표시"예상대로 .sorttable() 작품, 그 대신에, 그래서 기본적으로 스타일 시트를 조정할 그것까지.

+0

당신이 길을 발견했음을 알기 좋습니다. 우리 모두가 그것으로부터 배웠다고 생각해! :) – Alfabravo