Question

我有2个asp页面，在第一个我有一个表单，我使用AJAX通知参数并将其发送到连接到MSSQL数据库的第二个asp页面，使用来自第一个的日期参数运行查询ASP页面并将查询结果返回到ASP变量，然后填充Highcharts。

图形可以很好地传递变量throght querystrings，但使用AJAX图形不会绘制，没有错误，simples返回一个空白图形。

TESTE.ASP

＆＃13;

EVALUATE
ADDCOLUMNS(
    SUMMARIZE(
        Source
        ,Source[BusinessDay]
        ,Source[TravelID]
    )
    ,"No of trips in travels", [TripCount]
    ,"Min of starttime", [MinStart]
    ,"Max of stoptime", [MaxStop]
    ,"First startlocation", [FirstStartLocation]
    ,"Last stoplocation", [LastStopLocation]
)

＆＃13;

VENDAS.ASP

＆＃13;

<!--#include virtual ="/BI/header.asp"-->
<!--#include virtual ="/BI/sidebar.asp"-->
<%
%>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

<script>
function OnCheckAvailability()
{
if(window.XMLHttpRequest)
{
oRequest = new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
oRequest = new ActiveXObject("Microsoft.XMLHTTP");
}

oRequest.open("POST", "vendas.asp", true);
oRequest.onreadystatechange = UpdateCheckAvailability;

oRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
oRequest.send("strCmd=availability&strData1=" + document.form1.data1.value);
}

function UpdateCheckAvailability()
{
document.getElementById("Available").innerHTML = oRequest.responseText;
}
</script>

</head>
<body>

<center>
<div>
<form method="post" action="javascript:void(0);" name="form1">

<label for="newuserid">Data:</label>

<input type="text" name="data1" id="data1 size="20" />

<input id="btnCheckAvailability" type="button" value="Check Availability" onClick="OnCheckAvailability();"><br>

<div id="Available"></div>

</form>

＆＃13;

Answer 1

主要问题是代码未触发setDynamicChart功能。在当前代码中，它会在加载页面时调用，但在ajax加载期间，它不会发生。在ajax加载完成后，您必须调用该函数。

由于您已经在使用JQuery，我已经将您的代码更改为以JQuery方式执行ajax调用：

<!--#include virtual ="/BI/header.asp"-->
<!--#include virtual ="/BI/sidebar.asp"-->
<%
'your asp code as is..
%>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>

<center>
<div>
<form method="post" action="javascript:void(0);" name="form1">

<label for="newuserid">Data:</label>

<input type="text" name="data1" id="data1 size="20" />

<input id="btnCheckAvailability" type="button" value="Check Availability"><br>

<div id="Available">
<script>
function drawGraph()
{
    var chartype='column';
    setDynamicChart(chartype);
}

$("#btnCheckAvailability").on("click",function(){

        $.post("vendas.asp",{"strCmd":"availability","strData1":$("#data1").val()},
        function(data)
        {
            if(data)
            {
                $("#Available").html(data);
                drawGraph();
            }
            else
            {
                console.log("no data");
            }

        });
});

</script>
</div>  
</div>

</form>
</body>
</html>

在被调用页面中，您可以删除脚本包含。

这对我来说有一些虚拟值，因为我没有数据库设置。你必须在最后做一些改变。

在发布ajax请求后，Highcharts不呈现

1 个答案: