Very basic Alphabete Selector

[Napper]

Hi everybody,

 

    I am a bit ashamed to post this but I _know_ that there is a better way than what I have come up here. As you can see, I am more from the PHP side, but sometimes JavaScript is unavoidable. Essentially what I want is to hide all divs with an id starting with "Searchstring_" and then showing the one in the target area. Practical implementation is, that if you click on "A" on the webpage all "A"s unhide, if you click on "B" the "A"s hide again and the "B"s unhide. So... this is what I came up with...

 

function toggle_alpha(target) { 
      obj=(document.all) ? document.all['Searchstring_A'] : document.getElementById('Searchstring_A'); 
      obj.style.display= 'none';
      obj=(document.all) ? document.all['Searchstring_B'] : document.getElementById('Searchstring_B'); 
      obj.style.display= 'none';
      obj=(document.all) ? document.all['Searchstring_C'] : document.getElementById('Searchstring_C'); 
      obj.style.display= 'none';
      obj=(document.all) ? document.all['Searchstring_D'] : document.getElementById('Searchstring_D'); 
      obj.style.display= 'none';
      obj=(document.all) ? document.all['Searchstring_E'] : document.getElementById('Searchstring_E'); 
      obj.style.display= 'none';
      obj=(document.all) ? document.all['Searchstring_F'] : document.getElementById('Searchstring_F'); 
      obj.style.display= 'none';
      obj=(document.all) ? document.all['Searchstring_G'] : document.getElementById('Searchstring_G'); 
      obj.style.display= 'none';
      obj=(document.all) ? document.all['Searchstring_I'] : document.getElementById('Searchstring_I'); 
      obj.style.display= 'none';
      obj=(document.all) ? document.all['Searchstring_J'] : document.getElementById('Searchstring_J'); 
      obj.style.display= 'none';
      obj=(document.all) ? document.all['Searchstring_K'] : document.getElementById('Searchstring_K'); 
      obj.style.display= 'none';
      obj=(document.all) ? document.all['Searchstring_L'] : document.getElementById('Searchstring_L'); 
      obj.style.display= 'none';
      obj=(document.all) ? document.all['Searchstring_M'] : document.getElementById('Searchstring_M'); 
      obj.style.display= 'none';
      obj=(document.all) ? document.all['Searchstring_N'] : document.getElementById('Searchstring_N'); 
      obj.style.display= 'none';
      obj=(document.all) ? document.all['Searchstring_O'] : document.getElementById('Searchstring_O'); 
      obj.style.display= 'none';
      obj=(document.all) ? document.all['Searchstring_P'] : document.getElementById('Searchstring_P'); 
      obj.style.display= 'none';
      obj=(document.all) ? document.all['Searchstring_Q'] : document.getElementById('Searchstring_Q'); 
      obj.style.display= 'none';
      obj=(document.all) ? document.all['Searchstring_R'] : document.getElementById('Searchstring_R'); 
      obj.style.display= 'none';
      obj=(document.all) ? document.all['Searchstring_S'] : document.getElementById('Searchstring_S'); 
      obj.style.display= 'none';
      obj=(document.all) ? document.all['Searchstring_T'] : document.getElementById('Searchstring_T'); 
      obj.style.display= 'none';
      obj=(document.all) ? document.all['Searchstring_U'] : document.getElementById('Searchstring_U'); 
      obj.style.display= 'none';
      obj=(document.all) ? document.all['Searchstring_V'] : document.getElementById('Searchstring_V'); 
      obj.style.display= 'none';
      obj=(document.all) ? document.all['Searchstring_W'] : document.getElementById('Searchstring_W'); 
      obj.style.display= 'none';
      obj=(document.all) ? document.all['Searchstring_Q'] : document.getElementById('Searchstring_Q'); 
      obj.style.display= 'none';
      obj=(document.all) ? document.all['Searchstring_R'] : document.getElementById('Searchstring_R'); 
      obj.style.display= 'none';
      obj=(document.all) ? document.all['Searchstring_S'] : document.getElementById('Searchstring_S'); 
      obj.style.display= 'none';
      obj=(document.all) ? document.all['Searchstring_T'] : document.getElementById('Searchstring_T'); 
      obj.style.display= 'none';
      obj=(document.all) ? document.all['Searchstring_U'] : document.getElementById('Searchstring_U'); 
      obj.style.display= 'none';
      obj=(document.all) ? document.all['Searchstring_V'] : document.getElementById('Searchstring_V'); 
      obj.style.display= 'none';
      obj=(document.all) ? document.all['Searchstring_W'] : document.getElementById('Searchstring_W'); 
      obj.style.display= 'none';
      obj=(document.all) ? document.all['Searchstring_X'] : document.getElementById('Searchstring_X'); 
      obj.style.display= 'none';
      obj=(document.all) ? document.all['Searchstring_Y'] : document.getElementById('Searchstring_Y'); 
      obj.style.display= 'none';
      obj=(document.all) ? document.all['Searchstring_Z'] : document.getElementById('Searchstring_Z'); 
      obj.style.display= 'none';
      obj=(document.all) ? document.all[target] : document.getElementById(target); 
      obj.style.display = 'inline'; 
} 

 

Pretty ugly! How can I - how shall I put it - condense this? 

 

Kind regards,

 

Napper

[fenway]

With a for loop, and a string containing 26 letters.

[nogray]

Something like this

function toggle_alpha(target) {
    var alphabits = "ABCDEF....Z"; // just fillin the blanks
    for (i=0; i<alphabits.length; i++)
        document.getElementById('Searchstring_'+alphabits.charAt(i)).style.display = "none";
    document.getElementById(target).style.display = "inline";
}

Not Tested

[Napper]

Hi fennway, hi nogray,

 

  thank you for your answers. As I started to implement this I realized that I hadn't quite figured this out yet after all. Your solutions work fine for the problem described but it is a bit more complex than I thought after all. Let me elaborate:

 

First of, I do not always have all the letters around. The system checks the database for Keywords and if it finds "A"s it will write a div id "A" and put all the keywords there, and so forth, but if there are no "F"s then it will not write the "F" id, so my menue could look like this

 

A - B - C - D - F - K - L - P - Q - R - S - Z

 

 

Then I have a sort of Keyword Grouping PHP function, so if I have keywords like "color red", "color green", "color blue" it will make a special case of it, changing my Menue like this

 

A - B - C - Color - D - F - K - L - P - Q - R - S - Z

 

All this is done in PHP. Now I essentially want people to be able to click on A and see the As, click on B, hide the As see the Bs, etc. Hence my idea of giving all of those created divs a class "Keywords" and to first hide all of those, then display the one I want with

 

obj=(document.all) ? document.all[target] : document.getElementById(target); 
obj.style.display = 'inline'; 

 

I had that crazy notion that there might be a getEmelemtsByClass(class) function, but there isn't. Browsing the web, I stumbled upon some ideas, but I can't really piece it together, for me to work. I've been trying to put it together, but it's essentially trial and error without real knowledge. Can you see what I am heading for?

 

function hideshow(hideclass,showelement)
{
    var a = [];
    var re = new RegExp('\\b' + hideclass + '\\b');
    var els = document.getElementsByTagName("*");
    for(var i=0,j=els.length; i<j; i++)
        if(re.test(els[i].hideclass)){obj.style.display = 'hide'; <-- As far as I understand it this is where I should tell the script to hide the found item but how?;  };
obj=(document.all) ? document.all[showelement] : document.getElementById(showelement); 
obj.style.display = 'inline'; 
}

 

Can you help me?

 

Kind regards,

 

Napper

[nogray]

You can modify the previous script to output a javascript array from php and use that array to loop through the elements

function toggle_alpha(target) {
    var divs = ['A','B','C','Color','D','F','K','L','P','Q','R','S','Z']; // use php to output this array
    for (i=0; i<divs.length; i++)
        document.getElementById('Searchstring_'+divs[i]).style.display = "none";

    document.getElementById(target).style.display = "inline";
}

 

You can detch the document.all since IE support document.getElementById()

 

Also, you can make a JS object that will update the HTML of the div based on the user click

<script type="text/javascript">
var cont = {};
cont.A = 'this is a'; // use PHP to output these lines
cont.B = 'this is b';
cont.Color = 'this is color';

function update_div(val){
    document.getElementById('div_id').innerHTML = cont[val];
}
</script>
<div id="div_id"></div>

Not tested

[Napper]

Nice! I thought I would need to figure this out in JavaScript only, but to combine the two... Could work - will try.

[fenway]

That is all JS.... document.all is faster than getElementById... and you could go searching for class, but if you know it in advance, there's no point.  If you're missing some letters, you can simply check for the id before you continue.

[Napper]

It's working! It's working!!! Bucking frilliant!!!  So I did what nogray suggestet, plugged the code directly into the PHP file and updated the variables with PHP instead of hunting for classes... Thanks you guys!!! This is awesome!

 

Here is, how it looks like in my PHP file now (I know, there is one comma to much in the output, but I couldn't wait to see if it was working...

 

<script type="text/javascript">
function toggle_alpha(target) {
    var divs = [<?php foreach ($phrases as $key => $line) { ?>'<?php echo $key;?>',<?php }; ?>];
    for (i=0; i<divs.length; i++)
        document.getElementById('Searchstring_'+divs[i]).style.display = "none";
    document.getElementById(target).style.display = "inline";
}

</script>