Steiner: Client x/y - und weitere Variabeln.

SELF-Forum

Client x/y - und weitere Variabeln.

Steiner
– Informationen zu den Bewertungsregeln

Nabend,

ich habe auf den SelfHTML Seiten immerhin schon ein Script gefunden was ich suchte, nur bei der Erweiterung des Scriptdes gibt es leider Probleme. Konnte keinen passenden beitrag finden der dieses Problem beschreibt.

DAS SCRIPT:

function Show_K (Ereignis) {
  if (!Ereignis)
    Ereignis = window.event;
  if (document.getElementById) {
    document.getElementById("ads").style.visibility="visible"
    document.getElementById("ads").style.left  = Ereignis.clientX + "px";
    document.getElementById("ads").style.top = Ereignis.clientY + "px";
  } else if (document.all) {
    document.all.ads.style.visibility="visible"
    document.all.ads.style.left = Ereignis.clientX;
    document.all.ads.style.top = Ereignis.clientY;
  }
}

Es soll wie im SelfHTML Beispiel ein layer an der aktuellen mausposition angezeigt werden. Funktioniert soweit auch klasse !

Allerdings soll der Layer bei mir erst angezegt werden wenn auf einen "Link" geklickt wurde..
<span onClick="JavaScript: Show_K()">

Funktioniert auch !

ABER... Und jetzt kommts . Wenn ich der Funktion Show_K() noch einige Informationen mitgeben möchte, z.B. irgendeine UserID dann gibts Fehler.

Endweder wird der Layer garnicht angezeigt oder WENN ES GEHT an einer anderen Stelle, und zwar immer dort.

Mache ich z.B. soeinen span
onClick="JavaScript: Show_K(js_var)"

Dann erscheint der Layer zwar, jedoch nicht an der mausposition.
Und die Js fehlermeldung ungültiges Argument erscheint.

Nun ist mir auch klar das in der function auf Ereignis zugegriffen wird..Und da das meine Mausposition sein soll.. Gibt es fehler wenn stattdessen eine UserID drinne steht..

Habe auch schon ausprobiert dem span einen platzhalter mitzugeben sodass "js_var" erst als 2.tes Argument genommen wird..

Habe nun ziemlich viel herumprobiert, leider kein Erfolg gehabt. Daher hoffe ich jemand kann mir helfen.
Oder auch sagen "Junge wenn man client x/y benutzt darf da kein anderer wert hinter; das irritiert das script..!"

