?
Solved

Solving a Javascript Issue

Posted on 2014-08-07
3
Medium Priority
?
121 Views
Last Modified: 2014-08-08
I am using a code like this:

<a href="javascript:void(0);" onclick="showall('#theid#');">Show Range</a>
<br>
<div class="abc">
<cfloop from="1" to="10" index="k">
<dv id="#theid#_#k#" style="display:none;">
xx.ss<br>
</div>
</cfloop>

Open in new window



now i am using a function like this javascript:

function showall(id) {
  try {
    var counter = 10;
    for(counter=1;counter<=10;counter++) {
      document.getElementById(id+'_'+counter).style.display='block';
    }
  }
  catch(exception) {}
}

Open in new window


so it is working fine.

The issue is if i do not use try catch, it wil throw an error, the cfloop has only 5 elements, so to ignore that i used try and catch.

what could be the best possible alternative way to use this kind of thing, i had to change it, i am not sure what should i do.

he elements withing loop can be 5,3,4. They are not static

so guide me

Thanks
0
Comment
  • 3
3 Comments
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 40248098
jQuery can help you in here.
You can search for elements which ID starts with the id argument you receive:
function showall(id) {
     $('[id^="' + id + '_"]').show();
};

Open in new window

I wrote this directly here but I think it's correct :)
0
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 40248104
Otherwise you can also rework your code like:
function showall(id) {
    var counter = 10;
    for(counter=1;counter<=10;counter++) {
      val elem = document.getElementById(id+'_'+counter);
      if(elem){
        elem.style.display='block';
      }
    }
}

Open in new window

0
 
LVL 30

Accepted Solution

by:
Alexandre Simões earned 2000 total points
ID: 40248115
So here's another academic version :)
http://jsfiddle.net/AlexCode/sdtg3n51/

Basically you just use the container id and loop through all its children nodes.
function showAll(id){
    var container = document.getElementById('container'),
        childElements = container.childNodes;
    
    for (var i = childElements.length - 1; i >= 0; i--) {
      var elem = childElements[i];
        if(elem.id && elem.id.indexOf(id + '_') === 0){
            elem.style.display='block';
        }
    };
}

Open in new window

Just choose the one you like best! :)
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
Recently while working on a project I got a very annoying cfdocument has no body error message. I had never seen this error before. So I checked the code. The code was pretty simple; it was Just showing me the cfdocumnt tag and inside that tag a …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question