Ersetze Element mit anderem Element (Prototype)

[Stefan]

Hi,

Ich setze ein AJAX Request ab und bekomme eine XML Datei zurück die vom Prinzip her so aussieht:

-----------------------------------------------------
<?xml version="1.0" encoding="UTF-8"?>
<request>
  <htmlupdate>
    <item replaceid="map_img">
      <img width="700" height="254" name="map_img" id="map_img" src="temp/image.png" />
    </item>
  </htmlupdate>
</request>
-----------------------------------------------------

Kurze Erklärung:
In '<htmlupdate>' kann es 0-n '<item>' Knoten geben.
Der Inhalt von '<item replaceid="map_img">' soll in das aktuelle Dokument eingefügt werden, und zwar soll das Element mit id 'map_img' ersetzt werden.

Auszug aus meinem JS Code:

-----------------------------------------------------
.
...

var request = response.responseXML;
var htmlupdateitems = request.getElementsByTagName('htmlupdate').item(0).getElementsByTagName('item');

var id_to_replace = 0;
var replacecode = null;

for(k=0 ; k < htmlupdateitems.length ; k++) {

id_to_replace = htmlupdateitems.item(k).getAttribute('replaceid');
  replacecode = htmlupdateitems.item(k).firstChild;

$(id_to_replace).replace(replacecode);

}

...
.
-----------------------------------------------------

Es wird alles richtig ersetzt (DOM Inspector -> View Generated Source) aber das Bild wird nicht angezeigt :(

An was liegt das?

MFG
Stefan

[Cheatah]

Hi,

<item replaceid="map_img">
      <img width="700" height="254" name="map_img" id="map_img" src="temp/image.png" />
    </item>

id_to_replace = htmlupdateitems.item(k).getAttribute('replaceid');
  replacecode = htmlupdateitems.item(k).firstChild;

Es wird alles richtig ersetzt (DOM Inspector -> View Generated Source)

irgendwo in diesem Posting lügst Du. Laut Deinen Code-Angaben wird das ursprüngliche Element durch ein paar Whitespaces ersetzt.

An was liegt das?

Was hat Deine Analyse ergeben?

Cheatah

[Stefan]

irgendwo in diesem Posting lügst Du. Laut Deinen Code-Angaben wird das ursprüngliche Element durch ein paar Whitespaces ersetzt.

Weshalb sollte das so sein?
'htmlupdateitems' beinhaltet alle 'item's.
Mit .item(k) greife ich auf eines zu und mit dem .firstChild selektieren ich <img ...>

FireFox 3.0 -> View Generated Source -> VOR dem Script:
---------------------------------
...
.
<div id="real">
  <img src="img/na.png" id="map_img" alt="" height="30"/>
</div>
.
...
---------------------------------

FireFox 3.0 -> View Generated Source -> NACH dem Script:
---------------------------------
...
.
<div id="real">
  <img width="700" height="254" name="map_img" id="map_img" src="temp/image.png" />
</div>
.
...
---------------------------------

Das Bild wird nur nicht angezeigt.

Was hat Deine Analyse ergeben?

Das der Code richtig ersetzt wird und es somit nicht umbedingt am Script liegen muss. Könnte an Prototype liegen bzw. welche Arten von Parametern replace wie interprediert. Zudem hat meine Analyse hat ergeben das ich schlußendlich nicht weiß ob es ein Problem beim Browser, beim Script oder an was anderem liegt und ich deshalb jemanden Fragen sollte der den Fehler sicherlich sofort beim hinschauen sieht.

Wenn ich die Variable 'replacecode' mit dem String '<img width="700" height="254" name="map_img" id="map_img" src="temp/image.png" />' befülle funktioniert es übrigends.

Stefan

[Stefan]

Hier hab ich ein Demo des Codes upgeloaded wo es nicht funktioniert mit Debug Ausgaben:

http://terra.newstrekker.com/selfdemo/

MFG
Stefan

[Christian S.]

Hi,

m.E. liegt es daran dass du ein XML Tag, das "zufällig" den selben Tagname wie das HTMLImage Element hat, in ein HTML Dokument zu bringen.

Es ist dann zwar drin, aber der Browser weiß nichts damit anzufangen.

Du solltest ein neues Bild (HTMLImage) via "new Image()" oder document.createElement("img") erzeugen.

Zumindest zeigt mein Firebug mir "dein" replace Image so ausgegraut an.

Gruß!

[Stefan]

Hi,

Es ist dann zwar drin, aber der Browser weiß nichts damit anzufangen.

Du solltest ein neues Bild (HTMLImage) via "new Image()" oder document.createElement("img") erzeugen.

Zumindest zeigt mein Firebug mir "dein" replace Image so ausgegraut an.

Stimmt. Ist bei mir auch so. Wenn ich z.B. versuche '<strong>Test<em>Test</em></strong>' einzufügen schreibt er es auch rein aber der Browser formatiert es nicht :/

Wenn ich das Element vorher erzeuge:

--------------------------------------------------
r_img = document.createElement('img');
r_img.setAttribute('src','tn_loc_14.jpg');

$(id_to_replace).replace(r_img);
--------------------------------------------------

Klappt alles wunderbar, aber ich würd nur ungern alle Elemente die da daherkommen könnten vorher neu generieren bevor ich sie einsetze...

seltsam...

MFG
Stefan

[noscript]

Klappt alles wunderbar, aber ich würd nur ungern alle Elemente die da daherkommen könnten vorher neu generieren bevor ich sie einsetze...

seltsam...

also doch ein String statt eines node!

Quick-and-Dirty: innerHTML dürfte Abhilfe schaffen.

[ChrisB]

Hi,

m.E. liegt es daran dass du ein XML Tag, das "zufällig" den selben Tagname wie das HTMLImage Element hat, in ein HTML Dokument zu bringen.

Es ist dann zwar drin, aber der Browser weiß nichts damit anzufangen.

Das sollte sich aber aendern lassen, in dem man dem Wurzelelement im XML-Dokument einen HTML-Namespace verpasst.

MfG ChrisB

[noscript]

Auszug aus meinem JS Code:

...

var request = response.responseXML;
var htmlupdateitems = request.getElementsByTagName('htmlupdate').item(0).getElementsByTagName('item');

var id_to_replace = 0;
var replacecode = null;

for(k=0 ; k < htmlupdateitems.length ; k++) {

id_to_replace = htmlupdateitems.item(k).getAttribute('replaceid');

hier wäre [k] angebracht, nicht (k)

replacecode = htmlupdateitems.item(k).firstChild;

dito

$(id_to_replace).replace(replacecode);

was ist $ ?
replace verarbeitet Strings, nicht nodes, insofern bräuchtest du wohl ...firstChild.data, und zudem benötigt replace ein erstes Argument, das (als regulären Ausdruck) angibt, wo ersetzt werden soll

}

Deine Aussage über den korrekten Ergebniscode überrascht mich!

[Stefan]

Hi,

was ist $ ?

$() ist eine Funktion von Prototype die den Zugriff auf Elemente im DOM erleichtert.

$(id_des_elements) liefert das Element mit dem ID im aktuellen Dokument zurück.

http://prototypejs.org/api/utility/dollar

Die .replace Funktion ist auch in Prototype enthalten und dient zum ersetzen von Elementen im Dokument.

MFG
STefan

[amolip]

Hallo noscript!

id_to_replace = htmlupdateitems.item(k).getAttribute('replaceid');
hier wäre [k] angebracht, nicht (k)

Nein, das wäre grottenfalsch.

replacecode = htmlupdateitems.item(k).firstChild;
dito

dito

Gruß Uwe