[xhtml]Eine in .js Datei ausgelagerte Funktion Benutzen.


Padawan

Erfahrenes Mitglied
Hallo Leute,

ich benutze Highcharts, um Graphen zichnen zu lassen. Die JavaScript Funktion, in der ich den Graph zeichne, habe ich in eine .js datei gepackt und die externe Datei folgendermaßen eingebunden:
HTML:
<script type="text/javascript" src="javaScript/chartDrawer.js"></script>

Auf drücken des folgenden Buttons:
CSS:
<input type="submit" name="action" onclick='InitHighChart()' value="Darstellen" />

Soll der Graph auf folgenden div-Block gezeichnetwerden:
Code:
<div id="chart"></div>

Der javaScript-Code sieht folgendermaßen aus:
Javascript:
function InitHighChart()
{
  
    var checkbox_value = "";
       $(":checkbox").each(function () {
           var ischecked = $(this).is(":checked");
           if (ischecked) {
               checkbox_value += "ch"+$(this).val()+"=true" + "&";
           }else{
             checkbox_value += "ch"+$(this).val()+"=false" + "&";
           }
       });
      
  
   $("#chart").html("Wait, Loading graph...");
  
   var options = {
      chart: {
         renderTo: 'chart',
      },
      credits: {
         enabled: false
      },
      title: {
         text: 'Timestmp Overview',
         x: -20
      },
      xAxis: {
         categories: [{}]
      },
      tooltip: {
            formatter: function() {
                var s = '<b>'+ this.x +'</b>';
               
                $.each(this.points, function(i, point) {
                    s += '<br/>'+point.series.name+': '+point.y;
                });
               
                return s;
            },
            shared: true
        },
      series: [{},{},{},{}]
   };
  
   $.ajax({
      url: "../php/getgraph.php",
      data: checkbox_value,
      type:'post',
      dataType: "json",
      success: function(data){
         options.xAxis.categories = data.categories;
         options.series[0].name = 'Kanal 1';
         options.series[0].data = data.ch1;
         options.series[1].name = 'Kanal 2';
         options.series[1].data = data.ch2;
         options.series[2].name = 'Kanal 3';
         options.series[2].data = data.ch3;
         options.series[3].name = 'Kanal 4';
         options.series[3].data = data.ch4;
         var chart = new Highcharts.Chart(options);        
      }
   });
  
}

Mein Problem ist, dass der Graph nicht meht nicht mehr zeichnet. Als es in der HTML Datei eingebettet war, hat es geklappt.
Die Url in der Funktion(?)
Javascript:
$.ajax
habe ich auch entsprechend geändert, da die js und PHP Dateien eine Ebene unter der HTML Datei befindet.

Ich hoffe ihr könnt mir helfen.

Lg
Padawan
 

SpiceLab

ZENmechanic
Javascript:
$.ajax({
    url: "../php/getgraph.php",
    ...
});

Die Url in der Funktion(?)
Javascript:
$.ajax
habe ich auch entsprechend geändert, da die js und PHP Dateien eine Ebene unter der HTML Datei befindet.
Der enthaltene URL in der *.js-Datei wird weiterhin aus der Sicht des HTML-Dokuments gesetzt, von wo aus das Script tatsächlich ausgeführt wird :)
Javascript:
$.ajax({
    url: "php/getgraph.php",
    ...
});
[edit]Tipp-Ex[/edit]
 
Zuletzt bearbeitet:

Padawan

Erfahrenes Mitglied
habs zwar auf
Javascript:
$.ajax({
    url: "php/getgraph.php",
    ...
    }
});
geändert, dennoch kommt folgendes herraus:
Code:
Wait, Loading graph...
 

SpiceLab

ZENmechanic
habs zwar auf
Javascript:
$.ajax({
    url: "php/getgraph.php",
    ...
    }
});
geändert, dennoch kommt folgendes herraus:
Code:
Wait, Loading graph...
Die korrekte Verzeichnisstruktur vorausgesetzt, kann es am Pfad nicht mehr liegen.

"..." hast du aber nicht ins Script mitkopiert? :D

Ansonsten mal den Browsercache leeren und die Seite neu laden.
 

Padawan

Erfahrenes Mitglied
hab den "..." mitkopiert, bei mir steht der drin. Cache hatte ich auch geleert.
Kanns mir halt nicht wirklich erklären.
Ich weiss nicht, in wie weit es hilft, die "(Ordner)Struktur" sieht folgendermaßen aus.

./index.html
|
+/php/+-getgraph.php
|
+-javaScript/chartDrawer.js
 

SpiceLab

ZENmechanic
Zuletzt bearbeitet:

Padawan

Erfahrenes Mitglied
ich habs mit "..." und ohne probiert. Den Cache geleert und dennoch klapts nicht.
Die ganze Webseite liegt im Ordner "Visualisierung". In diesem Ordner sind dann der index.html und die Ordner php und javaScript. Der im php Ordner liegende php script liefert die Daten. Die JavaSript Datai liegt im ordner javaScript. Kanns daran liegen, dass es kein absoluter pfad angegeben wurde oder am ordnerstruktur an sich?

lg padawan
 

Jan-Frederik Stieler

Monsterator
Moderator
Hi,
schau doch mal in der Konsole/Developer Tools nach was du für eine Fehlermeldung bekommst bzw. was mit deinem Post übergeben wird.
Ansonsten sind Dateien immer relativ anzugeben und nicht absolut. Das macht man nur mal so zum testen ob es am falschen relativen Pfad liegt.
Auch ist es egal was du für eine Ordnerstruktur du hast, solange die relativen Pfade dieser angepasst sind.
 

SpiceLab

ZENmechanic
ich habs mit "..." und ohne probiert.
Mit "..." war ja mal sowas von sinnfrei :D

Die funktionstüchtige "Vollversion" der .ajax()-Methode lautet noch immer:
Javascript:
   $.ajax({
      url: "php/getgraph.php",
      data: checkbox_value,
      type:'post',
      dataType: "json",
      success: function(data){
         options.xAxis.categories = data.categories;
         options.series[0].name = 'Kanal 1';
         options.series[0].data = data.ch1;
         options.series[1].name = 'Kanal 2';
         options.series[1].data = data.ch2;
         options.series[2].name = 'Kanal 3';
         options.series[2].data = data.ch3;
         options.series[3].name = 'Kanal 4';
         options.series[3].data = data.ch4;
         var chart = new Highcharts.Chart(options);    
      }
   });
Als es in der HTML Datei eingebettet war, hat es geklappt.
Kann es sein, dass im Zuge der Script-Auslagerung die benötigte jQuery-Bibliothek aus dem HTML-Quellcode verschwunden ist?

Ansonsten, ist die Seite online verfügbar, um darauf einen Blick werfen zu können?
[edit]Tipp-Ex[/edit]
 
Zuletzt bearbeitet:

Padawan

Erfahrenes Mitglied
Hi,

ich habe den JavaScript-Code in die .html-Code wieder eingelagert. jetzt funktionert es auch in der HTML-Datei nicht.

Die PHP-Datei, die die Daten an den javaScript-Code sendet, ist der folgende Code:

PHP:
<?php

$categories = array('11:40', '12:41', '13:42', '14:43', '15:44', '16:45', '17:46', '18:47', '19:48', '20:49', '21:50', '22:51');
$graph_data['categories']= $categories;

if  ($_POST['ch1'] == "true") {
  
    $ch1 = array(23.87, 25.23, 100.23, 58.43, 63.23, 30.43, 5.23, 40.34, 91.43, 10.34, 50.23, 36.43);
    $graph_data['ch1']= $ch1;
}

if  ($_POST['ch2']== "true") {
  
    $ch2 = array( 25.23, 100.23, 58.43, 63.23, 30.43, 5.23, 40.34, 91.43, 10.34, 50.23, 36.43 ,34.56);
    $graph_data['ch2']= $ch2;
}

if  ($_POST['ch3']== "true") {

        $ch3 = array( 100.23, 58.43, 63.23, 30.43, 5.23, 40.34, 91.43, 10.34, 50.23, 36.43,34.23,23.23);
    $graph_data['ch3']= $ch3;

}
if  ($_POST['ch4']== "true") {
    $ch4 = array(58.43, 63.23, 30.43, 5.23, 40.34, 91.43, 10.34, 50.23, 36.43,23.90,23.04,23);
    $graph_data['ch4']= $ch4;
}

echo json_encode($graph_data);
exit;
?>


