Question

I’m reposting this question from an earlier post because when I originally asked it, it was unclear. I wasn’t sure what I actually needed, and that caused the responses I was getting to be not applicable.

Original: YUI Datatable – Get ID of DOM Element after page has loaded and use it in other YUI events

---

My question is this:

I have a YUI Datatable. I have a rows per page drop down. I need to create an event, or event handler, or utilize one that exists, that will handle the following:

When(ever) the drop down displaying the rows per page changes, the event handler should get the id of that drop down and pass it to another function to use as an argument. My datatable has two rowsPerPageDropDown (aka rppDD) elements. I need this functional for both of them.

Preferably, it would also do this when the page loads, but for now that’s extra credit.

I know that the id of “top” rppDD element is currently “yui-pg0-0-rpp12” but my problem extends from the fact that if I add any code to this page, that id will change (to “-rpp13” or something similar). That throws off the rest of my functions. So I want to just grab the id (whatever it may be) at run time and use it that way rather than hard coding it in.

The second function will run immediately after the drop down changes. It will use the id of the drop down to get the currently selected value and assign it to a variable to be used with a third function.

---

Here’s what I have so far: In the earlier thread, it was suggested that I use the event rowsPerPageChange. This works only to a certain degree. Placing a simple “hello world” alert within that event handler proves that it only alerts when the page loads. Whenever I click and change the drop down to something else it no longer alerts.

Below is the function(s) and code I’m using to test this:

var getRppValue = function() {
    YAHOO.util.Event.addListener("rowsPerPageChange", getRppValue.prototype.handleOnAvailable()); 
}

var rppDD_ID = "";

getRppValue.prototype.handleOnAvailable = function() {
    alert("hello world");
    alert(this.id); //should alert "yui-pg0-0-rpp12"
    //rppValue = this.id;
}

var rppEvent = new getRppValue();

Near as I can tell this event only fires/gets handled when the page initially loads. At that time, the first alert alerts “hello world” as expected. The second alert shows “undefined”. The intention is that the second alert should alert whatever the id of the rppDD element is (“yui-pg0-0-rpp12”).

For reference, the function I plan on passing the id into is as follows. It is intended as I mentioned above to assign the current value of [the|either|both] rppDD element(s) to the variable oRPP. It then calls the endDrag() function (which utilizes oRPP):

If I were to hard code the id it would be:

function getRPP_0(){oRPP = g("yui-pg0-0-rpp12").value;endDrag();};

I want it to by dynamic:

function getRPP_0(){oRPP = g(rppDD_ID).value;endDrag();};

Any help / suggestions are appreciated.

Answer 1

As we saw on the chat, you had this:

var onRPPChange0 = YAHOO.util.Event.addListener("yui-pg0-0-rpp12", "change", getRPP_0); 
var onRPPChange1 = YAHOO.util.Event.addListener("yui-pg0-1-rpp24", "change", getRPP_1); 
function getRPP_0(){oRPP = g("yui-pg0-0-rpp12").value;endDrag();}; 
function getRPP_1(){oRPP = g("yui-pg0-1-rpp24").value;endDrag();};

And you wanted to be able to access the element being changed in the function.

Fortunately, event handlers provide the element on which the event is happening in the this object.

So, this works:

var onRPPChange0 = YAHOO.util.Event.addListener(
    "yui-pg0-0-rpp12", "change", function() {

    // Notice that "this" is the element on which the event was fired
    oRPP = this.value;

    endDrag();
};

This way, you can generalize your function easily without hardcoding the IDs.