web-dev-qa-db-ja.com

jQueryはAJAX

解決できない問題があります。インターネットでよく調べていますが、何も見つかりませんでした。

PHPによるAjaxリクエストを実行するために使用されるこのJavaScriptがあります。リクエストが完了すると、Google Visualization APIを使用して注釈付きのタイムラインを描画し、データを表示する関数を呼び出します。

スクリプトはAJAXなしでもうまく機能します。すべてをインラインで実行するとうまく機能しますが、AJAXで実行しようとすると、機能しません!!!

私が得るエラーは、Google Chrome開発者ツールでUncaught TypeError: Cannot read property 'DataTable' of undefinedを取得する "data" DataTableの宣言にあります。

スクリプトがエラーになると、ページ上のすべてがクリアされ、空白のページが表示されます。

だから私はそれを機能させる方法がわかりません。

$(document).ready(function(){               
    // Get TIER1Tickets                 
    $("#divTendency").addClass("loading");

    $.ajax({
        type: "POST",
        url: "getTIER1Tickets.php",
        data: "",
        success: function(html){
            // Succesful, load visualization API and send data      
            google.load('visualization', '1', {'packages': ['annotatedtimeline']}); 
            google.setOnLoadCallback(drawData(html));                                                   
        }
    });     
});


function drawData(response){            
    $("#divTendency").removeClass("loading");

    // Data comes from PHP like: <CSV ticket count for each day>*<CSV dates for ticket counts>*<total number of days counted>
    // So it has to be split first by * then by ,
    var dataArray   = response.split("*");
    var dataTickets = dataArray[0];
    var dataDates   = dataArray[1];
    var dataCount   = dataArray[2];

    // The comma separation now splits the ticket counts and the dates
    var dataTicketArray = dataTickets.split(",");
    var dataDatesArray  = dataDates.split(",");

    // Visualization data                               
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('number', 'Tickets');
    data.addRows(dataCount);                                                    

    var dateSplit = new Array();
    for(var i = 0 ; i < dataCount ; i++){
        // Separating the data because must be entered as "new Date(YYYY,M,D)"
        dateSplit = dataDatesArray[i].split("-");
        data.setValue(i, 0, new Date(dateSplit[2],dateSplit[1],dateSplit[0]));
        data.setValue(i, 1, parseInt(dataTicketArray[i]));
    }               

     var annotatedtimeline = new google.visualization.AnnotatedTimeLine(document.getElementById('divTendency'));
     annotatedtimeline.draw(data, {displayAnnotations: true});                              
}
jqueryajaxgoogle-visualization
24
Arturo

Google APIを使用したとき、最初に負荷を初期化するように明示的に言われたことを覚えています。したがって、おそらくgoogle.load関数をAJAXから除外し、成功したときに関数の2番目の部分を呼び出し続けます。

//Straight Away!
google.load('visualization', '1', {'packages': ['annotatedtimeline']}); 

$(document).ready(function(){
    // Get TIER1Tickets                 
    $("#divTendency").addClass("loading");

    $.ajax({
        type: "POST",
        url: "getTIER1Tickets.php",
        data: "",
        success: function(html){
            // Succesful, load visualization API and send data
            google.setOnLoadCallback(drawData(html)); 
        }
    });  
});
25
jamie-wilson

私はこれが古い投稿であることを知っていますが、google.loadのドキュメントを調べた後、ライブラリを動的にロードしたい場合に備えて、非同期オプションを見つけました。

http://code.google.com/apis/loader/

function loadMaps() {
   google.load("visualization", "2", {"callback" : function(){ alert(4); }});
}
6
daxiang28

これは古いスレッドですが、他の人に役立つかもしれません。
私は今同じ問題に遭遇しました、そしてそれは私が以前にCMSで持っていたものと非常に似ています（同じではないにしても）：

ページのコード：

<div id='targetdiv'></div>
<script type="text/javascript">
$(document).ready( function () {
   $('#targetdiv').load('...some url...');
});
</script>

ajaxでロードされたスクリプトの一部：

<script type="text/javascript">
  document.write("hello");
</script>

結果は、まだロードされているように見える「hello」というテキストのページです。これは、document.writeメソッドが原因で発生します。スクリプトはすでに完成して閉じられたドキュメントに読み込まれるため、ブラウザは新しいドキュメントを開きます。JavaScriptエンジンは、新しいドキュメントを開くと実行中のドキュメントが削除されたため、到着しない次のコード行を待機していると思います。

2
balazs

これは暗闇の中でのちょっとしたショットです：

google.setOnLoadCallback(function() { drawData(html) });

Htmlへの参照が失われ、クロージャが必要な可能性があります。

1
Finbarr

返されたデータのサンプルを提供していただけますか？ drawData（html）を直接呼び出すことができます：

$.ajax({
type: "POST",
async: false,
url: "getTIER1Tickets.php",
data: "",
success: function(html){
    // Succesful, load visualization API and send data      
    google.load('visualization', '1', {'packages': ['annotatedtimeline']}); 
   //You are already in a callback function, better like this ? 
    drawData(html);                                                   
}});
1
Darkyo

視覚化を提供するGoogleライブラリが不足しているようです。必要なGoogleスクリプトをすべて含めてもよろしいですか？

0
acrosman

これを同期AJAXリクエストとして実行しようとしましたか？以下のasync設定に注意してください。

$.ajax({
    type: "POST",
    async: false,
    url: "getTIER1Tickets.php",
    data: "",
    success: function(html){
        // Succesful, load visualization API and send data      
        google.load('visualization', '1', {'packages': ['annotatedtimeline']}); 
        google.setOnLoadCallback(drawData(html));                                                   
    }
});
0
James

これは私のために働きます

google.load("visualization", "1", { packages: ["corechart"] });

             var chart ;
             var data ;
             var options;
        function Change(s)
        {
              // s in json format    
              google.setOnLoadCallback(reDraw(s));
              function reDraw(s) {
                  console.log(new Function("return " + s)().length); // to test if json is right
                  data = google.visualization.arrayToDataTable(new Function("return "+s)());

                    options = {
                    title: 'Product Scanes',
                    vAxis: { title: '', titleTextStyle: { color: 'red'} }         
                };

              }         
                chart = new google.visualization.BarChart(document.getElementById('chart_div'));
                chart.draw(data, options);
        }  
        function requestDate() // cal the method when you want to draw the chart 
        {

            $.ajax({
                type: "POST", // CHANGED
               // contentType: "application/json; charset=utf-8",
                url: "something.php",
                data: {  parameters you wanna pass },
                success: function (d) { 
                Change(d);


                }
            });    
        }
}
0
user123456

私はグーグルAPIにまったく精通していませんが、コールバックの「html」は実際にはjsonまたはスクリプトであると思います。$。ajaxの「dataType」オプションを試すことができます。

$.ajax({
    type: "POST",
    url: "getTIER1Tickets.php",
    dataType: "json",//"script"
    data: "",
    success: function(html){
        // Succesful, load visualization API and send data      
        google.load('visualization', '1', {'packages': ['annotatedtimeline']}); 
        google.setOnLoadCallback(drawData(html));                                                   
    }
});

詳細： http://api.jquery.com/jQuery.ajax/

0
dimvic

プロジェクトの1つでAJAXベースのタブシステムとGoogleのインタラクティブ折れ線グラフの視覚化を使用していて、同様のレンガの壁にぶつかりました。

AJAX固有のクロスドメインスクリプティングのブロックのため、Google javascript API（ http://www.google.com/jsapi ）またはその他の外部リソースをロードすることはできません。

また、Googleの利用規約では、視覚化APIのオフライン（別名「Googleでホストされていない」）での使用が禁止されているため、スクリプトのコピーを合法的に入手して、必要に応じて自分でホストすることはできません。

タブに「visualization_page.php」の代わりに「get_vis.php」というファイルを含めるというハッキーな回避策を試しました。ここで、「get_vis.php」の内容は次のとおりです。

<?php 
echo file_get_contents('http://domain.com/path/to/visualization_page.php');
?>

しかし、運が悪いので、APIを適切にロードする唯一の方法は、Googleのサーバーとの対話を許可するようにセキュリティ設定を調整することだと思われます。それが役立つかどうかはわかりませんが、頑張ってください。

0
dan