Question

I am working with a page that has multiple divs that toggle. This function works. A search function was added and this works too.

The problem with the page as it exists currently: The search bar was placed on the “default” div and the results load below the bar into another div that is invisible when empty. The results div is inside this first default div. If you toggle to another div, you lose the default div and can’t get back to it.

For this reason, I moved the search bar to the left navigation where the other toggle links are situated. I also moved the search results div out of the default div to “stand on its own.”

What I am trying to do: Make the search button show the div with the results as well as find the results. Basically, to integrate the search function into the array/toggle function. The search function is in one .js file and the toggle function is in a different .js file.

I keep thinking there must be a way to get “onclick” to call from both .js files so that I don’t have to do a bunch of extra work combining the two functions that already exist and work separately. I am a Javascript newbie learning by examples and haven’t been able to figure this out. I have never seen a working example of this and my searches haven’t produced one.

I would be very grateful for any help. Hope I explained the problem adequately.

Edit: Here is the code I already have for the toggle function.

var ids=new Array('a','b','c',[and so on--search results not added here yet]);

function switchid(id_array){
    hideallids();
    for( var i=0, limit=id_array.length; i < limit; ++i)
        showdiv(id_array[i]);
}

function hideallids(){
    for (var i=0;i<ids.length;i++){
        hidediv(ids[i]);
    }
}

function hidediv(id) {
    //safe function to hide an element with a specified id
    if (document.getElementById) { // DOM3 = IE5, NS6
        document.getElementById(id).style.display = 'none';
    }
    else {
        if (document.layers) { // Netscape 4
            document.id.display = 'none';
        }
        else { // IE 4
            document.all.id.style.display = 'none';
        }
    }
}

function showdiv(id) {//safe function to show an element with a specified id
    if (document.getElementById) { // DOM3 = IE5, NS6
        document.getElementById(id).style.display = 'block';
    }
    else {
        if (document.layers) { // Netscape 4
            document.id.display = 'block';
        }
        else { // IE 4
            document.all.id.style.display = 'block';
        }
    }
}

function initialize(){
    var t = gup("target");
    if( t )
    {
        switchid([t]);
    }
}

function gup( name )
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null ){
      return "";
  } else {
      return results[1];
  }
}

Thanks in advance!

Answer 1

When your toggle function code is loaded, the functions are declared in the Global scope. When you search functions are loaded, they are also in the Global scope. Since they are in the same scope, even though it’s a different file, the toggle functions can be used by your search function, if you include the file with the search function after the file with the toggle function.

TL;DR

function search(...) {
    // do your search stuff
    // when you get a result ID, toggle it from here
    hideallids();
    showdiv(id);
}

I seriously recommend you use meaningful names, objects as namespaces to organize your code, and CamelCase or underscores to mark word boundaries in identifiers. For example:

window.ZESearch = {
    'initialize' : function() { ... },
    'search': function() {
        // Find the node with the desired result
        ZESearch.showResult(id);
    },
    'hideAllResults': function() { ... },
    'hideResult' : function(id) { ... },
    'showResult' : function(id) { ... },
    ...
};
ZESearch.initialize();

Since you’re just learning, I’ve avoided the complexity of the this keyword, presented a simple way to create an object to keep your code organized but added your object to window so you can get it from anywhere in your code.