[js/dom]Gecreëerde plaatjes zijn onzichtbaar.

[Verwijderd]

Ik probeer om via javascript een rij met opties in te voegen. Dit gaat prima, met uitzondering van de plaatjes. Die zijn gewoon niet zichtbaar.

Dit is de HTML waartegen ik het script run:

code:

<form action="http://forum.fok.nl//fok/post_reply/714060" method="post">
    <input type="hidden" name="topic" value="714060" />
    <table class="table">
        <tr>
            <td class="gen3b" colspan="2">Snel reageren</td>
        </tr>
        <tr>
            <td valign="top" class="gen1bw">&nbsp;&nbsp;je bericht:</td>
            <td class="gen1b"><textarea name="message" rows="5" cols="100"></textarea></td>
        </tr>
        <tr>
            <td class="gen1bw">&nbsp;</td>
            <td class="gen1b">
                <input type="submit" name="preview" value="Preview" accesskey="p" />
                <input type="submit" name="submit" value="Invoeren" accesskey="s" />
            </td>
        </tr>
    </table>
</form>

En dit is het scriptje:

code:

// QuickPI: Post-Icons voor Snel Reageren
function ff_light_QuickPI(doc)
{
    // check of we wel kunnen Snel Reageren
    var form=doc.getElementsByTagName('form')[1];
    if (!form)
    {
        return false;
    }
    
    // hier moeten we de posticons in frutten
    var postTable=form.getElementsByTagName('tbody')[0];
    var firstRow=postTable.getElementsByTagName('tr')[1];
    
    // declareer alle gewenste posticons
    var postIcons=new Array(1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,99);
    
    // tabelrij
    var tr=doc.createElement('tr');
    
    // linkerkolom
    var tdLeft=doc.createElement('td');
    var spanLeft=doc.createElement('span');
    var txtLeft=doc.createTextNode('Posticon:');
    
    tdLeft.setAttribute('class','gen1bw');
    spanLeft.setAttribute('class','normaltxt');
    spanLeft.setAttribute('style','padding-left: 8px;');
    spanLeft.appendChild(txtLeft);
    tdLeft.appendChild(spanLeft);
    
    // rechterkolom
    var tdRight=doc.createElement('td');
    var input=new Array(postIcons.length);
    var label=new Array(postIcons.length);
    var img=new Array(postIcons.length);
    
    for (var i=0;i<postIcons.length;i++)
    {
        input[i]=doc.createElement('input');
        input[i].setAttribute('name','posticon');
        input[i].setAttribute('id','pi'+postIcons[i]);
        input[i].setAttribute('type','radio');
        
        label[i]=doc.createElement('label');
        label[i].setAttribute('for','pi'+postIcons[i]);
        
        img[i]=doc.createElement('img');
        img[i].setAttribute('src','http://forum.fok.nl/templates/fokforum_light/i/c/'+postIcons[i]+'.gif');
        img[i].setAttribute('alt','icoon');
        img[i].setAttribute('height',15);
        img[i].setAttribute('width',15);
        
        label[i].appendChild(img[i]);
        input[i].appendChild(label[i]);
        tdRight.appendChild(input[i]);
    }
    
    tr.appendChild(tdLeft);
    tr.appendChild(tdRight);
    
    postTable.insertBefore(tr, firstRow);
    
    return true;
}

Als ik na het uitvoeren van het script naar de bron kijk, zie ik het volgende:

code:

<tbody>
    <tr>
        <td class="gen3b" colspan="2">Snel reageren</td>
    </tr>
    <tr>
        <td class="gen1bw"><span style="padding-left: 8px;" class="normaltxt">Posticon:</span></td>
        <td>
            <input id="pi1" name="posticon" type="radio"><label for="pi1">[img]"http://forum.fok.nl/templates/fokforum_light/i/c/1.gif"[/img]</label>
            ... meer hier 
        </td>
    </tr>
    <tr>
        <td class="gen1bw" valign="top">&nbsp;&nbsp;je bericht:</td>
        <td class="gen1b"><textarea name="message" rows="5" cols="100"></textarea></td>
    </tr>
    <tr>
        <td class="gen1bw">&nbsp;</td>
        <td class="gen1b">
            <input name="preview" value="Preview" accesskey="p" type="submit">
            <input name="submit" value="Invoeren" accesskey="s" type="submit">
        </td>
    </tr>
</tbody>

Prima code, Firefox bouwt er zelfs netjes een <tbody> omheen
Alleen, de plaatjes worden niet zichtbaar, en ik begrijp niet waarom. De img-tag klopt, en het plaatje bestaat gewoon, en anders zou ik natuurlijk sowieso de alt-tekst 'icoon' verwachten. Ik krijg alleen de options te zien.

Ik snap er niks van, voor zover ik weet is alle code geldig, en als ik de code die daar staat rechtstreeks in de pagina plak werkt het wel. Alleen als het door het script wordt gedaan, werkt het niet.

Mis ik hier iets?

[ Voor 21% gewijzigd door Verwijderd op 14-06-2005 00:37 ]

[André]

Hoe kom je aan die realtime bron dan? Vraag je die op met JS? Want dit zou dan echt wel moeten werken. Heb je misschien ook een url waarop je een voorbeeld hebt?

[faabman]

JavaScript:

        label[i].appendChild(img[i]);
        input[i].appendChild(label[i]);

Lijkt me niet zo handig om label een als childNode aan een input toe te kennen

[Verwijderd]

André schreef op dinsdag 14 juni 2005 @ 00:33:
Hoe kom je aan die realtime bron dan? Vraag je die op met JS? Want dit zou dan echt wel moeten werken. Heb je misschien ook een url waarop je een voorbeeld hebt?

Firefox heeft daar een hele handige feature voor. Als je een stuk tekst selecteert en rechtsklikt kun je kiezen voor 'Bron van selectie bekijken'. Daarbij krijg je de bron te zien, inclusief aanpassingen door scripts en Firefox zelf. Een lifesaver, die functie

faabman schreef op dinsdag 14 juni 2005 @ 00:35:

JavaScript:

        label[i].appendChild(img[i]);
        input[i].appendChild(label[i]);

Lijkt me niet zo handig om label een als childNode aan een input toe te kennen

Dat was inderdaad het probleem.
Mijn hartelijke dank.

Wel grappig trouwens dat het nu ik het aanpas, wél werkt, maar dat de HTML-code die er uitkomt hetzelfde is.

[ Voor 37% gewijzigd door Verwijderd op 14-06-2005 00:46 ]