Search for string in multiple html files with jquery

Question

I'll try to explain my problem with few words. I have an HTML with various iframes. In one iframe there is a Table of Contents (TOC) and in an other the content of the corresponding element highlighted in the TOC. Since there are various TOCs, it might happen that by clicking on a link, we'll be taken to a topic which belongs to another TOC, and therefore I want the TOC frame to be reloaded with the proper TOC. To do so, since each topic has a unique id within the TOC, I perform a search of the id of the topic loaded in the main frame accross all the TOCs and when I find the wanted TOC, I load it in the TOC frame.

The code I've written so far is the seguent:

/*function called on load of each topic - it gets the topic unique id as parameter*/
function highlight(id) {
  /*the names of the HTML files containing the different tocs*/
  var tocs = ["toc.htm", "toc_documentazione.htm", "toc_flussiesteri.htm", "toc_garante.htm", "toc_legittimita.htm", "toc_normativa.htm", "toc_settori.htm", "toc_sicurezza.htm", "toc_sistemadp.htm", "toc_vistaarticolato.htm"]
  var i = 0;
  /*search within the different TOCs until you find a correspondence or there are no more TOCs*/
  while (!changeTOC(tocs[i], "a" + id) && i < tocs.length) {
    i = i + 1;
  }

  /*this line is probably wrong but the idea is to load the found TOC in the appropriate frame*/
  $(content).load(tocs[i - 1] + " #content");

}


/*function using ajax to search the id into the HTML file passed as parameter (newToc) returning the search outcome*/
function changeTOC(newToc, id) {

  var found = false;
  $.get(newToc, "html").done(
    function(temp_toc) {
      /*if the HTML contains the id we search for we return true*/
      if (temp_toc.indexOf(id) != -1)
        found = true;
    });

  /*else we return false*/
  return found;
} 

The problem I have is with the while cycle I use to search through the various TOC files. I did some debugging and, regardless from the fact the TOC containing the id I'm searching for is at the first position, the while extecutes 10 cycles and only at the very last it tells me that it has found the matching TOC, which is indeed the first one in the list.

Hope I've been able to make myself clear. Thanks for your help

Answer 1

I finally managed to get this done by using the ajax call with syncronus set to true. I'm not posting here all the code cause it would be confusing, but below is what I changed compared to the code written above and now everything works just fine. Maybe it's not optimal in terms of performance but I don't have this concern, so I'm happy with it :) Hope this can help others.

/*function called on load of each topic - it gets the topic unique id as parameter*/

function highlight(id) {
var tmpVal = sessionStorage.getItem('key');
//we check if there is another element in the TOC currently highlighted in bold, if so we remove the highlight
if(tmpVal) {
    var tmpEle=parent.window.frames[0].document.getElementById('a'+tmpVal);
    if (tmpEle) {
        tmpEle.className='';
    }
}

//loop through all TOCs to find the one containing the selected topic
var tocs = ["toc.htm","toc_documentazione.htm","toc_flussiesteri.htm","toc_garante.htm","toc_legittimita.htm","toc_normativa.htm","toc_settori.htm","toc_sicurezza.htm","toc_sistemadp.htm","toc_vistaarticolato.htm"];     
var i=0;
while (!changeTOC(tocs[i],"a"+id)&&i<tocs.length){
    i=i+1;
}

//get currently loaded TOC
var currentToc=$("#toc_iframe",parent.document).attr("src");
var indexCurrentTOC=tocs.indexOf(currentToc);
//we check if the matching TOC is the current one, if so we don't change anything
if(!changeTOC(tocs[indexCurrentTOC],"a"+id)){
    $("#toc_iframe",parent.document).attr("src",tocs[i]);
}
var myElt=parent.window.frames[0].document.getElementById('a'+id);
//highlight current element in the TOC
myElt.focus();
myElt.className+=' active';
scrollTo(myElt.offsetLeft-48, myElt.offsetTop-(parent.document.body.clientHeight/3));
sessionStorage.setItem("key", id);
}

//searches for the element with given id into the toc file newToc 
function changeTOC(newToc,id){

var found = false;
$.ajax({
    url: newToc,
    async: false,
    context: document.body
    }).done(function(temp_toc) {
                if(temp_toc.indexOf(id)!=-1){
                    found = true;
                }
    });
return found;

}