kati: Eventhandling

SELF-Forum

Eventhandling

kati
– Informationen zu den Bewertungsregeln

Hallo zusammen,

erstmal gute Nacht wünsche ich allen die gerade schlafen gehen und guten Morgen allen denen, die gerade aufgestanden sind, um ein paar Javascriptprobleme zu lösen *g*. Allen anderen natürlich auch...:-)
Also ich habe folgendes Problem, das - wie immer - mit Browsern zusammenhängt. Ich erzeuge mit php eine Seite, die diverse html-Elemente enthält - wie z.B. "select". Sobald die Seite beim Client erscheint soll beim Anklicken eines Eintrages in dieser Liste z.B. eine Ausgabe erfolgen - d.h. ich will zusätzlich ein onChange-Ereignis definieren. Das könnte ich natürlich tun, bevor die Seite beim Client einlangt (also innerhalb des php-Scriptes). Ich will die ganzen Events aber nicht in php-Funktionen "hardcodieren", sondern erst beim Client definieren um bessere Übersichtlichkeit zu schaffen. Das klappt auch mit IE. Mit NS habe ich Probleme - das Event wird nicht registriert. Ich versuche mich auf das wesentliche einzuschränken.

1. Möglichkeit - schlechtere, aber es klappt

/*BEACHTET BITTE DIE 4. Zeile - onChange-Event => so klappt es auch mit NS, das will ich aber nicht auf diese Art und Weise lösen*/
/**************Datei mysql.inc - Klasse Table - show_tables******/

function show_tables($conn_handle, $current_db) {
      if($conn_handle) {
         if($ergebnis = mysql_list_tables($current_db)) {
            echo '<select id="tbs" width="100" style="width:300px;" size="5" onChange="t_waehlen()">';
            for ($i = 0; $i < mysql_num_rows($ergebnis); $i++) {
                echo '<option>';
                $ds[$i] = mysql_tablename($ergebnis, $i);
                echo $ds[$i];
                echo '</option>';
            }
            echo '</select>';
            $this->info = array_merge($this->info, array("Tabellen wurden erfolgreich aufgelistet."));
         } else {
            $this->info = array_merge($this->info, array(DB_F . mysql_errno() . ": " . mysql_error()));
         }
      } else {
         $this->info = array_merge($this->info, array(CN_F));
      }
   }

/*************************Datei t_explain.php ***************/
<script language="Javascript" src="functions.js" type="text/javascript"></script>

<table border="0">
<colgroup>
   <col width="300">
   <col width="50">
</colgroup>

<tr>
<td>
<?php
include_once "mysql.inc";

$c = new Connection("localhost", $_SESSION["kennung"], $_SESSION["password"]);
$s = new Status();
$t = new Table();

$t->show_tables($c->get_conn(), $_SESSION['current_db']);
$s->set_st($t->get_info());

if(!session_is_registered("meldung")) session_register("meldung");
$_SESSION["meldung"] = array_merge($_SESSION["meldung"], $s->get_st());

//alle Meldungen in ein Select einlesen
if(is_array($_SESSION["meldung"])) {
   while (list($k, $v) = each($_SESSION["meldung"])) {
      echo "<script language="JavaScript">\n";
      echo "status_zeigen('$v');\n";
      echo "</script>";
   }
}
?>
</td>

<?php
if($c->get_conn() && $_SESSION['current_db'] != "") {
   echo '<form name="t_explain" action="index.php?content=t_explain_sub" method="post">';
   echo '<td valign="bottom">';
   echo '<input type="submit" style="width:110px;" value="Tabellenstruktur">';
   echo '</td>';
   echo '</tr>';
   echo '<tr><td> </td><td> </td></tr>';
   //Die SQL-Anweisung, die generiert wird
   echo '<tr><th colspan="2">Generierte SQL-Anweisung:</th></tr>';
   echo '<tr><th colspan="2">';
   echo '<textarea name="sql" rows="5" cols="100" readonly></textarea>';
   echo '</th>';
   echo '</form>';
}
?>
</tr>
</table>

<script language="Javascript">
function t_waehlen() {
   var t_liste = document.getElementById("tbs");
   if(t_liste) {
      var selIndex = t_liste.options.selectedIndex;
      document.getElementsByName("sql")[0].value = "EXPLAIN " + t_liste.options[selIndex].text;
   }
}
</script>

2. Möglichkeit - bessere, die nicht klappt

/* der Methode in der mysql.inc - Datei ist die gleiche, ausser dass
das onChange-Event fehlt*/

//BITTE die letzten 4-5 Zeilen beachten !
/*************************Datei t_explain.php ***************/
<script language="Javascript" src="functions.js" type="text/javascript"></script>

<table border="0">
<colgroup>
   <col width="300">
   <col width="50">
</colgroup>

<tr>
<td>
<?php
include_once "mysql.inc";

$c = new Connection("localhost", $_SESSION["kennung"], $_SESSION["password"]);
$s = new Status();
$t = new Table();

$t->show_tables($c->get_conn(), $_SESSION['current_db']);
$s->set_st($t->get_info());

if(!session_is_registered("meldung")) session_register("meldung");
$_SESSION["meldung"] = array_merge($_SESSION["meldung"], $s->get_st());

//alle Meldungen in ein Select einlesen
if(is_array($_SESSION["meldung"])) {
   while (list($k, $v) = each($_SESSION["meldung"])) {
      echo "<script language="JavaScript">\n";
      echo "status_zeigen('$v');\n";
      echo "</script>";
   }
}
?>
</td>

<?php
if($c->get_conn() && $_SESSION['current_db'] != "") {
   echo '<form name="t_explain" action="index.php?content=t_explain_sub" method="post">';
   echo '<td valign="bottom">';
   echo '<input type="submit" style="width:110px;" value="Tabellenstruktur">';
   echo '</td>';
   echo '</tr>';
   echo '<tr><td> </td><td> </td></tr>';
   //Die SQL-Anweisung, die generiert wird
   echo '<tr><th colspan="2">Generierte SQL-Anweisung:</th></tr>';
   echo '<tr><th colspan="2">';
   echo '<textarea name="sql" rows="5" cols="100" readonly></textarea>';
   echo '</th>';
   echo '</form>';
}
?>
</tr>
</table>

<script language="Javascript">
//die Methode t_waehlen ist das Event für onchange
//vorgesehen für EXPLAIN, RENAME und DROP
function t_waehlen() {
   var t_liste = document.getElementById("tbs");
   if(t_liste) {
      var selIndex = t_liste.options.selectedIndex;
      document.getElementsByName("sql")[0].value = "EXPLAIN " + t_liste.options[selIndex].text;
   }
}

//das über die php-Methode show_Tables(); geladene Select-Objekt möchte ich
//mit einer Methode für das onChange-Event ausstatten
if(document.getElementById("tbs")) {
    document.getElementById("tbs").attachEvent("onchange", t_waehlen);
}
</script>

Mit attachEvent kann es irgendwie nicht zusammenhängen, weil in schon eine komplexe Maske auf diese Weise programmiert habe, auf welcher dynamische Elemente erzeugt werden, die "dynamisch" auch Botschaftsbehandlungsroutinen angehängt bekommen. Da ich aber zu Javascripten sehr mißtrauisch bin, bin ich schon auf alles gefaßt. Vielen Dank allen, die sich die Mühe gegeben haben, den Code zu lesen.
Für mein 2. Problem öffne ich nen neuen Thread ;-)

