✔ Javascript womit debuggen? Onchange tut nicht

M

Mike Rofon

Erfahrenes Mitglied
Basis-JS ist dieses hier:
http://www.tfonfara.de/ajax-formulardaten-nachladen-jquery.xhtml

Die Optionen des SELECT-Tags werden zum Teil per PHP aus einer DB erstellt.
Je nach gewählter Option soll eine Anzahl von Checkboxen aktiviert werden. Die gesamte Liste von Checkboxen kommt aus der im JS verlinkten PHP, welche Checkboxen checked="checked" gesetzt werden sollen, wird ebenfalls in dieser PHP festgestellt, basierend auf der ans Script übergebenen Variablen. Dieses kleine PHP an sich funktioniert, der URL-Aufruf mit Übergabe der Variablen als GET liefert das richtige Ergebnis.
Das Zusammenspiel zwischen allen klappt jedoch nicht. Ich kenne nix zum Debuggen, arbeite mit Notepad++.
Daher stelle ich die Codefragmente hier rein mit der Bitte, daß mir einer sagt was ich falsch mache.

Was ich definitiv mangels Kenntnis fragen muß: ich habe in der Select 4 Optionen. Die Values sind "leer", "0", "3" und "4" (letztere beide aus der DB-Tabelle). Muß ich im JS bei if (val != 0) { ... typesensitiv arbeiten? Wenn ja, wie mach ich das am Sinnvollsten?

Also hier das JS:
Code: 
function onSelectChange(){
    var dropdown = document.getElementById("nptpl");
    var index = dropdown.selectedIndex;
    var val = dropdown.options[index].value;
    
    if (val != 0) {    

        $.ajax({
           type: "GET",
           url: "taskreload.php?tpl="+val,
           data: "data",
           success: function(data){
               $('#taskliste').empty();
               document.getElementById("taskliste").value = data;
           }
         });
                 
    } else {
   
        document.getElementById("taskliste").value = "Keine Tasks vorhanden";
   
    }
    
}
Hier die SELECT-Anweisung im Formular:
HTML: 
<select id="nptpl" name="std_tpl" onchange="onSelectChange();">
    <option value="leer">Bitte Template auswählen</option>
    <option value="0">kein Standard-Template, einfaches Ticket erstellen</option>
    <?php echo $template_option;?> // liefert weitere <optio> Zeilen mit den Values "3" und "4"
</select>
Innerhalb des DIVs "taskliste" sollen die Tabellenzeilen mit den Checkboxen und deren Beschreibungen eingebaut werden:
HTML: 
<table>
<div id="taskliste"></div>
</table>
Muß ich evtl die <table> Tags innerhalb des DIV-Tags schreiben und somit in der Taskreload.php miterstellen lassen?

Ich hoffe, es blickt jemand durch so wie ich das beschrieben habe...
 
Wenn du es in deinem Browser ausführst und nach Seitenaufruf die F12-Taste drückst, öffnet sich die Browser-Konsole. Unter dem Reiter Konsole werden alle Fehlermeldungen geloggt. Was wird dort ausgegeben, wenn du ein Dropdown änderst?
 
Kalito hat gesagt.:
Wenn du es in deinem Browser ausführst und nach Seitenaufruf die F12-Taste drückst, öffnet sich die Browser-Konsole. Unter dem Reiter Konsole werden alle Fehlermeldungen geloggt. Was wird dort ausgegeben, wenn du ein Dropdown änderst?
Zum Vergrößern anklicken....

Uncaught ReferenceError: onSelectChange is not defined at HTMLSelectElement.onchange (index.php?action=neuesproject:57)
onchange @ index.php?action=neuesproject:57

Btw: Browser ist Opera.
 
Zuletzt bearbeitet:
Sempervivum hat gesagt.:
Hast Du die Funktion onSelectChange() irgend wie gekapselt, z. B. im document-ready von jQuery o. ä.?
Zum Vergrößern anklicken....
eigentlich nicht:. Das steht wie folgt im <Head> :
HTML: 
<head>
<meta name="robots" content="noindex" />
<meta charset="utf-8" />
<meta name="keywords" lang="de" content="Projekt-System" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Test</title>
<link rel="stylesheet" href="css.css" />
<script type="text/javascript" src="jquery-3.3.1.min.js" />
<script type="text/javascript">
<!--
function onSelectChange(){
    var dropdown = document.getElementById("nptpl");
    var index = dropdown.selectedIndex;
    var val = dropdown.options[index].value;
   
    if (val != "leer") {    

       
        $.ajax({
           type: "GET",
           url: "taskreload.php?tpl="+val,
           data: "data",
           success: function(data){
               $('#tasktabelle').empty();
               document.getElementById("tasktabelle").value = data;
           }
         });
                 
    } else {
   
        document.getElementById("tasktabelle").value = "Keine Tasks vorhanden";
   
    }
    
}
//-->
</script>
</head>
 
Nachdem ich mich im Umfeld umgesehen habe konnte ich es doch reproduzieren: Da fehlt das schließende </script> beim Einziehen von jQuery:
Code: 
<script type="text/javascript" src="jquery-3.3.1.min.js" />
<script type="text/javascript">
<!--
function onSelectChange(){
 
Sempervivum hat gesagt.:
Nachdem ich mich im Umfeld umgesehen habe konnte ich es doch reproduzieren: Da fehlt das schließende </script> beim Einziehen von jQuery:
Code: 
<script type="text/javascript" src="jquery-3.3.1.min.js" />
<script type="text/javascript">
<!--
function onSelectChange(){
Zum Vergrößern anklicken....
wow, ich hätte nicht gedacht, daß die XML-konforme Schreibweise hier nicht reicht.
Ok, die Fehlermeldung ist jetzt weg, aber es funktioniert trotzdem nicht. Obwohl die taskreload.php separat aufgerufen Daten liefert, kommen die nicht im DIV mit der id "tasktabelle" an.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück