Loading multiple Highcharts with jquery.load
Question
I have a master page which calls in other web pages using jquery.load, for example
$("#loading").show();
$("#arena").load('Project.prx?PID=' + dataReport);
$("#loading").hide();
(Project.prx is in an in-house CGI language like ColdFusion, and it's pumping out HTML and JavaScript.)
In the browser debugger I get error messages like the following every time I click on a link, viz
Uncaught Highcharts error #16: www.highcharts.com/errors/16
Highcharts website says of this error:
Highcharts Error #16
Highcharts already defined in the page
This error happens the second time Highcharts or Highstock is loaded in the same page, so the Highcharts namespace is already defined. Keep in mind that the Highcharts.Chart constructor and all features of Highcharts are included in Highstock, so if you are running Chart and StockChart in combination, you only need to load the highstock.js file.
As I'm using jquery's load() and targeting a div in the current document, it is a fair call for Highcharts to claim that I'm loading a second instance of the namespace. Nevertheless, this is what I want to do.
So any idea how to load other Highcharts pages into one with an existing instance of the Highcharts namespace?
LATER
I have had some success with not putting highcharts in the controller and only in the targets and issuing
$("#loading").show();
$("#arena").empty();
delete(Highcharts);
$("#arena").load('Project.prx?PID=' + dataReport);
$("#loading").hide();
However, this has not proved successful in every instance.
3 answers
solution1
1 2014-11-24 02:25:42
It is a fair call for Highcharts to claim that I'm loading a second instance of the namespace. Nevertheless, this is what I want to do.
I don't think that actually is what you want to do. There is never a reason to load the highcharts library twice. You simply want to load two charts on the same page.
The simple solution:
Remove <script src="http://code.highcharts.com/highcharts.js"></script> (or however you load this file) from the output of your prx file. No need to call delete(Highcharts); I don't think that line even does anything in this case.
The slightly more robust solution:
If you need to be able to access Project.prx?id=123 directly through your browser (maybe for testing), you'll need to wrap that output up in full HTML depending on how it's called.
Modern browsers will include the header X-Requested-With: XMLHttpRequest which you can test for in your server code and provide the wrapped or upwrapped chart accordingly; however, this method is really not reliable. A more reliable solution would be to specify how you want it in the query string. For instance, you could make it so that Project.prx?id=123 will give you:
<div id="container"></div>
<script type="text/javascript" >
$('#container').highcharts({
...
});
</script>
but Project.prx?id=123&v=test will give you:
<!DOCTYPE html>
<html>
<head>
<title>Data Report 123</title>
<script src="//code.jquery.com/jquery-2.1.0.js" type="text/javascript" ></script>
<script src="http://code.highcharts.com/highcharts.js" type="text/javascript" ></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript" >
$('#container').highcharts({
...
});
</script>
</body>
</html>
solution2
1 ACCPTED 2014-11-26 14:50:27
The best would be to do not load loaded files. You can do it by loading Highcharts once in main page and do not load in any of later loaded Highcharts pages.
Second solution is to put charts in separate iframes.
Another way is to load Highcharts library in JavaScript in Highcharts pages while using 'if' to check if it is already loaded.
solution3
1 2014-11-29 19:19:33
您可以在iframe中加载Project.prx。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.