jquery 및 Google 표 시각화

Question

나를 도울 수있는 사람이 있기를 바랍니다. 동일한 페이지에서 google.code 시각화 도구와 jquery를 사용하고 있습니다.

문서에서 $(document).ready 함수를 호출하려고하지만 google.setOnLoadCallback(drawVisualization); 함수를 호출 할 때 문제가 있다고 의심됩니다. 여전히 테이블에 라이트 효과를 적용하지 않는 다음 document.ready 기능 이후에로드하고

<script type="text/javascript" charset="utf-8"> 
    $(document).ready(function(){ 
     $(".gallery a[rel^='prettyPhoto']").prettyPhoto1({theme:'facebook'}); 
    }); 
    </script> 

구글 시각화 표 다음에, 테이블의 링크 라이트 효과를 적용하는 방법에 대한 아이디어 로드 했습니까?

나는이 문제를 찾는 데 도움이 될만한 완전한 스크립트를 추가했습니다.

<script type="text/javascript"> 
     google.load('visualization', '1', {packages: ['table']}); 
    </script> 
<script type="text/javascript"> 
    function drawVisualization() { 
     // Create and populate the data table. 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'No'); 
     data.addColumn('string', 'Page URL'); 
     data.addColumn('string', 'EDIT'); 
     data.addRows(10); 
     <% while ((Repeat1__numRows-- != 0) && (!rs_page_1.EOF)) { %> 
     data.setCell(<%= Repeat1__index %>, 0, '<%=(rs_page_1.Fields.Item("g_page_no").Value)%>'); 
     data.setCell(<%= Repeat1__index %>, 1, '<a href="<%=(rs_page_1.Fields.Item("g_page_site").Value)%><%=(rs_page_1.Fields.Item("g_page_url").Value)%>"><%=(rs_page_1.Fields.Item("g_page_site").Value)%><%=(rs_page_1.Fields.Item("g_page_url").Value)%></a>'); 
     data.setCell(<%= Repeat1__index %>, 2, '<span class="gallery clearfix"><div class="btn_newsite"><a href="/application/functions/preview.asp?g_sites_no=<%=(rs_page_1.Fields.Item("g_sites_no").Value)%>&amp;g_page_no=<%=(rs_page_1.Fields.Item("g_page_no").Value)%>&amp;iframe=true&width=100%&height=100%" rel="prettyPhoto1[iframes]" title="View">Edit</a></div></span>'); 
     <% 
    Repeat1__index++; 
    rs_page_1.MoveNext(); 
}; 
%> 
     // Create and draw the visualization. 
     visualization = new google.visualization.Table(document.getElementById('table')); 
     visualization.draw(data, {'allowHtml': 'true'}, {'showRowNumber': 'true'}, {'firstRowNumber': '1'}); 
    } 
    google.setOnLoadCallback(drawVisualization); 
    </script> 
<div id="table"></div><script type="text/javascript" charset="utf-8"> 
     $(document).ready(function(){ 
      $(".gallery a[rel^='prettyPhoto']").prettyPhoto1({theme:'facebook'}); 
     }); 
     </script> 

감사

Answer 1

이 특정 Google 시각화 API에 대한 편집 :

.draw() 방법은, 그것은 여전히해야 할 일하지 즉시 가지고있다 그리고 그것은 그것을하지 않습니다 현재 스레드 (서버에서 이미지를 검색해야 할 수도 있기 때문에). 그들은 이런 식으로, 당신은 ready event을 수신하는 데 사용할 수 있습니다,하지만 이벤트 리스너를 제공합니다 : 그것은 확실히 그래서

google.visualization.events.addListener(visualization, 'ready', function() { 
    $(".gallery a[rel^='prettyPhoto']").prettyPhoto1({theme:'facebook'}); 
}); 

화재에 사이에이 두 줄이 코드를 추가

visualization = new google.visualization.Table(document.getElementById('table')); 
visualization.draw(data, {'allowHtml': 'true'}, {'showRowNumber': 'true'}, {'firstRowNumber': '1'}); 

이를 모든 요소가로드되고 준비가 된 후 .prettyPhoto1()이 실행되도록 보장합니다 (시각화 항목 포함). 이 경우 document.ready을 제외하고 플러그인을 한 번만 실행하십시오.