Gruß Steiner

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Client x/y - und weitere Variabeln.

    Axel Richter
    +2 Informationen zu den Bewertungsregeln

    Hallo,

    ich habe auf den SelfHTML Seiten immerhin schon ein Script gefunden was ich suchte, nur bei der Erweiterung des Scriptdes gibt es leider Probleme. Konnte keinen passenden beitrag finden der dieses Problem beschreibt.

    DAS SCRIPT:

    function Show_K (Ereignis) {
      if (!Ereignis)
        Ereignis = window.event;
      if (document.getElementById) {
        document.getElementById("ads").style.visibility="visible"
        document.getElementById("ads").style.left  = Ereignis.clientX + "px";
        document.getElementById("ads").style.top = Ereignis.clientY + "px";
      } else if (document.all) {
        document.all.ads.style.visibility="visible"
        document.all.ads.style.left = Ereignis.clientX;
        document.all.ads.style.top = Ereignis.clientY;
      }
    }

    Es soll wie im SelfHTML Beispiel ein layer an der aktuellen mausposition angezeigt werden. Funktioniert soweit auch klasse !

    Bis hierher könnte es das, ja.

    Allerdings soll der Layer bei mir erst angezegt werden wenn auf einen "Link" geklickt wurde..
    <span onClick="JavaScript: Show_K()">
    Funktioniert auch !

    Nein, bzw. nur in einem Browser. Dur rufst Show_K() ja _immer_ ohne Argumente auf. Für das DOM-Eventhandling wird aber das Event als Parameter erwartet.

    Mal davon abgesehen, ist der Label "JavaScript:" dort unsinnig.

    Damit das in allen Browsern funktioniert, muss dem Eventhandler onclick des SPAN-Elements die Funktionsreferenz Show_K übergeben werden. Das passiert etwa so:

    Im zentralen SCRIPT-Bereich, wo auch Show_K definiert wird:
    ...
    function init() {
      if (document.getElementById) {
        document.getElementById("mySpan").onclick = Show_K;
      }
    }
    ...

    und im HTML:
    ...
    <body onload="init()">
    ...
    <span id="mySpan">
    ...

    Damit wird bei BODY.onload Deinem SPAN für onclick eine Referenz auf die Funktion Show_K zugewiesen. Das ist unabhängig von der Anzahl der Argumente der Funktion.

    Die entsprechende Funktionalität für document.all darfst Du bitte selbst ergänzen, wenn Du solch alte Browser noch unterstützen möchtest.

    ABER... Und jetzt kommts . Wenn ich der Funktion Show_K() noch einige Informationen mitgeben möchte, z.B. irgendeine UserID dann gibts Fehler.

    Ja, dann muss die Funktion ja mehr als ein Argument erwarten. Bisher erwartet sie _ein_ Argument "Ereignis". Sie muss also nun mehrere Argumente erwarten:

    function Show_K (Ereignis, nochwas) {
    ...

    Das Problem wird nun der Aufruf bei onclick. Hier darf nun nicht mehr eine einfache Referenz übergeben werden, sondern es muss eine anonyme Funktion übergeben werden, die _ein_ Argument, nämlich das Event erwartet und dann ihrerseits wieder Show_K mit diesem Argument und dem weiteren Argument aufruft:

    function init() {
      if (document.getElementById) {
        document.getElementById("mySpan").onclick = function(e) {Show_K(e, "Test");};
      }
    }

    Bei Klick auf das SPAN würde nun bei Show_K das e oder beim IE undefined in Ereignis und "Test" in nochwas stehen.

    viele Grüße

    Axel

    Beitrag melden
    +2
    Informationen zu den Bewertungsregeln

    1. Client x/y - und weitere Variabeln.

      Steiner
      – Informationen zu den Bewertungsregeln

      Hallo Axel,

      vielen Dank für Deine Hilfe bisher !!!

      "
      Mal davon abgesehen, ist der Label "JavaScript:" dort unsinnig.
      "

      Okay.. Wusste ich nicht.

      Document.all ist in diesem Fall nicht erforderlich.

      Ich habe nun erstmal eine Testseite erstellt. Das funktioniert soweit mit Deiner Hilfe ! Super..

      Eine Sache allerdings die leider etwas untergegangen ist..

      Die ganze Sache soll so aussehen:

      Eine Tablle z.B. mit Benutzern

      Name | Email | Nochwas..

      Die anzahl der angezeigten Benutzer ist unterschiedlich.
      Das Script soll an dieser Stelle wie folgt eingesetz werden.

      Beim Klick auf den Namen z.B. soll der besprochene Layer angezeigt werden (an der Mausposition.). DAS FUNKTIONIERT.

      Nun soll aber in dem Layer ein Inhalt aus der Datenbank angezeigt werden. Dazu ist die UserID nötig..

      Wie übergebe ich die nun mit !?

      Vorher hatte ich ja den ansatz mit einem Js - Href. Da hätte man die UserId als PHP Variabel einsetzen können..

      Nur mir stellt sich die Frage WO, in dem Span nehme ich an, muss die ID platziert sein..

      Ich füge mal die Seite ein:

      <html>
      <head>

      <script type="text/javascript">
      function init() {
        if (document.getElementById) {
          document.getElementById("dadada").onclick = function(e) {Show_K(e, "Test");};
        }
      }

      function Show_K (Ereignis, js_var) {
        if (!Ereignis)
          Ereignis = window.event;
        if (document.getElementById) {
          document.getElementById("a1").innerHTML = js_var
          document.getElementById("ads").style.visibility="visible"
          document.getElementById("ads").style.left  = Ereignis.clientX + "px";
          document.getElementById("ads").style.top = Ereignis.clientY + "px";
        }
      }

      </script>

      </Head>

      <Body onload="init()">

      <Span id="dadada">
      Hier klicken
      </Span>

      <span id="a1"></span>

      ENDE erstmal.. ;)

      Habe den Rest der Seite, wie den Layer "ads" weggelassen. Denke der spielt keine Rolle.
      In Layer "a1" soll testweise der übergebene Wert angezeigt werden.

      Da wusste ich mir bisher nur mit einem span zu helfen.

      Später soll allerdings der übergebene Wert "js_var" in diesem Beispiel die UserID sein, stellt sich noch die nebenfrage ob die  Methode mit dem span in der PHP - MySQL Anweisung sone gute Idee ist. oder überhaupt möglich.

      Ich hoffe ich habe das nicht zu kompliziert beschrieben. Wahrscheinlich gibts eine sinnvolle Lösung. Die kommt mir nur leider nicht in den Kopf da JS nich so mein Gebiet ist-

      an dieser Stelle: Danke fürs durchlesen ;)

      Gruß - Steiner

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Client x/y - und weitere Variabeln.

        Axel Richter
        – Informationen zu den Bewertungsregeln

        Hallo,

        Die ganze Sache soll so aussehen:

        Eine Tablle z.B. mit Benutzern

        Name | Email | Nochwas..

        Die anzahl der angezeigten Benutzer ist unterschiedlich.
        Das Script soll an dieser Stelle wie folgt eingesetz werden.
        Beim Klick auf den Namen z.B. soll der besprochene Layer angezeigt werden (an der Mausposition.). DAS FUNKTIONIERT.
        Nun soll aber in dem Layer ein Inhalt aus der Datenbank angezeigt werden. Dazu ist die UserID nötig..
        Wie übergebe ich die nun mit !?

        Puh, das wird zu kompliziert zum Erklären. Ich geben Dir mal ein Musterbeispiel. Frage nach, wenn Du dazu Fragen hast, die sich mit den entsprechenden Beschreibungen in http://de.selfhtml.org/javascript/objekte/index.htm nicht klären lassen.

        Beispiel:

          
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
        "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>Datentabelle mit Klickinfo</title>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
