2

Хорошо, этот сценарий немного сложный, но я постараюсь объяснить его как можно лучше.Использование таблицы Google внутри jqueryui ajax tab

Я использую API API Ajax для получения jquery и jqueryui на странице, поэтому верхняя часть моей страницы выглядит так.

<head> 
    <title>TBTNet</title> 
    <link rel="stylesheet" type="text/css" href="_css/style.css"> 
    <link rel="stylesheet" type="text/css" href="_css/jquery-ui.css"> 

    <script src="http://www.google.com/jsapi"></script> 

    <script> 
     google.load("jquery", "1"); 
     google.load("jqueryui", "1"); 
     google.load('visualization', '1', {packages: ['table']}); 
    </script> 

</head> 

Как вы можете видеть, я также использую API таблицы визуализации Google. На странице у меня есть элемент управления jqueryui tabs, который использует AJAX для загрузки запрошенной страницы на вкладку. На запрошенной странице у меня есть тот же html-заголовок, поэтому тот же javascript. На запрошенной странице есть элемент управления таблицей google. Когда я запускаю страницу в этом сценарии, на вкладке отображается пустая страница. Когда я запускаю запрошенную страницу самостоятельно (без вызова ее через ajax), управление таблицей google отображается просто отлично.

Я довольно новичок в AJAX, поэтому я могу просто что-то упустить. Любая помощь будет принята с благодарностью.

--Kyle

EDIT: Любой?

+0

Можете ли вы опубликовать пример с помощью исходного кода? –

ответ

1

Ответ на этот вопрос оказался очень простым, хотя я все еще не могу объяснить, почему это сработало. Все, что мне нужно было сделать, - это перемещение нагрузки визуализации перед двумя jquery, и теперь все работает отлично.

<head> 
    <title>TBTNet</title> 
    <link rel="stylesheet" type="text/css" href="_css/jquery-ui.css"> 
    <link rel="stylesheet" type="text/css" href="_css/style.css"> 

    <script src="http://www.google.com/jsapi"></script> 

    <script> 
     google.load('visualization', '1', {packages: ['table']}); 
     google.load("jquery", "1"); 
     google.load("jqueryui", "1"); 
    </script> 

    <!--<script src="_includes/js/jquery-ui.min.js"></script>--> 

</head>