AJAX 'getElementById()' problem

[cyqotiq]

First, let me state that this is not necessarily a Firefox problem, as I haven't fully tested in IE just yet.

Second, let me state that this is not the typical "getElementById not working Firefox" post.

Third, there are pieces of this code that I am not at liberty to display, change, discuss, or re-implement. As far as this question is concerned, this means that (1) I cannot use 3rd party libraries, which is why I've implemented my own Ajax script... besides, it's simple and effective... and (2) I know coding HTML tables to display layout is a snafu, but since I'm not alone on this, the tables won out over DIVs.

And finally... the scenario:

I've got something over 2000 lines of code (HTML & JS) that pertains to this, but using alert() and various server-side debugging methods, I've come to the comfortable realization that my problem lies in this function within my Ajax function.

/* This function is called asynchronously when the server returns a result from an AJAX request */
function ajaxRequestCallback(){
   if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
      var str = xmlHttp.responseText;
      var strparts = str.split( "&" );
      var numParts = strparts.length;
      for( var j = 0; j < numParts; j++ ) {
         var item = strparts[j];
         var elems = item.split( ":" );
         var name = elems[0];
         var value = Base64Decode( elems[1] );
 
         /* The situation in question will display "infoUserName" for 'name' */
         alert( "Getting object with ID '" + name + "'." );
 
         /* The problem is here */
         var o = document.getElementById( name );
 
         /* 'if' removed for testing using Firefox's error console */
         /* if( o ) { */
            /* Firefox Error Console says 'o is null' at this point.
            o.innerHTML = value;
         /* } */
      }
   }
}

And the coresponding section of HTML (Note that this is produced by PHP, but it is produced this same way every time):

    <table class='bodyContainer'>
     <tr>
      <td style='text-align: right; vertical-align: top; width: 100px;'>
       <label for='tbUserName'>User Name:</label></td>
      <td style='text-align: left; vertical-align: top; width: 197px;'>
       <input id='tbUserName' name='tbUserName' type='text' OnKeyUp='checkUserName();' class='textbox' style='width: 193px' value='' /></td>
      <td style='text-align: left; vertical-align: top; width: 297px;'>
 
 
       <!-- Here is the element being retrieved from the JavaScript -->
       <span id='infoUserName'>User name must be supplied.</span></td>
 
 
     </tr>
     <tr>
      <td style='text-align: right; vertical-align: top; width: 100px;'>
       <label for='tbPassword'>Password:</label></td>
      <td style='text-align: left; vertical-align: top; width: 197px;'>
       <input id='tbPassword' name='tbPassword' type='password' OnKeyUp='checkPasswd();' class='textbox' style='width: 193px' /></td>
      <td style='text-align: left; vertical-align: top; width: 297px;'>
       <span id='infoPassword'>Your password is too short</span></td>
     </tr>
     <!-- More rows occur, but they work perfectly! -->
    </table>
 

Note that the 'tbPassword' input calls the 'checkPasswd()' function, which uses getElementById( 'tbPassword' ), and it works with no problems. My problem is just in the javascript code up top. The HTML in bold shows where the element 'infoUserName' exists.

Any thoughts?

I apologize for not being able to provide a 100% working model here. It may be noteworthy for recreating this problem that the checkPasswd function just checks for length and compares against a RegEx for 'strong' vs. 'weak' and checkUserName() initiates the AJAX request to see if the UserName exists already.

TIA
Cy

[cyqotiq]

After posting the original post, I went and changed the javascript to show alerts whenever 'o' is null and removed the comments around the 'if' block. Now, the javascript looks like this:

function stateChanged(){
    if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
        var str = xmlHttp.responseText;
        var strparts = str.split( "&" );
        var numParts = strparts.length;
        for( var i = 0; i < numParts; i++ ) {
            var item = strparts[i];
            var elems = item.split( ":" );
            var name = elems[0];
            var value = Base64Decode( elems[1] );
            alert( "Getting object with ID '" + name + "'." );
 
            var o = document.getElementById( name );
            if (o) {
                o.innerHTML = value;
            } else {
                alert("Variable 'o' is null!");
            }
        }
    }
}
 

