[js] onBlur werkt opeens niet meer in IE - Softwareontwikkeling

vrijdag 4 juni 2004 10:52

Acties:

Verwijderd

Topicstarter

Met de volgende code, kan ik dynamisch invoerregels aanmaken (a la MS Access).
Het is javascript overigens.

PHP:

var numMateriaal = 0; // Houd aantal regels bij
function addMateriaal(){
    var arrFields = new Array(                  
                        new Array(true, 'txtMat_Aantal',        3,  null,   null,       null, true),
                        new Array(true, 'txtMat_Onderdeel',     85, null,   null,       null, false),
                        new Array(true, 'txtMat_OndNum',        5,  null,   null,       null, false),
                        new Array(true, 'txtMat_Eenheidsprijs', 10, null,   'prijs',    true, true),
                        new Array(true, 'txtMat_Totaalprijs',   10, null,   null,       true, true));
    var theTable = document.getElementById('tblMateriaal');
    var newPos   = theTable.rows.length-1;
    var newRow   = theTable.insertRow(newPos);     
    for(var i=0; i<arrFields.length; i++){
        var newCell = newRow.insertCell(i);
        if(arrFields[i][0]==true){
           tempNameID = arrFields[i][1]+'['+numMateriaal+']';
           var newEl   = document.createElement('input');
           newEl.setAttribute('type', 'text');
           newEl.setAttribute('name', tempNameID);
           newEl.setAttribute('id', tempNameID);
           if(arrFields[i][2]!=null) newEl.setAttribute('size', arrFields[i][2]);
           if(arrFields[i][3]!=null) newEl.setAttribute('value', arrFields[i][3]);  
           if(arrFields[i][4]!=null && arrFields[i][4]=='prijs') {
                // javascript-actie toevoegen aan dit veld
                newEl.setAttribute('onBlur', 'calcMateriaalTotaal('+numMateriaal+')');
           }
           newCell.appendChild(newEl);  
           if(arrFields[i][5]!=null) newCell.appendChild(document.createTextNode(' €'));
           if(arrFields[i][6]) document.getElementById(tempNameID).className='calcField';
        }else{
           var textNode = document.createTextNode('');
           newCell.appendChild(textNode);
        }       
    }
    numMateriaal++;
}

Deze functie werkt prima en ook de onBlur event werkte in IE 6.x
Het gaat dus om regel 24 hierboven!
Bij het aanmaken wordt deze regel wel degelijk uitgevoerd, dat heb ik getest met een alert in dat if-statement dus de onBlur event zou echt aan het veld gekoppeld moeten worden.

Maar opeens werkt het niet meer, ik heb niets aan de code of aan andere code verandert. En ik heb ook geen Windows updates gedraaid of zo.
In FireFox werkt de onBlur event echter weer wel.

Weet iemand hoe ik toch die onBlur event in IE aan de praat kan krijgen?
Het moet namelijk persé op IE, omdat de klant alleen met deze browser wil werken. En de klant is natuurlijk koning.

Het irritante is dat het wel heeft gewerkt, maar nu ik de webapplicatie opnieuw open werkt het niet meer!

werken met:
document.getElementById(tempNameID).onBlur ...
werkt niet omdat het element nog niet gecreeerd is.

Ik kan wellicht het element creeren en dan pas die onBlur event toevoegen, maar eigenlijk wil ik eerst alle attributen etc. toepassen voordat ik het element aanmaak en ik wil gewoon weten WAAROM die onBlur opeens niet meer werkt.

Ik hoop dat jullie een oplossing weten!

EDIT:

Ik heb even een testscriptje geschreven, ook hierbij werkt het wel in FireFox maar niet in IE. Dit scriptje kun je knippen en plakken om even te testen.

PHP:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript">
<!--
function regelToevoegen(){
    var arrFields = new Array(                  
                        new Array(true, 'veld1', false),
                        new Array(true, 'veld2', true),
                        new Array(true, 'veld3', false));
    var theTable = document.getElementById('theTable');
    var newPos   = theTable.rows.length-1;
    var newRow   = theTable.insertRow(newPos);  
    for(var i=0; i<arrFields.length; i++){
        var newCell = newRow.insertCell(i);
        if(arrFields[i][0]==true){
           var newEl   = document.createElement('input');
           newEl.setAttribute('type', 'text');
           newEl.setAttribute('name', arrFields[i][1]);
           newEl.setAttribute('id', arrFields[i][1]);       
           if(arrFields[i][2]!=null && arrFields[i][2]==true) {
                // javascript-actie toevoegen aan dit veld
                newEl.setAttribute('onBlur', 'alert("onBlur event!")');
           }
           newCell.appendChild(newEl);
        }
    }   
}
//-->
</script>
</head>

<body>
<table id="theTable" width="300" border="0" cellspacing="1" cellpadding="5">
  <tr>
    <th width="30%">kolom 1 </th>
    <th width="30%">kolom 2 </th>
    <th width="30%">kolom 3 </th>
  </tr>
  <tr>
    <td colspan="3"><a href="javascript:void(0);" onClick="javascript:regelToevoegen();">rij toevoegen</a></td>
  </tr>
</table>
</body>
</html>

[ Voor 36% gewijzigd door Verwijderd op 04-06-2004 11:41 ]

vrijdag 4 juni 2004 13:13

Acties:

Annie

amateur megalomaan

Eigenlijk zou je eventhandler toe moeten voegen via addEventListener() en niet via setAttribute(). Nadeel is echter dat dit niet crossbrowser is (MS heeft afaik een eigen uitbreiding op de DOM, attachEvent() oid).
Totdat iedereen volledig volgens DOM werkt kan je beter gewoon de oude vertrouwde manier gebruiken, element.onblur (let op: lowercase!).

Today's subliminal thought is:

vrijdag 4 juni 2004 14:25

Acties:

Verwijderd

Topicstarter

Het is ontzettend ranzig en jammer om het zo dan op te lossen, maar het is niet anders. Ik ga ook nog even naar attachEvent kijken etc.

Bedankt Annie!