jQuery load auf ID zugreufen

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas

16:34, 20.12.2012

Hallo,
ich probiere nun schon länger etwas herum, komme aber zu keinem richtigen Ergebnis.
Mit JS greife ich über

document.getElementById('div1')

auf die ID "div1" zu, klappt ohne Probleme. Ich kann die zuvor definierten CSS Eigenschaften bearbeiten.
index.php:

<html>
  <head>
    <script type="text/javascript" src="jquery-1.8.2.js">
    </script>
    <script type="text/javascript" src="js.js">
    </script>
    <link rel="stylesheet" href="css.css">
  </head>
  <body>
    <div id="div1">
      Hier steht was
    </div>
  </body>
</html>

Da der Div mit der ID "div1" aber nicht immer mitgeladen werden soll, habe ich ihn ausgelagert:
index.php:

<html>
  <head>
    <script type="text/javascript" src="jquery-1.8.2.js">
    </script>
    <script type="text/javascript" src="js.js">
    </script>
    <link rel="stylesheet" href="css.css">
  </head>
  <body>
    <div id="div1">
    </div>
  </body>
</html>

div.php:

<script type="text/javascript" src="jquery-1.8.2.js">
</script>
<script type="text/javascript" src="js.js">
</script>
<link rel="stylesheet" href="css.css">
Hier steht was
<a href="example.com" id="a">
  Dieser Link wird nur angezeigt, wenn die Funktion"DivAnzeiegn" aufgerufen wurde, da "display" über die "css.css" auf "none" gestellt wurde.
</a>

Mit jQuery lade ich jetzt die div.php in die index.php und greife auf die ID(s) in der div.php zu:
js.js:

function DivAnzeigen() {
  $(document).ready(function() {
    $("#Hafen1Fenster").load("div1.php")
    document.getElementById('a').style.display = 'block';
  });
}

Firefox gibt mir aber nur die Meldung:

TypeError: document.getElementById(...) is null

Diese Fehlermeldung bezieht sich auf die Zeile

document.getElementById('a').style.display = 'block';

aus der js-Datei. Was mache ich falsch? Muss (darf) ich meine JS Dateien eigentlich auch in der "div.php" einbinden?
MFG THWBM

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage
hackyourlife

Moderator

hackyourlife hat kostenlosen Webspace.
17:29, 20.12.2012

thwbm schrieb:
Was mache ich falsch?
Die Funktion
```
.load()
```
wird asynchron ausgeführt und deshalb ist der Content noch nicht vorhanden während deine nächste Anweisung bereits darauf zugreifen will. Du könntest diese Zeile in den
```
complete
```
-Handler auslagern, dann würde es vermutlich funktionieren.

thwbm schrieb:
Muss (darf) ich meine JS Dateien eigentlich auch in der "div.php" einbinden?
In der jQuery-Dokumentation findet sich dazu folgender Abschnitt:
Script Execution
When calling .load() using a URL without a suffixed selector expression, the content is passed to .html() prior to scripts being removed. This executes the script blocks before they are discarded. If .load() is called with a selector expression appended to the URL, however, the scripts are stripped out prior to the DOM being updated, and thus are not executed.
Ein JavaScript wird in deinem Fall also ausgeführt, wenn es in der zu ladenden Datei enthalten ist.

Beitrag zuletzt geändert: 20.12.2012 17:30:04 von hackyourlife
Autor dieses Themas
thwbm

thwbm hat kostenlosen Webspace.
18:19, 20.12.2012
Hallo hackyourlife und danke für deine schnelle Antwort,
hackyourlife schrieb:
Die Funktion
```
.load()
```
wird asynchron ausgeführt und deshalb ist der Content noch nicht vorhanden während deine nächste Anweisung bereits darauf zugreifen will.
Das hört sich gut an.
hackyourlife schrieb:
Du könntest diese Zeile in den
```
complete
```
-Handler auslagern, dann würde es vermutlich funktionieren.
Laut Selfhtml ist das aber nicht wirklich ratsam, oder irre ich mich?
http://de.selfhtml.org/javascript/objekte/images.htm:

Beachten Sie:
Die Eigenschaft complete wird von den Browsern unterschiedlich interpretiert, je nachdem, ob sie der Definition von Netscape oder Microsoft folgen. Netscape ab Version 6, Mozilla Firefox und Konqueror folgen der Netscape-Definition. Obwohl im vorliegenden Beispiel zwei Grafiken nicht geladen werden können, hat die Eigenschaft complete für alle Grafiken den Wert true. Die älteren Netscape-Browser bis zur Version 4 geben für alle Grafiken den Wert false an. Der Internet Explorer und Opera folgen der Microsoft-Definition: Die korrekt geladene Grafik hat den complete-Wert true, die anderen beiden nicht vorhandenen Grafiken den Wert false.

Das heißt doch, dass mein Script Browserabhängik wäre, oder? Wenn ja, gibt es eine (größtenteils) Browserunabhängige Methode? Wenn diese schon unabhängik ist, warum erhalte ich ein "undifined"?
```
alert(document.getElementById('ID').complete);
```
Die ID, auf die ich zugreife ist schon geladen. Bei Selfhtml bezieht sich
```
complete
```
nur auf Bilder, ich will aber nicht abfragen, ob ein Bild schon geladen wurde, sondern ob eine PHP Datei bereits geladen wurde.

hackyourlife schrieb:
Ein JavaScript wird in deinem Fall also ausgeführt, wenn es in der zu ladenden Datei enthalten ist.

Das meine ich nicht, ich mein, ob ich ein externes JS-Script sowohl in der Datei, in die ich etwas hinenladen will, als auch in die Datei, die ich irgendwo hinenladen will, angeben muss.
MFG THWBM
hackyourlife

Moderator

hackyourlife hat kostenlosen Webspace.
18:29, 20.12.2012
Das mit dem
```
complete
```
-Handler hast du vermutlich falsch verstanden… du kannst bei der
```
load()
```
-Funktion einen
```
complete
```
-Handler angeben, der aufgerufen wird, wenn der Seitenteil erfolgreich geladen wurde. Und genau dort kannst du dein JavaScript hineingeben, das die nachgeladenen Daten manipulieren soll.
Autor dieses Themas
thwbm

thwbm hat kostenlosen Webspace.
19:08, 20.12.2012
hackyourlife schrieb:
Das mit dem
```
complete
```
-Handler hast du vermutlich falsch verstanden? du kannst bei der
```
load()
```
-Funktion einen
```
complete
```
-Handler angeben, der aufgerufen wird, wenn der Seitenteil erfolgreich geladen wurde. Und genau dort kannst du dein JavaScript hineingeben, das die nachgeladenen Daten manipulieren soll.
Jetzt hab' ich es kappiert. Es klappt!
Für die, die es interessiert:
```
$("#div").load("div.php", function() {
  //Mache etwas, wenn die Datei fertig geladen wurde...
});
```
Danke hackyourlife. Ich suche Stunden nach mienem Fehler und dann stelle ich meine Frage hier im Forum und 2:30:00 später habe ich die Lösung.
MFG THWBM
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city