试图通过（jQuery的）AJAX调用加载谷歌排行榜 [英] Trying to load Google charts through a (jQuery)ajax call

问题描述

可能重复：
  <一href="http://stackoverflow.com/questions/8176352/trying-to-load-google-charts-through-a-jquery-ajax-call">Trying通过jQuery的AJAX调用加载谷歌图表

Possible Duplicate:
Trying to load Google charts through a jQuery ajax call

我一直在这个整天，不能想办法，使这项工作。我不是很熟悉的jQuery。

I've been at this all day and cannot think of a way to make this work. I am not very familiar with jQuery.

我想要做什么。我试图写一个民意调查功能加载的结果，并在同一个页面无刷新显示它

What I'm trying to do: I am trying to write a poll function that loads the results and displays it in the same page without refreshing.

到目前为止，我有这个jQuery code：

So far I have this jQuery code:

    $("#post_yes").click(function(){
    $("#result").html(ajax_load);  //loads ajaxloader.gif
    $.post(  
        "query.php",  
        {answer: "yes", poll_id: 5},  
        function(responseText){  
            $.getScript(scriptUrl, function(){  
                $("#result").html(responseText);  
            });             
        },  
        "html"  
    );  
}); 

这应该查询query.php并插入到数据库中投票。然后，我有codeD query.php返回的是量，没有值，然后生成页面上的图表。这是类似的东西，我有：

It's supposed to query query.php and insert the vote in the database. Then I've coded query.php to return the amount of yes and no values and then generate a chart on that page. This is something like that I have:

    google.load('visualization', '1.0', {'packages':['corechart']}); // Load the Visualization API and the piechart package.
    google.setOnLoadCallback(drawChart); // Set a callback to run when the Google Visualization API is loaded.

    function drawChart() 
    {
        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Answers');
        data.addColumn('number', 'Number');
        data.addRows([
            ['Yes', $yes_value],
            ['No', $no_value],
        ]);

        // Set chart options
        var options = 
        {
            'title'             :'Do you Like my smile?',
            'colors'            :['#f25a5a','#5aa5f2'],
            'fontName'          :'Verdana',

            'backgroundColor'   :'#e7e7e7',
            'chartArea'         :{left:0,top:10,width:"400",height:"400"},
            'is3D'              : true,
        };

        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);              
    }

在使用Chrome浏览器的调试器，我已经注意到，在query.php任何JavaScript并没有在我原来的网页上运行，而这就是为什么图表未显示调试页面了一会儿。

After debugging the page for a while using chrome's debugger I've noticed that any javascript in query.php does not run in my original page, and thats why the chart isn't being shown.

我想问你的大师：有没有什么办法可以显示在图表从query.php。或者是有办法，我可以显示在图表上后，用户已投票（包括用户提交的数据）？ 我可以采取什么其他办法？

My question to you gurus: Is there any way I can show the chart from query.php. Or is there a way I can show the chart after a user has voted (including the data the user has submitted)? What other approach can I take?

虽然我不是很流利的JavaScript / JQuery的，我可能会能够遵循任何code（甚至是伪code，任何一点帮助！）你们放弃。

Although I am not very fluent with JavaScript/JQuery, I will probably be able to follow any code (or even pseudo-code, any little bit helps!) you guys give.

推荐答案

默认情况下禁用让您的按钮

make your button by default disabled

在你的js文件加载谷歌的API， 负载回调启用按钮

load Google API in your js file, on load callback enable your button

// Set a callback to run when the Google Visualization API is loaded.     
google.setOnLoadCallback(function(){  $("#post_yes").removeAttr('disabled'); });

移动drawChart功能，你的js文件，添加参数行

move the drawChart function to your js file, add a parameter 'rows'

function drawChart(rows) {
  ...
  data.addRows(rows);
  ...
}

里面的PHP文件生成所需的行并返回它们（作为有效的JSON）

inside php file build needed rows and return them (as valid json)

在BTN点击发表您的数据，成功回调调用drawChart功能，并通过返回的行给它

on btn click post your data, on success callback call the drawChart function and pass returned rows to it

$.post(
  "query.php",  
  {answer: "yes", poll_id: 5},  
  function(response){ 
    drawChart(response);
  }
);

---

或者，如果你不希望禁用的按钮，你可以对成功后首次加载谷歌API和上装载回拨电话drawChart与传递响应//函数（）{drawChart（响应）; }

---

or if you don't want to disable the button you can on post success first load google API and on that loading callback call drawChart with passed response // function(){ drawChart(response); }

这篇关于试图通过（jQuery的）AJAX调用加载谷歌排行榜的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！