Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
Password Reminder
Register
| FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old February 13th, 2006, 10:12 PM
Friend of Wrox
 
Join Date: Jun 2004
Location: Alhambra, ca, USA.
Posts: 245
Thanks: 0
Thanked 0 Times in 0 Posts
Default Get ID from Labels that are dynamically generated


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>

Reply With Quote
  #2 (permalink)  
Old February 14th, 2006, 07:48 PM
Friend of Wrox
 
Join Date: Jun 2003
Location: High Wycombe, UK, United Kingdom.
Posts: 344
Thanks: 0
Thanked 1 Time in 1 Post
Default

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.
Reply With Quote
  #3 (permalink)  
Old February 14th, 2006, 11:59 PM
Friend of Wrox
 
Join Date: Jun 2004
Location: Alhambra, ca, USA.
Posts: 245
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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.







Reply With Quote
  #4 (permalink)  
Old February 15th, 2006, 06:22 PM
Friend of Wrox
 
Join Date: Oct 2004
Location: delhi, delhi, India.
Posts: 553
Thanks: 0
Thanked 1 Time in 1 Post
Send a message via MSN to vinod_yadav1919 Send a message via Yahoo to vinod_yadav1919
Default

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
Reply With Quote
  #5 (permalink)  
Old February 15th, 2006, 07:55 PM
Friend of Wrox
 
Join Date: Jun 2003
Location: High Wycombe, UK, United Kingdom.
Posts: 344
Thanks: 0
Thanked 1 Time in 1 Post
Default

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);
}
Reply With Quote
  #6 (permalink)  
Old February 15th, 2006, 10:43 PM
Friend of Wrox
 
Join Date: Jun 2004
Location: Alhambra, ca, USA.
Posts: 245
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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.

Reply With Quote
  #7 (permalink)  
Old February 20th, 2006, 04:52 AM
Friend of Wrox
 
Join Date: Oct 2004
Location: delhi, delhi, India.
Posts: 553
Thanks: 0
Thanked 1 Time in 1 Post
Send a message via MSN to vinod_yadav1919 Send a message via Yahoo to vinod_yadav1919
Default

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
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Dynamically generated dropdownlist csun ASP.NET 1.0 and 1.1 Basics 3 April 8th, 2008 07:38 AM
auto generated mail id vijaypalada ASP.NET 1.0 and 1.1 Basics 2 January 20th, 2007 05:50 PM
dynamically generated form SaraJaneQ Javascript How-To 4 November 9th, 2006 11:11 AM
Get the ID generated from the previous INSERT oper nappiness Classic ASP Basics 3 January 11th, 2006 07:13 PM
dynamically generated submenus elladi Dreamweaver (all versions) 9 December 24th, 2004 08:12 AM



All times are GMT -4. The time now is 06:15 PM.


Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.