<style type="text/css">  
<!--  
table#dTabelle {border:1px solid black;}  
table#dTabelle td {border:1px solid black;}  
div#infoDIV {position:absolute; display:none; background-color:#FFFF99; border:1px solid black;}  
-->  
</style>  
<script type="text/javascript">  
<!--  
var InfosAusDB = new Object();  
InfosAusDB.uidMueller = "Das ist speziell für Mueller";  
InfosAusDB.uidMaier = "Das ist speziell für Maier";  
InfosAusDB.uidSchulze = "Das ist speziell für Schulze";  
  
  
function init() {  
  var dTable = document.getElementById("dTabelle");  
  var rows = dTable.getElementsByTagName("TBODY")[0].getElementsByTagName("TR");  
  for (var i=0; i<rows.length; i++) {  
    rows[i].onclick = function(e) {showInfo(e, this.id);};  
  }  
  var infoDIV = document.getElementById("infoDIV");  
  infoDIV.onclick = hideInfo;  
}  
  
function showInfo(e, id) {  
  if (!e) e = window.event;  
  var infoText = document.createTextNode(id + ": " + InfosAusDB[id]);  
  var infoDIV = document.getElementById("infoDIV");  
  infoDIV.removeChild(infoDIV.firstChild);  
  infoDIV.appendChild(infoText);  
  infoDIV.style.display = "block";  
  infoDIV.style.left = e.clientX + "px";  
  infoDIV.style.top = e.clientY + "px";  
}  
  
function hideInfo() {  
  var infoDIV = document.getElementById("infoDIV");  
  infoDIV.style.display = "none";  
}  
  
window.onload = init;  
//-->  
</script>  
</head>  
<body>  
<table id="dTabelle">  
<caption>Nutzertabelle</caption>  
<thead>  
<tr>  
 <th>Name</th>  
 <th>E-Mail</th>  
 <th>nochwas</th>  
</tr>  
</thead>  
<tbody>  
<tr id="uidMueller">  
 <td>Mueller</td>  
 <td>mu@a.de</td>  
 <td>mu_nochwas</td>  
</tr>  
<tr id="uidMaier">  
 <td>Maier</td>  
 <td>ma@a.de</td>  
 <td>ma_nochwas</td>  
</tr>  
<tr id="uidSchulze">  
 <td>Schulze</td>  
 <td>schu@a.de</td>  
 <td>schu_nochwas</td>  
</tr>  
</tbody>  
</table>  
<div id="infoDIV">&nbsp;</div>  
</body>  
</html>

        Das ist Minimalcode, also junior programmer style ;-). Natürlich solltest Du Methoden wie getElement... vor ihrer Verwendung auf ihr Vorhandensein prüfen.

        Bei den Daten aus der Datenbank bin ich davon ausgegangen, dass Du sie beim PHP-Parse-Vorgang als JavaScript-Code generierst, der zur Laufzeit ein JavaScript-Objekt erzeugt. Das würde ich bevorzugen. Zusätzliche HTML-Elemente, die man später erst komplziert mit JavaScript wieder auslesen muss, wären nur sinnvoll, wenn diese auch sonst, also nicht im infoDIV, irgendwo zu sehen sein sollen.

        viele Grüße

        Axel

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Client x/y - und weitere Variabeln.

          Axel Richter
          – Informationen zu den Bewertungsregeln

          Hallo,

            

> function showInfo(e, id) {  
>   if (!e) e = window.event;  
>   var infoText = document.createTextNode(id + ": " + InfosAusDB[id]);  
>   var infoDIV = document.getElementById("infoDIV");  
>   infoDIV.removeChild(infoDIV.firstChild);  
>   infoDIV.appendChild(infoText);  
>   infoDIV.style.display = "block";  
>   infoDIV.style.left = e.clientX + "px";  
>   infoDIV.style.top = e.clientY + "px";  
> }

          Das mit e.clientX und e.clientY wird natürlich dann nicht mehr gut funktionieren, wenn die Tabelle so groß wird, dass gescrollt werden muss. Dann benötigst Du noch window.pageXOffset und window.pageYOffset inklusive der IE-Workarounds dazu.

          viele Grüße

          Axel

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln