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>

Любые идеи о том, как применить эффект лайтбокса к ссылке в таблице после GoogleЗагружена таблица визуализации?

Я также добавил полный скрипт, как он есть сейчас, если это поможет найти проблему.

    <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

Изменить для этого конкретного API визуализации Google:

Метод .draw() не является немедленным, он все еще должен выполнять определенную работу и не выполняет его в текущемпоток (так как может потребоваться получить изображение с сервера и т. д.).Они предлагают прослушиватель событий, однако вы можете использовать его для прослушивания ready события , например:

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, в этом случае запустите плагин только один раз.