[js] node handling

[wboard]

Ik heb een probleempje met de eerste node, wanneer ik m.b.v. onderstaand geschreven script VOOR het eerste element een nieuw element wilt plaatsen plaats hij hem op het einde van de lijst. Opzich begrijpelijk en is eenmalig op te lossen met een lege div, ik heb al met firstChild lopen kloten alleen dat werd nix, zit ik in de goede richting??. Alle functies onderstaand werken, als het maar niet de eerste child betreft

HTML:

<script>
function addRow(element,method) 
{
    //test.parentNode.removeChild(test)
    
    var numi = document.getElementById('offerRowPointerPosition');
    var num = (document.getElementById('offerRowPointerPosition').value -1)+ 2;
    numi.value = num;
    alert(numi.value);
    var newDivId = 'Row_'+num;
    var newElement = document.createElement('div');

    newElement.setAttribute("id",newDivId);
    newElement.setAttribute("class","row_offer");
    
    if (method == 'before')
    {
        var test = document.getElementById(element).previousSibling.previousSibling;
        document.getElementById('offers').insertBefore(newElement,test);
    }
    else if (method == 'after')
    {
        var test = document.getElementById(element).nextSibling.nextSibling;
        document.getElementById('offers').insertBefore(newElement,test);
    }
    else if (method == 'last')
    {
        document.getElementById('offers').appendChild(newElement);
    }
    else if (method == 'first')
    {
        var test = document.getElementById(element).firstChild;
        document.getElementById('offers').insertBefore(newElement,test);
    }
    document.getElementById(newDivId).innerHTML = '<span class="description">Quick control:</span><span class="info"><a href="javascript:;" onclick="addRow(\'' + newDivId + '\',\'last\');">last</a> <a href="javascript:;" onclick="addRow(\'' + newDivId + '\',\'before\');">before</a> <a href="javascript:;" onclick="addRow(\'' + newDivId + '\',\'after\');">after</a></span>';
} 
</script>
<style>
.row_offer
{
    border: 1px solid black;
}
</style>
<input type="hidden" type="hidden" value="1" id="offerRowPointerPosition" name="OPP" />
<div id="offers">
    <div></div>
    <div id="Row_1" class="row_offer" style="border: 1px solid black;"><span class="description">Quick control:</span>
    <span class="info">
    <a href="javascript:;" onclick="addRow('Row_1','last');"><b>last</b></a>
    <a href="javascript:;" onclick="addRow('Row_1','before');"><b>before</b></a>
    <a href="javascript:;" onclick="addRow('Row_1','after');"><b>after</b></a>
    <a href="javascript:;" onclick="addRow('Row_1','first');"><b>first</b></a>
    </span>
    </div>
</div>

[Michali]

Ik snap maar weinig van je code. Waar moeten de rijen geplaatst worden? Alles in offers? Betekent het dan dat als je een element 'last' plaatst, dat hij na de opties komt? Lijkt me een beetje vreemd eerlijk gezegd.

[reddevil]

Michali schreef op vrijdag 08 september 2006 @ 13:43:
Ik snap maar weinig van je code. Waar moeten de rijen geplaatst worden? Alles in offers? Betekent het dan dat als je een element 'last' plaatst, dat hij na de opties komt? Lijkt me een beetje vreemd eerlijk gezegd.

same here... snap ook niet echt wat je wilt, wat je met de rijen wilt etc... tevens zijn alle rijen die hij toevoegd hetzelfde, dus makkelijk onderscheidt maken is er ook niet bij.

[crisp]

Ik denk dat je dit wilt hebben:

JavaScript:

        var test = document.getElementById('offers').firstChild;
        document.getElementById('offers').insertBefore(newElement,test);

Als je de firstChild van #Row_1 pakt dan heb je een element dat geen directe child is van #offers, hence faalt je insertBefore.

[Michali]

Hier een voorbeeld van hoe je kan doen wat je mogelijk wilt. Hopelijk heb je er wat aan:

HTML:

<script type="text/javascript">

var rowCount = 0;
function createRow()
{
    rowCount++;
    var row = document.createElement('div');
    row.innerHTML = "new row " + rowCount;
    return row;
}

function addNewRowFirst()
{
    var rowsElement = document.getElementById('rows');
    rowsElement.insertBefore(createRow(), rowsElement.firstChild);
}

function addNewRowBefore()
{
    document.getElementById('rows').insertBefore(createRow(), document.getElementById('row'));
}

function addNewRowAfter()
{
    var rowElement = document.getElementById('row');
    if ( rowElement.nextSibling )
    {
        document.getElementById('rows').insertBefore(createRow(), rowElement.nextSibling);
    }
    else
    {
        addNewRowLast();
    }
}

function addNewRowLast()
{
    document.getElementById('rows').appendChild(createRow());
}

</script>
<div id="rows">
    <div id="row">row</div>
</div>
<ul>
    <li><span onclick="addNewRowFirst();">first</span></li>
    <li><span onclick="addNewRowBefore();">before</span></li>
    <li><span onclick="addNewRowAfter();">after</span></li>
    <li><span onclick="addNewRowLast();">last</span></li>
</ul>

[wboard]

opgelost, de volgende code werkt:

HTML:

<script type="text/javascript"> 

function createRow() 
{ 
    var numi = document.getElementById('offerRowPointerPosition');
    var num = (document.getElementById('offerRowPointerPosition').value -1)+ 2;
    numi.value = num;

    var newDivId = 'Row_'+num;
    var newElement = document.createElement('div');

    newElement.setAttribute("id",newDivId);
    newElement.setAttribute("class","row_offer");
    newElement.innerHTML = '<ul><li>' + newDivId + '</li><li><span onclick="addNewRowFirst(\''+ newDivId +'\');">first</span></li><li><span onclick="addNewRowBefore(\''+ newDivId +'\');">before</span></li><li><span onclick="addNewRowAfter(\''+ newDivId +'\');">after</span></li><li><span onclick="addNewRowLast(\''+ newDivId +'\');">last</span></li></ul>';

    return newElement; 
} 

function addNewRowFirst(divId) 
{ 
    var rowsElement = document.getElementById('rows'); 
    rowsElement.insertBefore(createRow(), rowsElement.firstChild); 
} 

function addNewRowBefore(divId) 
{ 
    document.getElementById('rows').insertBefore(createRow(), document.getElementById(''+divId+'')); 
} 

function addNewRowAfter(divId) 
{ 
    var rowElement = document.getElementById(''+divId+''); 
    if (rowElement.nextSibling) 
    { 
        document.getElementById('rows').insertBefore(createRow(), rowElement.nextSibling); 
    } 
    else 
    { 
        addNewRowLast(''+divId+''); 
    } 
} 

function addNewRowLast(divId) 
{ 
    document.getElementById('rows').appendChild(createRow()); 
} 

</script> 
<input type="hidden" type="hidden" value="1" id="offerRowPointerPosition" name="OPP" />
<div id="rows"> 
    <div id="Row_1">
        <ul> 
            <li>Row_1</li> 
            <li><span onclick="addNewRowFirst('Row_1');">first</span></li> 
            <li><span onclick="addNewRowBefore('Row_1');">before</span></li> 
            <li><span onclick="addNewRowAfter('Row_1');">after</span></li> 
            <li><span onclick="addNewRowLast('Row_1');">last</span></li> 
        </ul>   
    </div> 
</div>

[ Voor 164% gewijzigd door wboard op 08-09-2006 17:05 ]

[wboard]

Nog een klein probleem met het toepassen van de css class (row_offer) door javascript op het nieuwe element, in FireFox werkt het wel, echter in IE is de opmaak niet te zien?? De onderstaande lap html is de output na het toevoegen van 1 element! (ik zie er niets geks aan?)