im html-Datei befindet sich im body-Tag, ein div-Container, das den Folgenden Code beinhaltet:
HTML:
<!--<form method="post">-->
         <fieldset> <!-- Zeit Auswählen -->
            <legend>Art der Verbrauchsdatendarstellung:</legend>
            <input type="radio" id="zeitraum" name="art" value="VerbrauchsZeitraum">
            <label for="mc">Für einen bestimmten Zeitraum</label><br>
           
            <input type="radio" id="aktuell" name="art" value="aktuellerVerbrauch">
            <label for="vi"> aktuellen Verbrauch Anzeigen</label><br>
         </fieldset>
        
         <fieldset>  <!-- Kanal Auswählen -->
            <legend>Verbrauchskanal auswählen:</legend>
           
            <input name="zaeler" type="checkbox" value="A" id="ch1" />                   
            <label for="KanalA">Kanal 1</label><br />
           
            <input name="zaeler" type="checkbox" value="B" id="ch2" />             
            <label for="KanalB">Kanal 2</label><br />
           
            <input name="zaeler" type="checkbox" value="C" id="ch3" />
            <label for="KanalC">Kanal 3</label><br />
           
            <input name="zaeler" type="checkbox" value="D" id="ch4" />
            <label for="KanalD">Kanal 4</label><br />
           
         </fieldset>   
        
         <fieldset>
            <legend>Zeitraum</legend>
           
            <label for="beginDatum">Begin</label><br />
            <input type="text" name="zeitraumBegin" id="beginDatum" />
           
            <label for="lastname">Ende</label><br />
            <input type="text" name="zeitraumEnde" id="endDatum" />
         </fieldset>
        
               <p>
            <input type="submit" name="action" onclick='InitHighChart()' value="Register" />
            <input type="reset" value="Reset Form" />
            <input type="hidden" name="session" value="A398DF991" />
         </p>
         <div id="chart"></div>

Jenachdem, Welcher Checkbox gewählt wurde, sollen die entsprechende Daten an den JavaScript Code gesendet werden. Was jeoch nicht klapt.
Es wird ständig
Code:
Wait, Loading graph...
ausgegeben.

ich hoffe ihr könnt mir weiter helfen.

Viele Grüße
Dogan
 

SpiceLab

ZENmechanic
ich habe den JavaScript-Code in die .html-Code wieder eingelagert. jetzt funktionert es auch in der HTML-Datei nicht.

[...]

ich hoffe ihr könnt mir weiter helfen.
Du hilfst uns enorm weiter, wenn du konkrete (Rück)Fragen auch beantwortest.
Kann es sein, dass im Zuge der Script-Auslagerung die benötigte jQuery-Bibliothek aus dem HTML-Quellcode verschwunden ist?

Ansonsten, ist die Seite online verfügbar, um darauf einen Blick werfen zu können?
Ich kann mich durchaus täuschen/irren, aber ich habe nunmal die begründete Vermutung, dass besagter Aufruf der erforderlichen jQuery-Bibliothek im Quellcode der HTML-Seite verloren gegangen, und dir das bislang noch nicht aufgefallen ist.

Dass es nun auch nicht mehr mit der Ur-Fassung funktioniert, ist nur ein weiteres Indiz für diese These.
[edit]Tipp-Ex[/edit]
 
Zuletzt bearbeitet:

Padawan

Erfahrenes Mitglied
Hi,

alle benötigten bibliotheken sind drin.
Auf der konsolo wird auch keine Fehlermeldung ausgegeben. Unter Netzwerkanalyse habe ich bemerkt, dass nur folgende zeile ausgegeben wird:

Als Antwort wird folgendes ausgegeben (bei der PHP Seite):
Code:
<br />
<b>Notice</b>:  Undefined index: ch1 in <b>D:\xampp\htdocs\Visualisierung\php\getgraph.php</b> on line <b>5</b><br />
<br />
<b>Notice</b>:  Undefined index: ch2 in <b>D:\xampp\htdocs\Visualisierung\php\getgraph.php</b> on line <b>11</b><br />
<br />
<b>Notice</b>:  Undefined index: ch3 in <b>D:\xampp\htdocs\Visualisierung\php\getgraph.php</b> on line <b>17</b><br />
<br />
<b>Notice</b>:  Undefined index: ch4 in <b>D:\xampp\htdocs\Visualisierung\php\getgraph.php</b> on line <b>23</b><br />
{"categories":["10:40","10:41","10:42","10:43","10:44","10:45","10:46","10:47","10:48","10:49","10:50","10:51"]}

In der konsole wird folgendes ausgegeben:
upload_2015-8-25_13-34-32.png

lg
padawan
 

Neue Beiträge

Forum-Statistiken

Themen
272.361
Beiträge
1.558.639
Mitglieder
187.834
Neuestes Mitglied
jordanx0206