Extension Library Dialog Control - xpages

Question

I would think this blog post, by Mark Hughes, would no longer be relevant in 9.0.1 FP1 SHF309 and ExtLib version 9.0.1v00_10_20141105-0922. However, I am using the ExtLib dialog control that is 4 panels deep and the only way I can get it to display is with a Full Update. It is always appearing outside the form tags as shown in this screenshot, , and even if I create a CSS class to set the position to absolute and z-index to 950 it won't show with a partial refresh.
The dialog is actually within a custom control, ccSettleAtmConfirmation, towards the bottom of the 'settlementPanel'. I have tried to do a partial refresh of each of the four panels and another partial refresh in the onComplete with no luck. To make things a bit easier this is the SSJS in the button:
try {
sessionScope.infoMsg = "";
//Did you confirm settlement amount?
var now:Date = #Now();
var nineAM:Date = #Date(now.getFullYear(), now.getMonth()+1, now.getDate(), 9, 0, 0) //Runs on the server, which is always in VA (ET)
if(viewScope.settlementOptions == "Initiate Settlement"){
if(now.UTC() <= nineAM.UTC()){
sessionScope.infoMsg = "You cannot initiate settlement of " + atmBean.atmID + " as the current time is prior or equal to 0900 ET";
} else { //SRD FR103072, FR79121
var sttlDialog = getComponent("sttlDlg");
sttlDialog.show();
}
}
} catch (e) {
logInfo("Settlement: " + e.getLocalizedMessage());
sessionScope.infoMsg = "Error trying to open confirmation prompt. Please try again.";
}
Code for the 4 layers of panels which contain the button which shows the dialog.
<xp:panel id="panel1">
<xp:panel id="panel2">
<xp:panel id="panel3">
<xp:panel id="settlementPanel">
<xp:this.rendered><![CDATA[#{javascript:viewScope.operation == "Settlement"}]]></xp:this.rendered>
<xp:table style="width:100%">
<xp:tr>
<xp:td style="width:3%" />
<xp:td style="width:81.0%">
<xp:table style="width:100%">
<xp:tr>
<xp:td style="width:40%" styleClass="home-table-cell">
<xp:label value="Today's Settlement Amount:"
styleClass="home-label" id="label9" />
</xp:td>
<xp:td>
<xp:inputText id="inputText6" style="font-size:12pt;width:8em"
value="#{atmBean.atmTodaySettlementAmt}" styleClass="non-editable clear-on-cancel">
</xp:inputText>
<!-- <xp:message id="message1"></xp:message>-->
</xp:td>
</xp:tr>
<xp:tr>
<xp:td styleClass="home-table-cell" style="width:40%">
<xp:label value="Options for Settlement:"
styleClass="home-label" id="label10" />
</xp:td>
<xp:td style="width:60%">
<script>
$(function()
{$('input.currency-mask').numericInput();});
</script>
<xp:comboBox id="comboBox1"
style="font-family:Calibri;font-size:12pt;width:16em"
styleClass="editable clear-on-cancel" value="#{viewScope.settlementOptions}"
defaultValue="--">
<xp:selectItems id="selectItems2">
<xp:this.value><![CDATA[#{javascript://keywordBean.getReportCombobox();
if(atmBean.atmStatus == "IN PROGRESS") {
//viewScope.put('settlementOptions',#Trim(keywordBean.getVector("SettlementInProgressAtmStatus")));
return #Trim(keywordBean.getVector("SettlementInProgressAtmStatus"));
} else if(atmBean.atmStatus == "OPEN" || atmBean.atmStatus == "CLOSED" || atmBean.atmStatus == "WOUNDED") {
//viewScope.put('settlementOptions',#Trim(keywordBean.getVector("SettlementOpenClosedWoundedAtmStatus")));
return #Trim(keywordBean.getVector("SettlementOpenClosedWoundedAtmStatus"));
} else if(atmBean.atmStatus == "MASS CLOSEOUT IN PROGRESS") {
//viewScope.put('settlementOptions',#Trim(keywordBean.getVector("SettlementMassCloseoutInProgressAtmStatus")));
return #Trim(keywordBean.getVector("SettlementMassCloseoutInProgressAtmStatus"));
}
return #Trim(keywordBean.getVector("SettlementOptions"));}]]></xp:this.value>
</xp:selectItems>
<xp:eventHandler event="onchange" submit="true"
refreshMode="partial" refreshId="settlementPanel">
<xp:this.onComplete><![CDATA[XSP.partialRefreshPost("#{id:infoMessagePanel}",{onStart:null,onError:null,onComplete:null});]]></xp:this.onComplete>
</xp:eventHandler>
</xp:comboBox>
</xp:td>
</xp:tr>
<xp:tr>
<xp:this.rendered><![CDATA[#{javascript:var currDt:java.util.Date = new java.util.Date();
var busDt:java.util.Date = atmBean.atmBusinessDate;
if(atmBean.atmStatus == "OPEN" || atmBean.atmStatus == "CLOSED" || atmBean.atmStatus == "WOUNDED") {
if(viewScope.get('settlementOptions') == "Initiate Settlement") {
if(#Date(currDt).equals(#Date(busDt))) {
return true;
} else {
// sessionScope.infoMsg = "The Settlement function cannot be performed on this ATM because " + atmBean.atmID + "'s Business Date is greater than the current date";
// return false;
return true;
}
}
}}]]></xp:this.rendered>
<xp:td
styleClass="home-table-cell" style="width:40%">
<xp:label
value="Is the Settlement Amount correct?"
styleClass="home-label" id="label11" />
</xp:td>
<xp:td style="width:60%">
<xp:radioGroup
id="radioGroup2" style="font-family:Calibri;font-size:12pt"
value="#{viewScope.settlementCorrectYN}"
styleClass="clear-on-cancel">
<xp:selectItem
itemLabel="Yes" itemValue="Y" id="selectItem6" />
<xp:selectItem
itemLabel="No" itemValue="N" id="selectItem7" />
<xp:eventHandler
event="onclick" submit="true" refreshMode="partial"
refreshId="settlementPanel" id="eventHandler4">
<xp:this.script><![CDATA[$(".amtRec").val(""); //works in IE
//$(".amtRec").text(""); //works in Chrome ???
//this is needed because of the way that the jQuery plugin works]]></xp:this.script>
<xp:this.onComplete><![CDATA[$(".amtRec").numericInput();]]></xp:this.onComplete>
<xp:this.action><![CDATA[#{javascript:atmBean.atmAmountReceived = null;
/*
if(viewScope.settlementCorrectYN == "N"){
atmBean.atmAmountReceived = null;
}
*/}]]></xp:this.action>
</xp:eventHandler>
</xp:radioGroup>
</xp:td>
</xp:tr>
<xp:tr>
<xp:this.rendered><![CDATA[#{javascript:if(viewScope.get('settlementCorrectYN') == 'N') {
return true;
} else {
return false;
}}]]></xp:this.rendered>
<xp:td styleClass="home-table-cell" style="width:40%">
<xp:label value="Amount Received:" styleClass="home-label"
id="label12" />
</xp:td>
<xp:td style="width:60%">
<xp:inputText id="atmAmtRcvd" value="#{atmBean.atmAmountReceived}"
style="font-size:12pt">
<xp:this.disabled><![CDATA[#{javascript:/*
if(viewScope.settlementCorrectYN == "N"){
return false;
} else {
return true;
}
*/}]]></xp:this.disabled>
<xp:this.styleClass><![CDATA[#{javascript:if(viewScope.settlementCorrectYN == "N"){
return "editable currency-mask clear-on-cancel amtRec";
} else {
return "unavailable clear-on-cancel";
}}]]></xp:this.styleClass>
<xp:eventHandler event="onkeypress" submit="false">
<xp:this.script><![CDATA[/*
48 - 57: 0-9
8: backspace
9: horizontal tab
35: end
36: home
37: left arrow
39: right arrow
46: delete
var keyCode = event.keyCode;
if((keyCode >= 48 && keyCode <= 57) ||keyCode == 8 || keyCode == 9 || keyCode == 35 || keyCode == 36 || keyCode == 37 || keyCode == 39 || keyCode == 46){
event.returnValue = true;
}else{
event.returnValue = false;
}
*/]]></xp:this.script>
</xp:eventHandler>
<xp:eventHandler event="onchange" submit="true"
refreshMode="partial" refreshId="settlementPanel">
</xp:eventHandler>
</xp:inputText>
<!-- <xp:message id="message1"></xp:message>-->
</xp:td>
</xp:tr>
<xp:tr>
<xp:td style="width:40%" styleClass="home-table-cell">
<xp:label value="Comments (Optional):" styleClass="home-label"
id="label8" />
</xp:td>
<xp:td style="width:60%;padding-top:1.0em">
<xp:inputTextarea id="inputTextarea3" style="height:4em;width:25em"
value="#{atmBean.commentsSettle}" styleClass="clear-on-cancel" />
</xp:td>
</xp:tr>
<xp:tr>
<xp:this.rendered><![CDATA[#{javascript:if(atmBean.atmStatus == "WOUNDED"){
return true;
} else {
return false;
}}]]></xp:this.rendered>
<xp:td styleClass="home-table-cell" style="width:40%">
<xp:label value="Wounded Updates:" styleClass="home-label"
id="label13" />
</xp:td>
<xp:td style="width:60%">
<xp:inputTextarea id="inputTextarea4" style="height:4em;width:25em"
value="#{atmBean.woundedUpdates}" styleClass="clear-on-cancel" />
</xp:td>
</xp:tr>
<xp:tr>
<xp:td colspan="2" styleClass="home-table-cell" align="center"
valign="middle">
**<xp:button
value="Settle ATM" id="button14" style="font-size:11pt">
<xp:this.disabled><![CDATA[#{javascript:var hol:java.util.ArrayList = keywordBean.getString("holidaysBlast");
var currDt:Date = #Today();
var sdf:java.text.SimpleDateFormat = new java.text.SimpleDateFormat("MM/dd/yyyy");
if(#Contains(hol,sdf.format(currDt))) {
return true;
} else if(viewScope.settlementOptions == "--" || viewScope.settlementOptions == null) {
return true;
} else if(viewScope.settlementOptions == "Initiate Settlement") {
if(viewScope.settlementCorrectYN == null || (viewScope.settlementCorrectYN == "N" & getComponent("atmAmtRcvd").getValue() == null)) {
return true;
}
} else if(viewScope.settlementOptions == "No Settlement Process Allowed") {
return true;
}
return false}]]></xp:this.disabled>
<xp:eventHandler
event="onclick" submit="true" id="eventHandler5"
refreshMode="complete">
<xp:this.script><![CDATA[//XSP.openDialog("#{id:sttlDlg}");
/*
var deferred = atmRPC.settleAtmConfirmation();
deferred.addCallback(function(result){
if (result == "false") {
XSP.partialRefreshGet("#{id:infoMessagePanel}",{onStart:null,onError:null,onComplete:null});
} else if(result == "true"){
XSP.partialRefreshGet("#{id:infoMessagePanel}",{onStart:null,onError:null,onComplete:null});
XSP.openDialog("#{id:sttlDlg}");
}
})
*/]]></xp:this.script>
<!--
<xp:this.onComplete><![CDATA[XSP.partialRefreshPost("#{id:infoMessagePanel}",
{ onStart:null, onError:null, onComplete:
null});]]></xp:this.onComplete>
-->
<xp:this.action><![CDATA[#{javascript:try {
sessionScope.infoMsg = "";
//Did you confirm settlement amount?
var now:Date = #Now();
var nineAM:Date = #Date(now.getFullYear(), now.getMonth()+1, now.getDate(), 9, 0, 0) //Runs on the server, which is always in VA (ET)
if(viewScope.settlementOptions == "Initiate Settlement"){
if(now.UTC() <= nineAM.UTC()){
sessionScope.infoMsg = "You cannot initiate settlement of " + atmBean.atmID + " as the current time is prior or equal to 0900 ET";
} else { //SRD FR103072, FR79121
var sttlDialog = getComponent("sttlDlg");
sttlDialog.show();
}
}
} catch (e) {
logInfo("Settlement: " + e.getLocalizedMessage());
sessionScope.infoMsg = "Error trying to open confirmation prompt. Please try again.";
}}]]></xp:this.action>
<xp:this.onComplete><![CDATA[XSP.partialRefreshGet("#{id:infoMessagePanel}",{onStart:null,onError:null,onComplete:null});]]></xp:this.onComplete>
</xp:eventHandler>
</xp:button>**
<xp:button value="Cancel" id="button11" style="font-size:11pt">
<xp:eventHandler
event="onclick" submit="true" refreshMode="partial"
refreshId="fullPage" id="eventHandler7" immediate="false"
save="false">
<xp:this.action><![CDATA[#{javascript://updates may need to be made in the 'Yes' and 'No' button of the 'sttlDlg'
//id
atmBean.clearATMStatus();
atmBean.atmID = null;
atmBean.atmTodaySettlementAmt = null;
atmBean.atmAmountReceived = null;
atmBean.commentsSettle = null;
atmBean.woundedUpdates = null;
sessionScope.put('atmID',null);
viewScope.put('operation',null);
viewScope.put('settlementOptions',null);
viewScope.put('settlementCorrectYN',null);
viewScope.put('javaErrCode',null);
viewScope.put('javaErrMsg',null);
sessionScope.put('infoMsg', null)}]]></xp:this.action>
<xp:this.script><![CDATA[$(".clear-on-cancel").val("");
//this is needed because of the way that the jQuery plugin works]]></xp:this.script>
<xp:this.onComplete><![CDATA[XSP.partialRefreshPost("#{id:infoMessagePanel}",{onStart:null,onError:null,onComplete:null});]]></xp:this.onComplete>
</xp:eventHandler>
</xp:button>
</xp:td>
</xp:tr>
**<xp:tr>
<xp:td colspan="2">
<xc:ccSettleAtmConfirmation id="sttlAtmConfirm"></xc:ccSettleAtmConfirmation>
</xp:td>
</xp:tr>**
</xp:table>
</xp:td>
<xp:td style="width:25%" />
</xp:tr>
</xp:table>
</xp:panel>
</xp:panel>
</xp:panel>
</xp:panel>

Answer 1

No problem here opening xe:dialog id="dialog1" via ssjs with a partial update of a panel containing my xe:dialog ...
<xp:button value="Open dialog" id="button1">
<xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="panelAll">
<xp:this.action><![CDATA[#{javascript:getComponent("dialog1").show();}]]></xp:this.action>
</xp:eventHandler>
</xp:button>