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

问题

Okay so I have a YUI Datatable. Most of it is exactly as the how to guide says to construct it.

I have an event that governs changing the rows per page. It's linked to the rows per page drop down element and it saves the value of that drop down as a cookie when the drop down is changed.

var onRPPChange1 = YAHOO.util.Event.addListener("yui-pg0-1-rpp24", "change", getRPP_1);

The problem is that "yui-pg0-1-rpp24" (the ID of the drop down) changes whenever I make updates to my data table. I would like to extend this so that when the page loads it will dynamically insert the ID of that drop down into this event listener so that I don't have to keep editing it after future updates.

I've managed to construct that following that will capture the ID and I can alert it after the table loads, but so far, including the result of this function in the above addListener code isn't working.

var setRPPVars = function() {
        YAHOO.util.Event.onAvailable("rppSpan", this.handleOnAvailable, this); 
    }

var rppSpanIds = new Array();
var rppArray = new Array();

setRPPVars.prototype.handleOnAvailable = function() {
        var spans = document.getElementsByTagName("span");
        var n = 0;
        for(var i=0; i<spans.length; i++){
            if(spans[i].id == "rppSpan"){
                rppSpanIds[n] = spans[i];
                if(n == 0){
                    rppTopID = rppSpanIds[n].firstChild.id;
                    rppArray[0] = rppTopID;
                }
                else if(n==1){
                    rppBottomID = rppSpanIds[n].firstChild.id;
                    rppArray[1] = rppBottomID;
                }
                n++;
            }
        }
        alert(rppTopID);
        alert(rppBottomID);
        alert(rppArray);
    }

var rppEvent = new setRPPVars();

//this is the part that doesn't work:
var onRPPChange0 = YAHOO.util.Event.addListener(rppArray[0], "onchange", getRPP_0);
function getRPP_0(){setRPPVars();oRPP = rppTopID;alert("rppTopID: "+rppTopID); alert("oRPP: "+oRPP);};

Any suggestions you've got would be awesome!

EDIT: For clarity's sake, this element is the rows per page drop down:

<span id="rppSpan">
  <select id="yui-pg0-1-rpp24" class="yui-pg-rpp-options" title="Rows per page">
    <option value="10">10</option>
    <option value="25">25</option>
    <option value="50">50</option>
    <option value="100">100</option>
  </select>
</span>

回答1:

Subscribe to YAHOO.widget.Paginator's rowsPerPageChange instead:

http://developer.yahoo.com/yui/docs/YAHOO.widget.Paginator.html#event_rowsPerPageChange

Then you don't have to find the actual element.

来源：https://stackoverflow.com/questions/12372704/yui-datatable-get-id-of-dom-element-after-page-has-loaded-and-use-it-in-other

标签

dynamic

datatable

yui