您如何使 onStart 和 onComplete 事件适用于 xp:pager答案

【问题标题】：How do you make the onStart and onComplete events work for the xp:pager您如何使 onStart 和 onComplete 事件适用于 xp:pager
【发布时间】：2019-05-07 08:50:52
【问题描述】：

我使用整页覆盖来为我的 XPage 显示加载掩码。这适用于大多数 xp 控件、按钮、组合框、复选框等，方法是添加 CSJS 以调用事件处理程序的 onStart() 和 onComplete() 事件上的覆盖。但是，这不适用于 xp:Pager 控件。 onStart 和 onComplete 事件可用于寻呼机的每个部分，但它们似乎没有激活。我有一些大的重复控件，因此寻呼机刷新可能需要几秒钟，因此覆盖对于让用户知道寻呼机正在工作至关重要。

我已将代码添加到 xp:Pager 元素的 onStart 和 onComplete 中，但它们根本无法运行。加载器适用于所有其他 xp 元素。我尝试了部分刷新和完全更新，但都没有触发 onStart 和 onComplete 事件？

<xp:pager partialRefresh="true" id="pager1" for="displayData">
 <xp:pagerControl type="First" id="pagerControl1">
  <xp:eventHandler event="onclick" submit="true"
  refreshMode="partial" refreshId="questionBlock" 
  onStart="makeButtonInactive('','');" onComplete="makeButtonActive('','');">
  </xp:eventHandler>
 </xp:pagerControl>
 <xp:pagerControl type="Previous" id="pagerControl2">
  <xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="pagerControl1" onStart="makeButtonInactive('','');"
onComplete="makeButtonActive('','');">
  </xp:eventHandler>
 </xp:pagerControl>
 <xp:pagerControl type="Group" id="pagerControl3">
  <xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="pagerControl1" onStart="makeButtonInactive('','');"
onComplete="makeButtonActive('','');">
  </xp:eventHandler>
 </xp:pagerControl>
 <xp:pagerControl type="Next" id="pagerControl5">
  <xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="pagerControl1" onStart="makeButtonInactive('','');"
onComplete="makeButtonActive('','');">
  </xp:eventHandler>
 </xp:pagerControl>
 <xp:pagerControl type="Last" id="pagerControl6">
  <xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="pagerControl1" onStart="makeButtonInactive('','');"
onComplete="makeButtonActive('','');">
 </xp:eventHandler>
 </xp:pagerControl>
</xp:pager>

makeButtonActive() 和 makeButtonInactive() 函数只是用于显示页面叠加层或单个按钮叠加层的 CSJS 函数。在这种情况下，我正在尝试做一个完整的页面覆盖，所以唯一可以运行的代码是

onStart(document.getElementById("overlay").style.display = "block";)

和

onComplete(document.getElementById("overlay").style.display = "none";)

完整的功能是

function makeButtonActive(btnId, innerId) {
if (btnId=="") {
    document.getElementById("overlay").style.display = "none"; //Full Page
} else {
    document.getElementById(btnId).disabled=false;      //Button Only
    document.getElementById(innerId).className=tmpclassName;
}
}

和

function makeButtonInactive(btnId, innerId) {
if (btnId=="") {
    document.getElementById("overlay").style.display = "block"; //Full Page
} else {    
    document.getElementById(btnId).disabled=true; //Button Only
    tmpclassName=document.getElementById(innerId).className;
    document.getElementById(innerId).className="glyphicon glyphicon-refresh gly-sm gly-spin";
}   
}

【问题讨论】：

标签： xpages overlay

【解决方案1】：

我认识的大多数开发人员都使用来自 OpenNTF 的 Fredrik Norling 的 Standby Dialog Custom 控件。您也许可以通过交叉引用找出不同之处，或者直接使用它可能更容易。

如果您使用的是引导主题，请使用this one。如果您使用的是 OneUI 或非标准主题，请使用 this one。

【讨论】：

谢谢 Paul，我会试试看它是否有效，我只想通知用户 XPage 正在工作，所以请稍等，所以这听起来是一个可行的解决方案。