Get ID from Labels that are dynamically generated

bekim · February 13th, 2006, 10:12 PM

Hello
I have a list of Labels that are dynamically generated.
When the user clicks on the Label, the GetSelectedItem Function needs to get the Label ID like "Label1" or "Label2" depending on which label was clicked. How do I do this?

<LABEL ID="Label1" onclick="GetSelectedItem()" class="eighttextun">
Lot 2: Draped Bust Half Cent. 1804. C-13 R1. NGC MS 65 RB</LABEL>
<LABEL ID="Label2" onclick="GetSelectedItem()" class="eighttextun">
Lot 3: Classic Head Half Cent. 1809. C-3 R1. NGC MS66 Br</LABEL>

Greg Griffiths · February 14th, 2006, 07:48 PM

I'd recommend passing a parameter to your function, with the parameter being either the id itself or a reference to the current item (i.e. 'this').

e.g.

<LABEL ID="Label1" onclick="GetSelectedItem(this)" class="eighttextun">
Lot 2: Draped Bust Half Cent. 1804. C-13 R1. NGC MS 65 RB</LABEL>

where this.id returns Label1

or

<LABEL ID="Label1" onclick="GetSelectedItem('label1')" class="eighttextun">
Lot 2: Draped Bust Half Cent. 1804. C-13 R1. NGC MS 65 RB</LABEL>

where document.getElementById('<param name>') for example returns a reference to this node.

bekim · February 14th, 2006, 11:59 PM

Greg Griffiths,
what does "where document.getElementById('<param name>') for example returns a reference to this node" exactly mean?

There is about 50 labels that are dynamically generated, so I can't use "<LABEL ID="Label1" onclick="GetSelectedItem('label1')" class="eighttextun"></LABEL>"

I am trying to use: "<LABEL ID="Label1" onclick="GetSelectedItem(this)" class="eighttextun"></LABEL> "
What am I suppose to use for <param name>???
Thank you.

vinod_yadav1919 · February 15th, 2006, 06:22 PM

Hii bekim!!

Solution is below
I have checked this code in IE,working fine.
Click on the Addlabel button to add more labels,click on the label to get their id,value etc.
Similary you can pass more values to the check function
Hope this will help you

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
var idval
idval=1
    function writeElement() {

        var sp = document.getElementById("divid");

       //sp.appendChild(document.createTextNode("Pick me1 "));

        var input = document.createElement("LABEL");
        input.id ="labelid"+idval;
    input.name="myidname"+idval
        input.innerHTML="Label Value For Click Event"+idval
        input.onclick = function() { checkValue(this) };

        sp.appendChild(input);
        sp.appendChild(document.createElement("BR"));
        sp.appendChild(document.createElement("BR"));
        sp.appendChild(document.createElement("BR"));
        idval++
    }

function checkValue(objlocation)
{
alert("Object ID---"+objlocation.id)
alert("Object Name---"+objlocation.name)
alert("Object value"+objlocation.innerHTML)
}

</script>
</head>

<body onLoad="writeElement();">
<form name="bob">
<div id="divid">
</div>

<input type=button onclick="writeElement()" value="AddLabels">
</form>
</body>
</html>

Cheers :)

vinod

Greg Griffiths · February 15th, 2006, 07:55 PM

Bekim,
   My reference in the first example was down to the fact that you are dynamically generating the LABELS and assigning the ID's as you create them, in this case why can you not also dynamically populate a parameter into the GetSelectedItem function's parameter list as well ?

As for the other option, here is a fuller example :

<LABEL ID="Label1" onclick="GetSelectedItem('label1')" class="eighttextun">
Lot 2: Draped Bust Half Cent. 1804. C-13 R1. NGC MS 65 RB</LABEL>

function GetSelectedItem(theField)
{
   var selectedField=document.getElementById(theField);
   alert(selectedField.innerHTML);
}

bekim · February 15th, 2006, 10:43 PM

vinod_yadav1919
Thank you so much for your post. I am new to Javascript.
The Labels are generated at server inside a datagrid and there is paging involved. Therefore, on the first page, it shows ID=LABEL1 thru ID=LABEL50, but page two shows ID=LABEL51 thru ID= LABEL100 and so on.
Is there any way to pass the the ID Name from <LABEL ID="LABELNUMBER"> directly rather than setting a count of 1 and adding +1.
There are hundreds of labels generated so I need to find a way to get the LABEL ID Value.
Thank you.

vinod_yadav1919 · February 20th, 2006, 04:52 AM

Hii Bekim
Offcourse you can achieve this with ASP.net also,
since you know how many labels are shown by your data grid,
and from where your labels starts say for first page 1, for second page 51.

on page load call a javascript function that adds a eventhandler in this example
addEventHandlerTemp()
this event handler add onclick event

For demo purpose i have provided startindex and noof labels ,you can try it
for startindex,nooflabels you can use your hidden fields or you asp:label control
with id startindex,nooflabels respectively

Hope this will help you

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>

var startindex
var nooflabels
var totallabels

function writeElement()
    {
        startindex=document.getElementById("startindex").v alue
        nooflabels=document.getElementById("nooflabels").v alue
        totallabels=Number(nooflabels)+Number(startindex)
        var sp = document.getElementById("divid");
        sp.innerHTML=""

        for(i=startindex;i<=totallabels;i++)
        {
        var input = document.createElement("LABEL");
        input.id ="labelid"+i;
        input.name="myidname"+i
        input.innerHTML="Label Value For Click Event Number"+i

        sp.appendChild(input);
        sp.appendChild(document.createElement("BR"));
        sp.appendChild(document.createElement("BR"));
        sp.appendChild(document.createElement("BR"));
        }
        addEventHandlerTemp();
}

function addEventHandlerTemp()
{
for(i=startindex;i<=totallabels;i++)
{
  var sp = document.getElementById("labelid"+i);
  sp.onclick = function() { checkValue(this) };
}
}

function checkValue(objlocation)
{
alert("Object ID---"+objlocation.id)
alert("Object Name---"+objlocation.name)
alert("Object value"+objlocation.innerHTML)
}

</script>
</head>

<body>

<form name="myform">
Generate ID for Labels<br>

StartID Index<input type=text id="startindex"><br>
Number of Lables<input type=text id="nooflabels"><br>

<div id="divid">
</div>

<input type=button onclick="writeElement()" value="AddLabels">

</form>
</body>
</html>

Cheers :)

vinod