0

I am creating list of <span class="infa9span"><img src="/csm/view/include/images/foldericon.png"/><a id="infa9Service">'+servicename+'</a><br/></span> tags dynamically and appending it to a div

Then using the below map to map a tags attribute to some function

var idMap = {
            //it can be a lot more
            "javaInfo":javaInfo,

            /*infa9 product map*/
            "infa9PMServer":infa9PMServer,
            "infa9Service":infa9Service
        };

This is the click Handler

$('#ds-accordion a').click(function(event) {
    var elementId=$(this).attr("id");
    treeItemClickHandler(elementId);
});

function treeItemClickHandler(id)
{
    (idMap[id])(id);    //Is this usage called 1st class functions?
}

function infa9Service(id)
{  
    alert("i got this "+id);
}

Note: I am using Jquery v1.6.3

But when I click on any of the a tags, it calls the function an does all the operation inside the function, but gives an error Object dosen't support this porperty or method in the treeItemClickHandler function.

I would like to know,

  1. How to avoid getting this error?
  2. Is there a more better approach for something like this?
  3. And Is it 1st class functions that I am using (if so where can i learn more about it)?

Thanks.

Update

How can I pass 2nd parameter?

'<span class="infa9span"><img src="/csm/view/include/images/foldericon.png"/><a id="infa9Service" title='+servicename+'>'+servicename+'</a><br/></span>'

$('#ds-accordion a').click(function(event) {
    var elementId=$(this).attr("id");
    var elementName=$(this).attr("title");
    treeItemClickHandler(elementId,elementName);
});

function treeItemClickHandler(id,name)
{
    idMap[id](id,name);
}

function infa9Service(id,name)
{
  alert(id+", "+name);
}

It gives me infa9Service, undefined

4
  • 1
    It's not clear what you are trying to accomplish. It sounds like you have a function for each element id. Why not just use the function directly as the click handler? Element ids must be unique. Are you using the same id for more than one element?
    – gilly3
    Nov 23, 2011 at 7:12
  • Are the functions defined in the same scope as the idMap? Put alert(id) or console.log(id) as the first line of treeItemClickHandler and confirm that you are getting an id value that you expect. If you are getting a valid id at that point I'd expect it to work. You don't need parentheses around (idMap[id]), but it should work with or without them.
    – nnnnnn
    Nov 23, 2011 at 7:18
  • @gilly3: Yes same id's are are also permitted, as I also need to pass 2 parameters id along with servicename so whenever it's the same function, it will differentiate based on the servicename. Since there are many functions, I thought this map would be an easy way to keep track of all the functions
    – AabinGunz
    Nov 23, 2011 at 8:10
  • @nnnnnn: I removed the parenthesis, also the id's are coming, but how can I pass 2 parameters?
    – AabinGunz
    Nov 23, 2011 at 8:19

1 Answer 1

1

check this out http://jsfiddle.net/ywQMV/4

1)define your functions.

2)define your id map.

html part :

<div id ="ds-accordion">    
    <span class="infa9span">
         <img src="/csm/view/include/images/foldericon.png"/>
         <a id="infa9Service" title='+servicename+'>'+servicename+'</a>
         <br/>
    </span>

js part:

function infa9Service(id, serviceName)
{  
    alert("i got this "+id +" serviceName : " + serviceName);
}


var idMap = {
            "infa9Service":infa9Service
        };

$('#ds-accordion a').click(function(event) {
    var elementId=$(this).attr("id");
    var serviceName = this.title;
    treeItemClickHandler(elementId, serviceName);
});

function treeItemClickHandler(id,serviceName)
{
   // alert(idMap[id])
    (idMap[id])(id,serviceName);    //Is this usage called 1st class functions?
}
4
  • Why do you have to define the functions first? Function statements get hoisted...
    – nnnnnn
    Nov 23, 2011 at 7:22
  • @erimerturk: That's ok, how can I pass servicename to these functions also, as in pass 2 parameters?
    – AabinGunz
    Nov 23, 2011 at 8:07
  • @erimerturk: Please see my Updated part in question, I get undefined
    – AabinGunz
    Nov 23, 2011 at 8:24
  • what is your full html something like this ? <div id ="ds-accordion"> <span class="infa9span"><img src="/csm/view/include/images/foldericon.png"/><a id="infa9Service" title='+servicename+'>'+servicename+'</a><br/></span></div>
    – erimerturk
    Nov 23, 2011 at 8:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.