IMNRC works once but not twice

Question

I'm working a solution for a Campus Map. The basic idea is that I have a xml file in site assets, as well as a .gif. The .gif is shown in a Script Editor web part and uses a map. There is currently only has two area tags (soon to be more) with onclick event that calls a JavaScript function the sends the office number. The function looks in the xml file for the office number and then displays the person in that office with their Lync presence.

It works great!... the first time. If I click the second area of the map, picture and name are not update. The indicator box is, but when I hover over, it still reverts back to the first person that was clicked.

XML structure:

<PERSON>
  <NAME>Someone Name</NAME>
  <EMAIL>[email protected]</EMAIL> 
  <OFFICE>(officeNumber)</OFFICE>
  <USER>(username)</USER> `
</PERSON>

Code in the Script Editor:

<script type="text/javascript">
function loadDoc(office) {
        var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (xhttp.readyState == 4 && xhttp.status == 200) {
                        var xmlDoc = xhttp.responseXML;
                        var x = xmlDoc.getElementsByTagName("PERSON");

                        for (i = 0; i <x.length; i++) { 
                            if (x[i].getElementsByTagName("OFFICE")[0].childNodes[0].nodeValue == office){
                                person = x[i].getElementsByTagName("NAME")[0].childNodes[0].nodeValue;
                                userID = x[i].getElementsByTagName("USER")[0].childNodes[0].nodeValue;
                                email = x[i].getElementsByTagName("EMAIL")[0].childNodes[0].nodeValue;
                            }
                        }

                        picURL = "https://my.<domain>/User%20Photos/Profile%20Pictures/" + userID + "_MThumb.jpg";

                        IMNRC(email, document.getElementById('email1'));
                        IMNRC(email, document.getElementById('email2'));
                        IMNRC(email, document.getElementById('email3'));                            

                        document.getElementById('name').innerHTML = person;
                        document.getElementById('pic').src = picURL;

                        document.getElementById('div1').style.display = 'block';
                    }
                };
                xhttp.open("GET", "../SiteAssets/people.xml", true);
                xhttp.setRequestHeader("If-Modified-Since", new Date().toUTCString());
                xhttp.send();
            }
        </script>
//Code I poached from the web, modified slightly            
<div id="div1" style="display: none;">
<div>
    <span>
        <a href='#' onclick='IMNImageOnClick(event);return false;' class='ms-imnlink' tabIndex='-1'>
            <img id="email1" name='imnmark' title='' ShowOfflinePawn='1' class=' ms-hide' src=
                '/_layouts/15/images/spimn.png?rev=23' alt='User Presence'/>
        </a>
        <span>
            <img id="pic" style="width:62px; height:62px; border:none"/>
        </span>
    </span>
</div>             
<div class="ms-floatLeft ms-descriptiontext">
    <span class="ms-verticalAlignTop ms-noWrap ms-displayInlineBlock">
        <span class='ms-imnSpan'>
            <a href='#' onclick='IMNImageOnClick(event);return false;' class='ms-imnlink ms-spimn-presenceLink'>
                <span class='ms-spimn-presenceWrapper ms-imnImg ms-spimn-imgSize-10x10'>    
                    <img id="email2" name='imnmark' title='' ShowOfflinePawn='1' class='ms-spimn-img ms-spimn-presence-disconnected-10x10x32' src=
                        '/_layouts/15/images/spimn.png?rev=23' alt='User Presence'/>
                </span>
            </a>
        </span>            
        <span id="name" class="ms-noWrap ms-imnSpan">
            <a href='#' onclick='IMNImageOnClick(event);return false;' class='ms-imnlink' tabIndex='-1'>
                <img id="email3" name='imnmark' title='' ShowOfflinePawn='1' class=' ms-hide' src=
                    '/_layouts/15/images/spimn.png?rev=23' alt='User Presence'/>
            </a>
        </span>
    </span>
</div>          

//Start of my HTML
<img src="../SiteAssets/ThirdFlood.jpg" alt="Third Floor" usemap="#campusmap">
<map name="campusmap">
<area shape="rect" coords="0,0,82,126" href="javascript:void(0)" onclick="loadDoc('E239');">
<area shape="rect" coords="82,0,164,126" href="javascript:void(0)" onclick="loadDoc('E237');">
</map>

Can anyone help me understand why this works the first time, no matter which of the two areas I click, but will not update again without reloading the entire page? I'm new to JavaScript, HTML, JSON, and AJAX, so please don't assume I know stuff. :) I have seen some stuff about reloading just a div without reloading the whole page, but can't seem to make one of the solutions work. Thanks!

Answer 1

The issue is caused by document.getElementById('name').innerHTML = person; which will replace all tags within the span having an id of name. When you run through your code the first time you have code which reads from a tag inside of that particular span. The second time the request to read the command document.getElementById('email3') breaks the script because it is no longer there.

Try looking at the HTML where the users name is inputted before you click the map, then once again after. You will see that several elements are missing. I don't see the purpose of the email3 element so I just commented it out and it provides the same effect.

In short:

//IMNRC(email, document.getElementById('email3'));

Just keep in mind that innerHTML will replace all html inside that tag with what you provide. If you need more specific targeting so that you don't erase everything, just put a new element such as a span or div inside with a new ID and target that with innerHTML.