YUI Datatable - 在页面加载后获取DOM元素的ID，并在其他YUI事件中使用它 [英] YUI Datatable - Get ID of DOM Element after page has loaded and use it in other YUI events

问题描述

好吧，我有一个YUI Datatable。大部分都是如何指导建构的。

我有一个事件来管理每页更改行。它链接到每页下拉列表的行，并且当下拉列表被更改时，将该下拉列表的值保存为Cookie。

  var onRPPChange1 = YAHOO.util.Event.addListener（yui-pg0-1-rpp24，change，getRPP_1）​​; 
  

问题是yui-pg0-1-rpp24（下拉菜单的ID）当我更新我的数据表时更改。我想扩展这个，以便当页面加载时，它将动态地将该下拉列表的ID插入到此事件侦听器中，以便在将来更新后不必继续编辑它。

我已经设法构造了以下内容将捕获ID，并且我可以在表加载后提醒它，但到目前为止，包括上述addListener代码中的此函数的结果不起作用。 / p>

  var setRPPVars = function（）{
 YAHOO.util.Event.onAvailable（rppSpan，this.handleOnAvailable，这个）; 
} 
 
 var rppSpanIds = new Array（）; 
 var rppArray = new Array（）; 
 
 setRPPVars.prototype.handleOnAvailable = function（）{
 var spans = document.getElementsByTagName（span）; 
 var n = 0; $（$ i $）$ {
 if（span i = 0; i< spans.length; i ++）{
 if（spans [i] .id ==rppSpan）{
 rppSpanIds [n] = spans [一世]; 
 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（）; 
 
 //这是不起作用的部分：
 var onRPPChange0 = YAHOO.util.Event.addListener（rppArray [0]，onchange，getRPP_0）; 
函数getRPP_0（）{setRPPVars（）; oRPP = rppTopID; alert（rppTopID：+ rppTopID）; alert（oRPP：+ oRPP）;}; 
  

您有任何建议将会非常棒！

编辑：为了清楚起见，这个元素是每页下拉列的行：

 < span id = rppSpan> 
< select id =yui-pg0-1-rpp24class =yui-pg-rpp-optionstitle =每页行数> 
< option value =10> 10< / option> 
< option value =25> 25< / option> 
< option value =50> 50< / option> 
< option value =100> 100< / option> 
< / select> 
< / span> 
  

解决方案

订阅YAHOO.widget.Paginator的rowsPerPageChange： / p>

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

然后你不必找到实际元素。

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>

解决方案

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.

这篇关于YUI Datatable - 在页面加载后获取DOM元素的ID，并在其他YUI事件中使用它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！