Caricamento multipli Highcharts con jquery.load

Ho una pagina master, che chiama in altre pagine web utilizzando jquery.load, ad esempioCaricamento multipli Highcharts con jquery.load

$("#loading").show(); 
$("#arena").load('Project.prx?PID=' + dataReport); 
$("#loading").hide();

(Project.prx è in un linguaggio CGI in-house come ColdFusion, ed è pompare fuori HTML e JavaScript.)

Nel debugger del browser vengono visualizzati messaggi di errore simile al seguente ogni volta che clicco su un link, cioè

Uncaught Highcharts error #16: www.highcharts.com/errors/16

Highcharts websit e dice di questo errore:

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.

Come sto usando carico di jQuery() e mira un div nel documento corrente, si tratta di una chiamata equo per Highcharts affermare che sto caricamento di una seconda istanza del namespace. Tuttavia, questo è quello che voglio fare.

Quindi qualche idea su come caricare altre pagine Highcharts in una con un'istanza esistente dello spazio dei nomi Highcharts?

DOPO

Ho avuto un certo successo con non mettere Highcharts nel controller e solo negli obiettivi e il rilascio

$("#loading").show(); 
$("#arena").empty(); 
delete(Highcharts); 
$("#arena").load('Project.prx?PID=' + dataReport); 
$("#loading").hide();

Tuttavia, questo non ha avuto successo in ogni caso.

fonte

2014-11-21 bugmagnet

Il problema non è che si stiano caricando due grafici, ma due codici grafici ad alta risoluzione ... Quello che farei è rimuovere il tag script da Project.prx per evitarlo. Se è necessario visualizzare Project.prx su una pagina da solo, quindi aggiungere il tag dello script solo se la richiesta non è una chiamata AJAX ... – Salketer

La cosa migliore sarebbe non caricare i file caricati. Puoi farlo caricando Highcharts una volta nella pagina principale e non caricare in nessuna delle pagine Highcharts caricate successivamente.

La seconda soluzione consiste nel mettere i grafici in iframe separati.

Un altro modo è caricare la libreria Highcharts in JavaScript nelle pagine Highcharts mentre si utilizza 'if' per verificare se è già stata caricata.

fonte

2014-11-26 14:50:27

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.

Non credo che in realtà è ciò che si vuole fare. Non c'è mai un motivo per caricare la libreria highcharts due volte. Devi semplicemente caricare due grafici sulla stessa pagina.

La soluzione più semplice:

Rimuovere <script src="http://code.highcharts.com/highcharts.js"></script> (o comunque si carica questo file) dalla stampa del file prx. Non c'è bisogno di chiamare il numero delete(Highcharts); Non credo che quella linea faccia qualcosa in questo caso.

La soluzione un po 'più robusta:

Se avete bisogno di essere in grado di accedere Project.prx?id=123 direttamente tramite il browser (forse per la prova), avrete bisogno di concludere che la produzione in HTML completo a seconda di come è chiamato.

I browser moderni includono l'intestazione X-Requested-With: XMLHttpRequest che è possibile verificare nel codice del server e fornire di conseguenza la tabella avvolta o riavvolta; tuttavia, questo metodo non è davvero affidabile. Una soluzione più affidabile sarebbe specificare come si desidera nella stringa di query. Per esempio, si potrebbe fare in modo che Project.prx id = 123 vi darà:??

<div id="container"></div> 
<script type="text/javascript" > 
    $('#container').highcharts({ 
     ... 
    }); 
</script>

ma Project.prx id = 123 & v = test vi darà:

<!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>

fonte

2014-11-24 02:25:42

È possibile caricare Project.prx in un iframe.

fonte

2014-11-29 19:19:33 thunder

risposta

Problemi correlati