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.

Answer 1

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.