HTML:

            <div id="TRow_1" class="row_offer">
                <span class="description"><input name="" class="text" value="Uitvoering:" type="text"></span>
                <span class="info"><textarea name="">bladiebla</textarea>
                    <span class="fakeLink" onmouseover="fakeLinkBehavior(this);" onclick="manageOfferTexts('textDataPage1','addNewRowFirst','TRow_1');"><img src="_files/addAsFirst.gif" onmouseover="showTooltip('shortcutsCalculate');" onmouseout="hideTooltip();"></span>
                    <span class="fakeLink" onmouseover="fakeLinkBehavior(this);" onclick="manageOfferTexts('textDataPage1','addNewRowBefore','TRow_1');"><img src="_files/addAbove.gif" onmouseover="showTooltip('shortcutsCalculate');" onmouseout="hideTooltip();"></span>
                    <span class="fakeLink" onmouseover="fakeLinkBehavior(this);" onclick="manageOfferTexts('textDataPage1','addNewRowLast','TRow_1');"><img src="_files/addAsLast.gif" onmouseover="showTooltip('shortcutsCalculate');" onmouseout="hideTooltip();"></span>
                    <span class="fakeLink" onmouseover="fakeLinkBehavior(this);" onclick="manageOfferTexts('textDataPage1','addNewRowAfter','TRow_1');"><img src="_files/addUnder.gif" onmouseover="showTooltip('shortcutsCalculate');" onmouseout="hideTooltip();"></span>
                    <span class="fakeLink" onmouseover="fakeLinkBehavior(this);" onclick="manageOfferTexts('textDataPage1','deleteRow','TRow_1');"><img src="_files/deleteS.gif" onmouseover="showTooltip('shortcutsCalculate');" onmouseout="hideTooltip();"></span>           
                </span>
            </div>
        
            <div style="display: block;" class="row_offer" id="TRow_2">
                <span class="description"><input name="" class="text" value="Uitvoering:" type="text"></span>
                <span class="info"><textarea name="">bladiebla</textarea>
                    <span class="fakeLink" onmouseover="fakeLinkBehavior(this);" onclick="manageOfferTexts('textDataPage1','addNewRowFirst','TRow_2');"><img src="_files/addAsFirst.gif" onmouseover="showTooltip('shortcutsCalculate');" onmouseout="hideTooltip();"></span>
                    <span class="fakeLink" onmouseover="fakeLinkBehavior(this);" onclick="manageOfferTexts('textDataPage1','addNewRowBefore','TRow_2');"><img src="_files/addAbove.gif" onmouseover="showTooltip('shortcutsCalculate');" onmouseout="hideTooltip();"></span>
                    <span class="fakeLink" onmouseover="fakeLinkBehavior(this);" onclick="manageOfferTexts('textDataPage1','addNewRowLast','TRow_2');"><img src="_files/addAsLast.gif" onmouseover="showTooltip('shortcutsCalculate');" onmouseout="hideTooltip();"></span>
                    <span class="fakeLink" onmouseover="fakeLinkBehavior(this);" onclick="manageOfferTexts('textDataPage1','addNewRowAfter','TRow_2');"><img src="_files/addUnder.gif" onmouseover="showTooltip('shortcutsCalculate');" onmouseout="hideTooltip();"></span>
                    <span class="fakeLink" onmouseover="fakeLinkBehavior(this);" onclick="manageOfferTexts('textDataPage1','deleteRow','TRow_2');"><img src="_files/deleteS.gif" onmouseover="showTooltip('shortcutsCalculate');" onmouseout="hideTooltip();"></span>           
                </span>
            </div>

[crisp]

Firefox:

JavaScript:

element.setAttribute('class', 'foo');

IE:

JavaScript:

element.setAttribute('className', 'foo');

crossbrowser:

JavaScript:

element.className = 'foo';

[wboard]

ok handig, dat vergeet ik niet meer(Y)