jquery and google table visualization

Question

Hi There, I am hoping that there is someone that can help me. I am using the google.code visualization tools and jquery on the same page.

I am calling the $(document).ready function on the document but suspect the problem lies with calling the google.setOnLoadCallback(drawVisualization); function.

Which still loads after the document.ready function and then does not apply the lightbox effect onto the table

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

Any ideas on how to apply the lightbox effect to a link in the table, after the google visualization table has loaded?

I have also added the complete script as I have it now should this help in finding the problem.

    <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>

Thanks

Answer 1

Edit for this specific Google Visualization API:

The .draw() method isn't immediate, it still has some work to do and it doesn't do it in the current thread (since it may need to retrieve an image from a server, etc). They offer an event listener though, you can use it to listen for the ready event, like this:

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

Add this code between these two lines so it's sure to fire:

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

This will ensure the .prettyPhoto1() runs after all the elements are loaded and ready to go, including the ones in the visualization. Still leave out the document.ready in this case, only run the plugin once.