Javascript fungerar bara efter alert()!

lincon · 2006-12-20, 17:24

Jag har en text i en div som jag vill ska växla till editeringsläge (wysiwyg) när jag klickar på texten.

Allt fungerar perfekt förutom ett väldigt konstigt problem. Det fungerar så här:

1. Plocka ut texten i diven
2. skapa en iframe som kan göras editerbar
3. Lägg till texten i iframen så att man kan editera texten.

För att kunna utföra steg 3 så måste jag först hämta det objekt i iframen som texten ska ligga i. Detta fungerar ENBART om jag skriver ut något först (se alert i koden nedan)!!

Har någon sett detta förut??

Jag lägger inte ut all kod eftersom det är ett så omfattande system men här är de kritiska delarna:

Kod:

editor.js:

moduleObject = document.getElementById(id);
text = moduleObject.innerHTML;
editableArea = '<iframe src="editableArea.html" id="id"></iframe>';
moduleObject.innerHTML = editableArea;
	
if (window[id]) 
{
	alert("TODO: make this work without alert!");
	window[id].document.getElementById(id+'_textArea').innerHTML = text;
}
else
{
	alert("TODO: make this work without alert!");
	document.getElementById(id).contentDocument.getElementById('id').innerHTML = text;
}

---
editableArea.html:
<html>
<body contenteditable onLoad="document.designMode='on';" id="id_textArea">
</html>

koala · 2006-12-20, 22:35

Lägg in javascriptetkoden i en funktion som du anropar vid body.onload. Misstänker att du kör nuvarande script före (tidsmässigt) id:t hunnit definieras, eller något liknande, om du kör satserna globalt i js-filen.

lincon · 2006-12-21, 10:51

Problemet är att jag inte vill köra funktionen när sidan laddas utan när jag klickar på texten. (jag använder ajax för alla serveranrop så sidan laddas aldrig om)

Jag trodde också att problemet berodde på att id:t inte hunnit definieras men eftersom det räcker med att lägga in en alert före så förstår jag inte:

Detta fungerar:

Kod:

alert("");
window[id].document.getElementById(id+'_textArea').innerHTML = text;

Detta fungerar inte:

Kod:

window[id].document.getElementById(id+'_textArea').innerHTML = text;

Jag har två teorier:
- En alert har så lång exekveringstid att iframen hinner laddas och därför finns id:t definierat när anropet körs

- Det har något att göra med hur alert fungerar på ett djupare javascript-semantiskt plan (som t.ex. i php att headers inte kan skickas om du skrivit ut (echo/print) något först?)

Någon som har fler ideer???

DeSoto · 2006-12-21, 11:38

Var kommer variabeln id ifrån? Ligger det i en funktion som anropas när någon klickar någonstans?

lincon · 2006-12-21, 13:20

Id kommer ifrån den div som håller texten som ska bli editerbar

Det som ska hända är att

Kod:

<div id="5" onclick="makeThisTextEditable(this)">Texttexttext</div>

ska bli

Kod:

<div id="5" onclick="makeThisTextEditable(this)">
<iframe src="editableArea.html">
<html>
<body contenteditable onLoad="document.designMode='on';" id="5_textArea">
Texttexttext
</body>
</html>
</iframe>
</div>

(Funktionen "makeThisTextEditable(id)" är alltså den funktion jag visade i det första inlägget)

DeSoto · 2006-12-21, 13:26

Då visade du inte hela funktionen makeThisTextEditable(), så det vore bra om du kunde klistra in den.

bivald · 2006-12-21, 14:03

Kan du lägga upp en testsida med din kod så vi kan testa? Annars, säger den några felmeddelanden? Om du installerar t.ex. Firebug, vad säger den?

http://www.getfirebug.com/

lincon · 2006-12-21, 16:24

Jag har nu lagt upp en testsida:

http://www.lincon.it/test/test.php

Jag provade att kolla koden med firebug (tack för tipset bivald!) och att lägga in en brytpunkt har samma effekt som att lägga in en alert, dvs det får koden att fungera!

Kolla in sidan och koden och se om ni kan lösa gåtan...

bivald · 2006-12-21, 16:41

Jag har inte hunnit kolla så långt på det, men felet som du skrivit tidigare vara att den inte hinner skapa objektet innan det anropas. Vet att webbläsare brukar vara lite känsliga på den punkten.

Jag kollar nog koden lite nogrannare senare men just nu är jag tyvärr väldigt upptagen, men spontant kanske du kan testa:

Fulhack:
- Fördröja koden med en setTimeout

Mer politisk korrekt lösning:
- Skicka med texten direkt till editorn som en $_GET variabel? då du ändå laddar den via en iframe, behövs koden då laddas extern med javascript?

Mvh/ Niklas

Edit: stavfel

lincon · 2006-12-21, 19:38

Det skulle fungera ifall inte $_get variabler bara får vara max 100 tecken vilket jag inte kan begränsa mig till.

Ska kolla på om det går att lagra det i sessionen istället.

Aktiva användare som för närvarande tittar på det här ämnet: 1 (0 medlemmar och 1 gäster)

Menu

Javascript fungerar bara efter alert()!