2

좋아,이 시나리오는 조금 복잡하지만 가능한 한 최선을 다해 설명하겠습니다.jqueryui ajax 탭에서 Google 테이블 사용

저는 Google Ajax Libraries API를 사용하여 페이지에 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> 

Google 시각화 테이블 API도 사용하고 있습니다. 이 페이지에는 AJAX를 사용하여 요청 된 페이지를 탭에로드하는 jqueryui 탭 컨트롤이 있습니다. 요청한 페이지에서 동일한 HTML 헤드를 사용하므로 동일한 자바 스크립트를 사용합니다. 요청 된 페이지에는 Google 테이블 컨트롤이 있습니다. 이 시나리오에서 페이지를 실행하면 탭에 빈 페이지가 표시됩니다. 내가 아약스를 통해 호출하지 않고 자체적으로 요청한 페이지를 실행하면 Google 테이블 컨트롤이 잘 표시됩니다.

나는 AJAX에 상당히 익숙하므로 뭔가가 누락되었을 수 있습니다. 어떤 도움이라도 대단히 감사하겠습니다.

- 카일

편집 : 아무나?

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