problème avec jquery et fonction load()

problème avec jquery et fonction load() - Javascript/Node.js - Programmation

Marsh Posté le 09-10-2014 à 21:41:12    

Salut à tous,
 
Je suis en train de coder une page pour que quand je clique sur un lien, il me change dans un div un graph highcharts.
 
Mon graphe highcharts marche très bien quand je le lance directement dans chrome (page en html symple) mais quand je fais appel à la page il me lance ces erreurs lors du premier clique et le graph ne s'affiche pas :
 

Code :
  1. Uncaught TypeError: undefined is not a function VM350:4
  2. Uncaught ReferenceError: Highcharts is not defined


 
et quand je reclique dessus, il me met ces erreurs mais s'affiche bien :
 

Code :
  1. Uncaught TypeError: undefined is not a function VM350:4
  2. Uncaught ReferenceError: Highcharts is not defined exporting.js?_=1412883457229:23
  3. Uncaught TypeError: undefined is not a function


 
voici mon code d'appel de la fonction load() :
 

Code :
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>Include</title>
  6.  <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  7. <style>
  8. #myDivID{
  9. display: block;
  10. width: 800px;
  11. padding: 100px;
  12. }
  13. </style>
  15.     </head>
  16.     <body>
  18. <div id="bla">links :
  19.  <a href="test2.php?sonde=013A204062A92C&date_debut=2014-10-07&date_fin=2014-10-10&heure_debut=00:00:00&heure_fin=00:00:00&echelle=2" id="myLinkID">1</a>
  20.  <a href="ajaxtest.php?action=no&data=2" id="myLinkID">2</a>
  21. </div>
  23. <div id="myDivID"><!-- load here --></div>
  24. <script>
  25. $("#myLinkID" ).click(function(e)
  26.         {
  27.             var url = $(this).attr("href" ); /* <-- added var url THIS */
  29.             e.preventDefault();
  30.            
  31.             $("#myDivID" ).load(url);
  32.            
  33.             return false;
  34.         });
  35. </script>
  36.     </body>
  37. </html>


 
Auriez vous une idée du problème?
 
Merci par avance.

Reply

Marsh Posté le 09-10-2014 à 21:41:12   

Reply

Marsh Posté le 10-10-2014 à 01:18:47    

Ce code n'est pas celui qui pose problème.
 
Par contre, quel intérêt d'avoir un href, suivit d'un e.preventDefault sur le click ?
Pourquoi ne pas directement enlever le code JS et par exemple ajouter un target="_blank" sur le lien a, qui reviendrais certainement a quelque chose de très proche...

Message cité 1 fois
Reply

Marsh Posté le 10-10-2014 à 21:02:54    

Devil'sTiger a écrit :

Ce code n'est pas celui qui pose problème.
 
Par contre, quel intérêt d'avoir un href, suivit d'un e.preventDefault sur le click ?
Pourquoi ne pas directement enlever le code JS et par exemple ajouter un target="_blank" sur le lien a, qui reviendrais certainement a quelque chose de très proche...


 
Voici le code de mon graph :
 

Code :
  1. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  2. <head>
  3.  
  4. <title></title>  
  5. <meta name="Description" content=""/>
  6. <meta name="Keywords" content=""/>
  8. <meta content="fr" http-equiv="Content-Language"/>
  9. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  11. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  12. <script src="http://code.highcharts.com/highcharts.js"></script>
  13. <script src="http://code.highcharts.com/modules/exporting.js"></script>
  15. <script type="text/javascript">
  17. $(function () {
  18.     $('#temp').highcharts({
  19.         chart: {
  20.             type: 'line'
  21.         },
  22.         title: {
  23.             text: 'Température du 2014-10-07'
  24.         },
  25.         subtitle: {
  26.             text: 'Domotique XBee'
  27.         },
  28.         xAxis: {
  29.             categories:
  30. [ '00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00']        },
  31.         yAxis: {
  32.   min: 0,   
  33.   max: 30,
  34.             title: {
  35.                 text: 'Temperature (°C)',
  36.             }
  37.         },
  38.         plotOptions: {
  39.             line: {
  40.                 dataLabels: {
  41.                     enabled: true
  42.                 },
  43.                 enableMouseTracking: false
  44.             }
  45.         },
  46.         series: [{
  47.             name: 'Humidité',
  48.             data:
  49. [ 19.54, 19.46, 19.37, 19.40, 19.39, 19.33, 19.53, 19.68, 19.84, 19.70, 19.79, 19.68, 19.55, 19.41, 19.30, 19.32, 18.56, 19.01, 20.00, 20.34, 20.74, 20.49, 19.88, 19.58, 19.47, 19.40, 19.34, 19.34, 19.44, 19.52, 19.72, 19.68, 20.03, 20.08, 19.97, 19.61, 19.39, 19.35, 19.54, 19.41, 19.40, 18.82, 19.33, 20.93]}
  50. ]
  51.     });
  52. });
  54. </script>
  55.     </head>
  57. <div id="temp" style="min-width: 310px; height: 600px; margin: 0 auto"></div>
  58. <br />
  60. <!--
  61. <p> <center>
  63. <a href="graph.php?date_debut=09-10-2014&amp;date_fin=09-10-2014">09-10-2014</a>
  64. << 10-10-2014 >>
  65. <a href="graph.php?date_debut=09-10-2014&amp;date_fin=09-10-2014">09-10-2014">11-10-2014</a>
  66. </p></center>
  67.     </body>
  68.     -->
  69. </html>


 
J'ai pas bien compris ton explication sur mon code, désolé je débute un peux en Javascript :(
 
Merci encore de ton aide.

Reply

Marsh Posté le 15-10-2014 à 14:27:51    

Bonjour, je suis sur un projet de ce type et rencontre un soucis lors du chargement de mon graphe via la méthode load : la div s'agrandit (je l'observe puisque j'ai un tableau en dessous qui se décale vers le bas) mais elle reste blanche, le graphe ne s'affiche pas.  
Pour te répondre DevilsTiger, j'utilise également la méthode load car elle prend en paramètre des données d'un tableau qui est sur ma page principale, et elle les transmets en appelant la page où se trouve mon graphe. Le graphe prend alors en compte les paramètres qu'il reçoit et doit normalement s'afficher... Si quelqu'un a une idée je suis donc preneur ;)

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed