Option + Onclick "Problem"

Loon3y · 22 September 2008

Hallo,

ich stehe vor folgendem Problem:

ich möchte auf der Homepage meines Sportvereines eine Auswahlliste via <select> einfügen. Allerdings möchte ich nicht das die Seite nochmals komplett neu lädt, sondern das sich lediglich der inhalt darunter ändert. Ist dies möglich? wenn ja, wie?

Momentan habe ich dies:

Code:

<div>
                   <p> <select name="select">

                        <option onclick="window.location='spieltag1.php'"> Spieltag 1 </option>
                        <option onclick="window.location='spieltag2.php'"> Spieltag 2 </option>
                        <option onclick="window.location='spieltag3.php'"> Spieltag 3 </option>
                        <option onclick="window.location='spieltag4.php'"> Spieltag 4 </option>
                        <option onclick="window.location='spieltag5.php'"> Spieltag 5 </option>

                    </select>
        </p>

</div>
<div>
            <h2>Spieltag 1</h2>
            <p>text</p>
            <p>text</p>
            <p>text</p>
</div>

Ist dies via JS möglich? oder php mit include? wie stell ich dies an das ich unterhalb dann die jeweiligen dateien includen kann?

Grüße..

crash · 22 September 2008

Code:

<select name="select" onchange="if (!(+this.value)) location = this.value">
    <option value="0">Spieltag wählen</option>
    <option value="spieltag1.php">Spieltag 1</option>
</select>

Nicht vergessen, dass auch ohne JS zugänglich zu machen.

Loon3y · 23 September 2008

crash schrieb:
Code:

<select name="select" onchange="if (!(+this.value)) location = this.value"> <option value="0">Spieltag wählen</option> <option value="spieltag1.php">Spieltag 1</option> </select>

Nicht vergessen, dass auch ohne JS zugänglich zu machen.

und wie stell ich dieses dann in einem <div> oder <p> dar?

newlord · 23 September 2008

Um deine grundlegende Frage zu beantworten: Ja dies ist möglich.

Wie: Du musst AJAX einsetzen wenn du ein neuladen der Seite verhindern willst. Das gleiche was du vorhast, habe ich auf einer meiner Seiten (Website für meine ehemalige Schule) für die Ausgabe der Klausurpläne eingebaut:

Krusenstern - Gesamtschule

Da ich alles JavaScript (auch EventHandler) seit längerer Zeit in externe Dateien auslager unterscheidet sich mein Code etwas von deinem:

Das HTML bleibt sauber und befreit von JavaScript EventHandlern.

Code:

<select name="spieltag" id="spieltag">
    <option value="1">Spieltag 1</option>
    <option value="2">Spieltag 2</option>
    <!-- usw. -->
</select>

<div id="ajax_results">
    <!-- komplett leer lassen, da hier die per AJAX angeforderten Daten reinkommen -->
</div>

Jetzt das javascript (bissl länger da ich wiegesagt nur in externen Dateien arbeite) :

PHP:

/* Wenn die Seite fertig geladen ist, dann die Funktion init(); aufrufen */
window.onload = function() { init(); };

/* Komfortfunktion als Ersatz für document.getElementById(); */
function $(elem) {
    if(document.getElementById(elem)) {
        return document.getElementById(elem);
    }
}

/* Diese Funktion erzeugt ein neues xmlHttpRequest-Objekt welches für AJAX gebraucht wird */
function xmlHttp() {
    var xmlHttp = null;
    // Mozilla, Opera, Safari sowie Internet Explorer 7
    if(typeof XMLHttpRequest != 'undefined') {
        xmlHttp = new XMLHttpRequest();
    }

    if(!xmlHttp) {
    // Internet Explorer 6 und älter
        try {
            xmlHttp  = new ActiveXObject("Msxml2.XMLHTTP");
        } catch(e) {
            try {
                xmlHttp  = new ActiveXObject("Microsoft.XMLHTTP");
            } catch(e) {
                xmlHttp  = null;
            }
        }
    }
    return xmlHttp;
}

/* Initiatorfunktion die geladen wird, wenn die Seite geladen ist */
function init() {
    $('spieltag').onchange = function() {
        ajaxGetData(this.value);
    };
}

/* Funktion um AJAX-Requests abzusetzen */
function ajaxGetData(value) {

    /* xmlHttpRequest-Objekt wird erzeugt */
    var req = xmlHttp();

    /* Nochmal prüfen ob das Objekt existiert */
    if(req) {

        /* Hier wird eine Anfrage an die Datei 'spieltag.php' abgesetzt und es wird die value aus dem Select-Feld per GET übergeben */
        req.open('GET','spieltag.php?tag='+value,true);

        /* Wenn sich der Übertragungstatus ändert (onreadystatechange) dann wird nachfolgender Code ausgeführt */
        req.onreadystatechange = function() {

            /* Wenn der Übertragungsstatus (readyState) 4 erreicht hat (4 == Alles Ok) dann wird nachfolgender Code ausgeführt */
            if(req.readyState == 4) {

                /* In den DIV mit der ID 'ajax_results' wird der Anwortstring aus der Anfrage reingeschrieben */
                $('ajax_results').innerHTML = req.responseText;
            }
        }
    }
}

In der spieltag.php könnte das denn in etwa so aussehen:

PHP:

<?php

    // Datenbankverbindung herstellen, etc.

    $spieltag = htmlspecialchars(mysql_real_escape_string($_GET['tag']));
    $sql = "SELECT * FROM `spieltage` WHERE `spieltag` = {$spieltag};";
    $result = mysql_query($sql);
    if(mysql_num_rows($result) > 0) {
        while($in = mysql_fetch_assoc($result)) {
            // formatierte Ausgabe der Daten des Spieltages
        }
    } else {
        echo 'Es sind noch keine Daten für diesen Spieltag vorhanden.';
    }
?>

Damit hättest du das erreicht, was du erreichen wolltest. Ein Neuladen der Seite wird verhindert und du kommst trotzdem an deine Daten ran. Außerdem sparrst du dir so das einrichten vieler PHP Dateien (für jeden Spieltag eine) da du nun eine zentrale PHP Datei hast, die die Spieltagsdaten anhand des übergebenen Tages aus ner Datenbank abfragt.

Ich hoffe ich habs verständlich genug erklären können

Gruß

NewLord

Loon3y · 23 September 2008

Hallo.

vielen dank für deine ausführliche antwort. Allerdings stellen sich mir noch ein paar Fragen :) ich hoffe du findest noch ein bisschen Zeit, diese zu beantworten.

Zuerst würde es mich interessieren wie ich das mit dem Textlichen mache. ICh habe 20 Spieltage, wo schreib ich die alle hin? und wie? HAbe ich nun 3 Dateien? die datei wos angezeigt wird, die javascript-datei und die datei für den spieltag welche eingefügt wird?

der letzte php-code ist ja für einen spieltag, aber wohin kommt dieser php code und wie definiere ich das das eingetrage spieltag x ist?

Und die zweite Frage ist, wie ich es mache, dass ich schon direkt den aktuellen Spieltag anzeigen lassen kann. Z.B. wir haben jetzt die Woche 50 da ist Spieltag 12. Dann möchte ich wenn wir in der Woche 50 sind, dass auch der Spieltag 12 angezeigt wird von anfang an. Kann man das irgendwie festlegen das ich dann nurnoch wöchentlich eine fortlaufende Zahl ändern muss?!

Edit: der JS-Code wird in eine externe datei mit der endung .js gespeichert, oder muss ich, aufgrund der nutzung von ajax was anderes schreiben?

Vielen Dank schoneinmal

grüße
Loon3y

newlord · 23 September 2008

Du brauchst nicht für jeden Tag eine eigene PHP Datei. Ich habe jetzt angenommen, dass du dich schon mit PHP auskennst und demzufolge auch schon mit Datenbanken Erfahrungen gesammelt hast. Das mit dem Option regelt sich von selbst. Sowie du eine anderen Option ausgewählst, werden im Hintergrund die Daten geladen, so wie ich dir das in meinem Posting geschrieben habe.

Die zweite Frage wäre schon etwas kniffliger. Du müsstest in der init(); Funktion die Funktion ajaxGetData(); mit leerem Parameter aufrufen. Würde denn in etwa so aussehen:

PHP:

function init() {
    // Funktionsaufruf mit leerem Parameter
    ajaxGetData('');

    // Wenn sich im select was ändert (onchange) dann die Funktion mit ausgewähltem Spieltag aufrufen
    $('spieltag').onchange = function() {
         ajaxGetData(this.value); 
    }
}

Da nun beim die spieltage.php beim ersten Aufruf einen leeren Spieltag bekommt, kann man nun folgendes sagen:

PHP:

<?php

    // Datenbankverbindung herstellen, etc.
    
    // Wenn explizit kein Spieltag übergeben wird, dann wird nachgeschaut welcher Spieltag in welcher Kalenderwoche liegt
    if(!empty($_GET['tag'])) {
        $spieltag = htmlspecialchars(mysql_real_escape_string($_GET['tag']));
        $sql = "SELECT * FROM `spieltage` WHERE `spieltag` = {$spieltag};";
    } else {
        $woche = date('W'); // Ergibt denn zb. 42 (42 Woche des Jahres)
        $sql = "SELET * FORM `spieltage` WHERE `woche` = {$woche};";
    }

    $result = mysql_query($sql);
    if(mysql_num_rows($result) > 0) {
        while($in = mysql_fetch_assoc($result)) {
            // formatierte Ausgabe der Daten des Spieltages
        }
    } else {
        echo 'Es sind noch keine Daten für diesen Spieltag vorhanden';
    }

?>

Und zu deiner 3.Frage: Ja - eine externe JavaScript datei muss auf .js enden und im Head wird diese so eingebunden:

Code:

<head>
    <title>Dein Seitentitel</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    [B]<script type="text/javascript" src="script/javascript.js"></script>[/B]
</head>

Gruß

NewLord

Loon3y · 23 September 2008

ICh bin leider völliger Neuling wenn es um PHP geht, endschuldige. Ich hoffe es macht dir nichts aus soviel zeit an mich zu "verschwenden".

so ich habe nun folgendes...

index.php (die spieltage sollen in index angezegit werden)

Code:

<div class="section">
            <select name="spieltag" id="spieltag">
                <option value="1">Spieltag 1</option>
                <option value="2">Spieltag 2</option>
            
            </select>

                <div id="ajax_results">
                    <!-- komplett leer lassen, da hier die per AJAX angeforderten Daten reinkommen -->
                </div>    
</div>

spielbetrieb.js

PHP:

/* Wenn die Seite fertig geladen ist, dann die Funktion init(); aufrufen */
window.onload = function() { init(); {
    // Funktionsaufruf mit leerem Parameter
    ajaxGetData('');

    // Wenn sich im select was ändert (onchange) dann die Funktion mit ausgewähltem Spieltag aufrufen
    $('spieltag').onchange = function() {
         ajaxGetData(this.value);
    }
} 

/* Komfortfunktion als Ersatz für document.getElementById(); */
function $(elem) {
    if(document.getElementById(elem)) {
        return document.getElementById(elem);
    }
}

/* Diese Funktion erzeugt ein neues xmlHttpRequest-Objekt welches für AJAX gebraucht wird */
function xmlHttp() {
    var xmlHttp = null;
    // Mozilla, Opera, Safari sowie Internet Explorer 7
    if(typeof XMLHttpRequest != 'undefined') {
        xmlHttp = new XMLHttpRequest();
    }

    if(!xmlHttp) {
    // Internet Explorer 6 und älter
        try {
            xmlHttp  = new ActiveXObject("Msxml2.XMLHTTP");
        } catch(e) {
            try {
                xmlHttp  = new ActiveXObject("Microsoft.XMLHTTP");
            } catch(e) {
                xmlHttp  = null;
            }
        }
    }
    return xmlHttp;
}

/* Initiatorfunktion die geladen wird, wenn die Seite geladen ist */
function init() {
    $('spieltag').onchange = function() {
        ajaxGetData(this.value);
    };
}

/* Funktion um AJAX-Requests abzusetzen */
function ajaxGetData(value) {

    /* xmlHttpRequest-Objekt wird erzeugt */
    var req = xmlHttp();

    /* Nochmal prüfen ob das Objekt existiert */
    if(req) {

        /* Hier wird eine Anfrage an die Datei 'spieltag.php' abgesetzt und es wird die value aus dem Select-Feld per GET übergeben */
        req.open('GET','spieltag.php?tag='+value,true);

        /* Wenn sich der Übertragungstatus ändert (onreadystatechange) dann wird nachfolgender Code ausgeführt */
        req.onreadystatechange = function() {

            /* Wenn der Übertragungsstatus (readyState) 4 erreicht hat (4 == Alles Ok) dann wird nachfolgender Code ausgeführt */
            if(req.readyState == 4) {

                /* In den DIV mit der ID 'ajax_results' wird der Anwortstring aus der Anfrage reingeschrieben */
                $('ajax_results').innerHTML = req.responseText;
            }
        }
    }
}

und spieltag1.php

PHP:

   <?php

    // Datenbankverbindung herstellen, etc.
    
    // Wenn explizit kein Spieltag übergeben wird, dann wird nachgeschaut welcher Spieltag in welcher Kalenderwoche liegt
    if(!empty($_GET['tag'])) {
        $spieltag = htmlspecialchars(mysql_real_escape_string($_GET['tag']));
        $sql = "SELECT * FROM `spieltage` WHERE `spieltag` = {$spieltag};";
    } else {
        $woche = date('W'); // Ergibt denn zb. 42 (42 Woche des Jahres)
        $sql = "SELET * FORM `spieltage` WHERE `woche` = {$woche};";
    }

    $result = mysql_query($sql);
    if(mysql_num_rows($result) > 0) {
        while($in = mysql_fetch_assoc($result)) {
           
 <h2>Spieltag 1:</h2>
        <p>1. Mannschaft spielt um xx Uhr gegen XYZ in ABC</p>
        <p>2. Mannschaft spielt um xx Uhr gegen XYZ in ABC</p>
        }
    } else {
        echo 'Es sind noch keine Daten für diesen Spieltag vorhanden';
    }

?>

Die .js-datei ist klar wie sie eingefügt wird. Aber passt dies nun alles so? Wie muss ich die darauffolgenden datei benennen? spieltag2.php , spieltag3.php , ...... ?

Wäre es nciht einfacher, statt eine Abfrage welche woche ist, einfach manuell wöchentlich eine fortlaufende zahl einzutragen? so von spieltag 1 - 20, wenn der 12.te spieltag aktuell ist trägt man 12 ein und es wird der 12te anfänglich angezeigt.

newlord · 23 September 2008

Ich denke doch das es alles so passen sollte. Ich habe den Code nicht getestet und da du in PHP neu bist, würde ich dir nicht empfehlen den Code zu verwenden sondern damit zu warten bis du die Logik dahinter verstehst. Wer schon weiter fortgeschritten ist, der weiß was an den entsprechenden Stellen noch zu machen ist und ich sage dir:

Mit einer Datenbank dahinter brauchst keine 30 Dateien mit den jeweiligen Spieltagsdaten. Es reicht bei der Verwendung einer Datenbank jeweils eine Datei die die entsprechenden Parameter entgegen nimmt, anhand der Parameter aus der Datenbank die aktuellen Spieltagsdaten rauszieht, entsprechend das HTML mit den Daten aufbereitet und zurückgibt.

Loon3y schrieb:
einfach manuell

Du wirst, je mehr du deine Kenntnisse erweiterst feststellen, das manuelle Arbeit der letzte Dreck ist, gerade bei solchen Angelegenheiten wie du sie vorhast.

Stell dir mal vor, du müsstest 30 oder mehr HTML-Dateien pflegen welche alle den selben Aufbau haben und dein Gegenüber sitzt an nem kleinen HTML-Formular mit Datenbankanbindung und donnert die Daten binnen 20 Minuten in eine Datenbank rein und du hast gerade erst mal 3 Dateien bearbeitet. Ich mach dir ein Angebot: Weil ich heute nen guten Tag habe, schreib mich mal per PN an und ich mach dir das Ding von oben bis unten fertig. ;-)

Gruß

NewLord

crash · 23 September 2008

Und was ist jetzt, wenn ich sage, dass AJAX für soetwas gar nicht gedacht ist? AJAX sollte hier nur unterstützend wirken, damit das ganze zugänglich bleibt!

newlord · 23 September 2008

Und was wenn ich dir sage, dass die Anforderung ist, dass die Seite nicht neu geladen werden soll? Der Kunde ist König wie du sicherlich weißt. Jedem seine Auffassung zu Nutzen und Einsatz bestimmter Techniken. Ich habe keine Lust mich jetzt über das Thema JavaScript / AJAX hin oder her zu streiten. Mir ist das Problem der Zugänglichkeit bekannt aber auch mit deinem Code würde Google als Suchmaschine oder auch Screenreader die Spielpläne nicht zu gesicht bekommen, da auch du JavaScript verwendest.

Andernfalls hätte man ein komplettes Formular mit Absenden Button daraus machen müssen um vollständige Zugänglichkeit zu garantieren.

Option + Onclick "Problem"

Loon3y

Neues Mitglied

crash

Neues Mitglied

Loon3y

Neues Mitglied

newlord

Mitglied

Loon3y

Neues Mitglied

newlord

Mitglied

Loon3y

Neues Mitglied

newlord

Mitglied

crash

Neues Mitglied

newlord

Mitglied

Neueste Beiträge