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

Question

我使用整页叠加来显示我的 XPage 的加载掩码。通过添加 CSJS 调用事件处理程序的 onStart() 和 onComplete() 事件上的覆盖，这对大多数 xp 控件、按钮、组合框、复选框等都适用。但是，这不适用于 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";
}   
}

Answer 1

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

如果您使用的是 bootstrap 主题，请使用 this one. If you're using OneUI or non-standard theme, use this one。

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

How do you make the onStart and onComplete events work for the xp:pager

xpages

overlay