The result is that both Firefox and IE are showing 'infoUserName' as the element ID and both are showing 'o is null'.

I thought this additional information might help someone to identify any potential problems.

Again, TIA
Cy

[acoder]

What does the server-side script return? Can you give an example string?

[cyqotiq]

The server side script returns a string that is in the format:

elementId2:[Base64_Value]&elementId2:[Base64_Value]

If you look at the original javascript function, the first thing that happens is the string is split on the '&', leaving "elementId:[Base64 Value]"

When the value is decoded, it's in HTML format. I've used Alert() to make sure these values are correct, and they do come back. So with regards to my original question, the value of the query was:

        var strparts = str.split( "&" );
        var numParts = strparts.length;
 

In the above code, strparts evaluates to str (since there's no '&' in the query).
'numParts' evaluates to '1'.

            var item = strparts[i];
            var elems = item.split( ":" );
            var name = elems[0];
            var value = Base64Decode( elems[1] );
 
/* After running, we have:
   item = (string:) 'infoUserName:{base64_string}'
   elems = (array:) [0] => 'infoUserName', [1] => '{base64_string}'
   name = (string:) 'infoUserName'
   value = (string:) 'This user name is available.'
*/
 

So, in short, 'name' and 'value' are what we're using in the failing code. 'value' is just what the element will display, and 'name' is the ID of the element. With my alert() tests, the ID stored in 'name' was the exact same as the ID written to the HTML file. But the assignment fails:

            var o = document.getElementById( name );
            if (o) {
                o.innerHTML = value;
            } else {
                alert("Variable 'o' is null!");
            }
 

This shows only "Variable 'o' is null!" in both IE and Firefox.

Thank you for looking at this. If I can provide any more information, please let me know.

Cy

[acoder]

To rule out the possibility that it's grabbing the wrong element, try replacing:

var o = document.getElementById( name );

with

var o = document.getElementById("infoUserName");

[cyqotiq]

To rule out the possibility that it's grabbing the wrong element, try replacing:

var o = document.getElementById( name );

with

var o = document.getElementById("infoUserName");

I took your advice, and hard-coded 'infoUserName'. This actually worked, so obviously it's not using the same text, even though the alert test says it's the same thing. I'm going to guess it's a binary issue. Something in the process of dealing with base64 strings converts ASCII to UTF-8. Would this really make a difference?

Thanks for getting me pointed in the right direction.

Cy

[cyqotiq]

Alright, I've done some testing to check into the UTF-8 theory. Ultimately, the answer is 'No, it's not in UTF-8'. However, there are 6 bytes coming back at the beginning of my Ajax response text. These bytes are EF BB BF EF BB BF

Does this look familiar to anyone? These 6 bytes are the ONLY bytes in my response text that I did not explicitly send back from the server. I can strip them out, but I want/need to know a few details first. To begin with, what do they mean? Should I use them for anything? Are they significant? Are the always only 6-bytes long?

For now, I'll just strip them out until they either cause a problem or I can find out more about them. Until then... thanks for all the help.
Cy

[cyqotiq]

Ok, I officially feel like a dunce.

I guess this is a typical solution pattern.
Step 1: Have problem.
Step 2: Post problem.
Step 3: Publicly humiliate yourself.
Step 4: Find solution.

So, the EF BB BF pattern is the BOM for UTF-8... I should have recognized this, since I'm familiar with BOM patterns, but I was thrown by the fact that this was present in the DECODED text (ASCII).

Solution: Amend my decode_utf8() function to strip the BOM.

Cy

[acoder]

Hehe, not necessarily step 3. This thread may well prove useful to someone.

Glad you got it working and thanks for posting!