LG
Kati

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Eventhandling

    Thorsten Steffen
    – Informationen zu den Bewertungsregeln

    Hi Kati,

    Mit attachEvent kann es irgendwie nicht zusammenhängen, weil in schon eine komplexe Maske auf diese Weise programmiert habe, auf welcher dynamische Elemente erzeugt werden, die "dynamisch" auch Botschaftsbehandlungsroutinen angehängt bekommen. Da ich aber zu Javascripten sehr mißtrauisch bin, bin ich schon auf alles gefaßt. Vielen Dank allen, die sich die Mühe gegeben haben, den Code zu lesen.
    Für mein 2. Problem öffne ich nen neuen Thread ;-)

    wenn ich dich richtig verstehe hast du es etwa so probiert.

    <script language="JavaScript" type="text/javascript">

    function init() {
      // für IE (ab 5.x)
      document.getElementById("Auswahl).attachEvent("onchange",doSomething);
      }
    </script>

    dann kann es sehr wohl an attachEvent liegen, da dies nicht standardkonform ist und soweit ich weiss nur vom IE unterstützt wird.

    nachzulesen unter
    http://www.msdn.microsoft.com/workshop/author/dhtml/reference/methods/attachevent.asp

    <zitat>
    Standards Information

    There is no public standard that applies to this method.
    </zitat>

    Standardkonform wäre die Verwendung von der Funktion addEventListener();
    http://selfhtml.teamone.de/dhtml/modelle/dom.htm#event_handling

    und würde dann wie folgt aussehen ...
    <script language="JavaScript" type="text/javascript">

    function init() {
      document.getElementById("Auswahl").addEventListener("change",doSomething, true);
      }
    </script>

    dies wird aber weder vom NN 4.x noch derzeit vom IE unterstützt.

    Der IE bietet dir die Funktion attachEvent als Alternative, beim NN 4.x funktionierst wie folgt

    <script language="JavaScript" type="text/javascript">

    function init() {
      document.Formular.Auswahl.onchange = handleOnchange;
      }
    </script>

    Diese Lösung funktioniert übrigens auch im IE als auch ab NN 6.x, ist aber net so sauber ;)

    Dein Auszug der für das Problem relevanten Teile aus deinem Quelltext war etwas grosszügig gewählt, oder? ;)
    gruss

    Thorsten

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Eventhandling

      kati
      – Informationen zu den Bewertungsregeln

      Hallo Thorsten,

      ich kenne alle Lösungen, die du mir da vorgestellt hast. Komisch ist nur, dass es mit attachEvent in einer anderen Datei auch bei NS hinhaut ! Egal... addEventListener wird wiederum v. IE nicht kapiert und die 3. (unsauebere Methode) ist überhaupt nicht zuverlässig.
      ok, ich versuche da etwas zusammenzubringen.
      Sorry für den Code, aber wurde mir da schon vorgeworfen, dass ich nicht den ganzen Code gezeigt habe... wollte nur Missverständnisse und Antworten sowie "was soll das wo is der Code .."  verhindern.

      danke.
      gruss
      kati

      Hi Kati,

      Mit attachEvent kann es irgendwie nicht zusammenhängen, weil in schon eine komplexe Maske auf diese Weise programmiert habe, auf welcher dynamische Elemente erzeugt werden, die "dynamisch" auch Botschaftsbehandlungsroutinen angehängt bekommen. Da ich aber zu Javascripten sehr mißtrauisch bin, bin ich schon auf alles gefaßt. Vielen Dank allen, die sich die Mühe gegeben haben, den Code zu lesen.
      Für mein 2. Problem öffne ich nen neuen Thread ;-)

      wenn ich dich richtig verstehe hast du es etwa so probiert.

      <script language="JavaScript" type="text/javascript">

      function init() {
        // für IE (ab 5.x)
        document.getElementById("Auswahl).attachEvent("onchange",doSomething);
        }
      </script>

      dann kann es sehr wohl an attachEvent liegen, da dies nicht standardkonform ist und soweit ich weiss nur vom IE unterstützt wird.

      nachzulesen unter
      http://www.msdn.microsoft.com/workshop/author/dhtml/reference/methods/attachevent.asp

      <zitat>
      Standards Information

      There is no public standard that applies to this method.
      </zitat>

      Standardkonform wäre die Verwendung von der Funktion addEventListener();
      http://selfhtml.teamone.de/dhtml/modelle/dom.htm#event_handling

      und würde dann wie folgt aussehen ...
      <script language="JavaScript" type="text/javascript">

      function init() {
        document.getElementById("Auswahl").addEventListener("change",doSomething, true);
        }
      </script>

      dies wird aber weder vom NN 4.x noch derzeit vom IE unterstützt.

      Der IE bietet dir die Funktion attachEvent als Alternative, beim NN 4.x funktionierst wie folgt

      <script language="JavaScript" type="text/javascript">

      function init() {
        document.Formular.Auswahl.onchange = handleOnchange;
        }
      </script>

      Diese Lösung funktioniert übrigens auch im IE als auch ab NN 6.x, ist aber net so sauber ;)

      Dein Auszug der für das Problem relevanten Teile aus deinem Quelltext war etwas grosszügig gewählt, oder? ;)
      gruss

      Thorsten

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln