...

View Full Version : Event Handler: Click -- how for multiple items with same classname?



BrightNail
05-08-2009, 05:03 AM
Hello,

I have a row of items. Each item is surrounded by a div that has a classname, lets say "itemStyle". Whenever someone clicks on this div, I want to track it.

the tracking, I already have. I just need to be able to have an event handler for all these items that share the same class. And with this event handler, can I pass in the "id".

for example.

<div class="itemStylesomething" id="989898">item 1</div>
<div class="itemStylesomething" id="45434">item 2</div>
<div class="itemStylesomething" id="090987">item 3</div>
<div class="itemStylesomething" id="34543">item 4</div>
<div class="itemStylesomething" id="2222222">item 5</div>
<div class="itemStylesomething" id="55444">item 6</div>
<div class="itemStylesomething" id="984448">item 7</div>
<div class="itemStylesomething" id="98878">item 8</div>

So, in this case I want to make an event observe for the class "itemStylessomething" -- is this possible.. so that when someone clicks on the item, I then "pass in the ID". I can't do onclicks on the actual div.

So, I could use another parameter - something custom if needed instead of class... ala.
<div class="itemStylesomething" desc="some_desc" id="989898">item 1</div>


Any ideas? Please advise.

TinyScript
05-08-2009, 05:18 AM
getElementsByClassName
https://developer.mozilla.org/en/DOM/document.getElementsByClassName


<HTML>
<HEAD>
<TITLE>test</TITLE>

<script language="JavaScript">
function runit(){
var ArrayitemStylesomething=document.getElementsByClassName('itemStylesomething')
for (i=0;i<ArrayitemStylesomething.length;i++)alert(ArrayitemStylesomething[i].id)
}
</script>

</HEAD>

<BODY onload="runit()">

<div class="itemStylesomething" id="989898">item 1</div>
<div class="itemStylesomething" id="45434">item 2</div>
<div class="itemStylesomething" id="090987">item 3</div>
<div class="itemStylesomething" id="34543">item 4</div>
<div class="itemStylesomething" id="2222222">item 5</div>
<div class="itemStylesomething" id="55444">item 6</div>
<div class="itemStylesomething" id="984448">item 7</div>
<div class="itemStylesomething" id="98878">item 8</div>
</BODY>

</HTML>

adios
05-08-2009, 06:51 AM
getElementsByClassName isn't very well-supported at the moment.

What does 'I can't do onclicks on the actual div' mean - that you can't modify the HTML? Handlers can be assigned programmatically as well. What exactly is the scenario?

BrightNail
05-08-2009, 08:10 AM
meaning... I wouldn't hardcode this into the items.

<div onclick="somefunction()" class="itemStylesomething" id="989898">item 1</div>

I tried this, but it didn't work:

$$('itemStylesomething').observe('click', this.trackClick.bind(this))

perhaps i wasn't explicit enough. I need an "observe" event. But how do let the trackClick function know "which" div is clicked?

BrightNail
05-08-2009, 08:00 PM
bump this.sorry.

thecaligarmo
05-08-2009, 10:18 PM
You could try something like this:



var divs = document.getElementsByTagName('div');
for(i=0; i<divs.length; i++){
if(divs[i].className=='itemStylesomething'){
// Add the onclick event dynamically here
}
}


That should work for your purposes.

itsallkizza
05-08-2009, 10:27 PM
Just use jQuery and something like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css">
.itemStyleSomething
{
background-color: #ffffff;
width: 100px;
height: 20px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
// <![CDATA[

$(document).ready(function()
{
$(".itemStyleSomething").click(function(){alert("hey");});
});

// ]]>
</script>
</head>
<body>

<div class="itemStyleSomething">heey</div>
<div class="itemStyleSomething">click me!</div>

</body>
</html>

BrightNail
05-08-2009, 11:43 PM
That looks good, but I can't bring in any third party libraries, other than prototype/scriptaculous

So my options have to fall in that area.

itsallkizza
05-10-2009, 08:02 AM
You can use my ClassUtil:



function ClassUtil()
{
this.getClass = function(element)
{
return element.className || (element.getAttribute ? element.getAttribute("class") : false) || "";
}
this.setClass = function(element,class_name,overwrite)
{
// without overwrite set, its just like adding a class to the element
var new_class = overwrite ? class_name : (this.getClass(element) ? this.getClass(element)+" "+class_name : class_name);
element.className = new_class;
if (element.setAttribute) element.setAttribute("class",new_class);
}
this.removeClass = function(element,class_name)
{
var elm_class = this.getClass(element);
var classes_to_check = elm_class.split(" ");
var new_class = new Array();
for (var i=0;i<classes_to_check.length;i++)
{
if (class_name != classes_to_check[i]) new_class.push(classes_to_check[i]);
}
this.setClass(element,new_class.join(" "),true);
}
this.checkClass = function(element,class_name)
{
var elm_classes = this.getClass(element).split(" ");
var classes_to_check = class_name.split(" ");
var chk = 0;
for (var i=0;i<classes_to_check.length;i++)
{
for (var c=0;c<elm_classes.length;c++)
{
if (classes_to_check[i] == elm_classes[c])
{
chk++;
break;
}
}
}
return chk == classes_to_check.length;
}
this.getElementsByClassName = function(class_name,opt_root)
{
var root = opt_root || document;
var all = root.getElementsByTagName("*");
var sp = new Array();
for (var i=0;i<all.length;i++)
{
if (this.checkClass(all[i],class_name)) sp.push(all[i]);
}
return sp;
}
}
var cutil = new ClassUtil();

window.onload = function()
{
var all_items = cutil.getElementsByClassName("itemStyleSomething");
for (var i=0;i<all_items.length;i++)
{
all_items[i].onclick = function()
{
alert("hey");
}
}
}

venegal
05-10-2009, 03:15 PM
Those last answers didn't seem to take the original problem into account at all.

First of all, if you already got prototype in there (which is huge), you'll definitely want to use it. $$('itemStylesomething') won't work though, because $$ expects a CSS selector. You will have to change it to $$('.itemStylesomething'). Also, it won't return a DOM element but an array of DOM elements, so you cant call observe on it directly; you will have to invoke it on the whole array, like this:


$$('.itemStylesomething').invoke('observe', 'click', somefunction);

Next, passing in the id.
You don't have to do anything -- an event object is passed in automatically, which you can use to get the id of the clicked element:


function somefunction(event) {
var clickedElement = event.element();
alert(clickedElement.id);
}

Hope the noise in here didn't scare you away already.

BrightNail
05-11-2009, 08:49 PM
perfect. I came acrosss the ".itemStyle.." before seeing this, but the rest of it is hugely helpful. thank you. Yes, you nailed it on the head. Appreciate it.


Those last answers didn't seem to take the original problem into account at all.

First of all, if you already got prototype in there (which is huge), you'll definitely want to use it. $$('itemStylesomething') won't work though, because $$ expects a CSS selector. You will have to change it to $$('.itemStylesomething'). Also, it won't return a DOM element but an array of DOM elements, so you cant call observe on it directly; you will have to invoke it on the whole array, like this:


$$('.itemStylesomething').invoke('observe', 'click', somefunction);

Next, passing in the id.
You don't have to do anything -- an event object is passed in automatically, which you can use to get the id of the clicked element:


function somefunction(event) {
var clickedElement = event.element();
alert(clickedElement.id);
}

Hope the noise in here didn't scare you away already.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum