Search code examples
javascriptjavaoracle-adf

how to keep page Scroll Postion in adf using javascript?


i have popup in adf (12.2) that is used to edit a af:table row , when i click ok on that adf popup , it scroll the page to the top which is undesired behavior , i want to keep the same scrolling position i tried to use af:clientListner with javascript code , but it didin't work and this my code :

<af:resource type="javascript">
    var scrlTop =0;
    var scrlLeft=0;
    console.log("inside soohoo ");
    console
    function stopAutoScrollToTop(data)
    {
     if (data.status=="begin")
      {
       console.log("soho 1 ")
       scrlTop = window.pageYOffset;
       scrlLeft = window.pageXOffset;
    }
     else if (data.status =="success"){
      console.log("soho 2 ")
      window.scrollTo(scrlLeft,scrlTop);}}
</af:resource> 

and this the code for the adf popup

  <af:popup childCreation="deferred" autoCancel="disabled" id="popup" 
  popupCanceledListener="#{pageFlowScope.bean.cancelpop}"
   binding="#{pageFlowScope.bean.add}" contentDelivery="lazyUncached">
    <af:dialog id="d2" type="none"
          title="#{pageFlowScope.bean.isInsertPopup ? lang.add:lang.edit }" closeIconVisible="false"
                                   modal="false">
        <f:facet name="buttonBar">
            <af:panelGroupLayout id="pgl2">
                <af:button text="#{lang.OK_BUTTON}" id="b35" partialSubmit="true"
                                               actionListener="#{pageFlowScope.bean.save}" styleClass="btn-black">
                    <af:clientListener type="action" method="stopAutoScrollToTop"/>
                </af:button>
                <af:button text="#{lang.CANCEL_BTN}" id="b6" immediate="true"
                                               visible="#{pageFlowScope.bean.isInsertPopup}"
                                               action="#{pageFlowScope.bean.CancelOutput}" styleClass="btn-black"/>

            </af:panelGroupLayout>
        </f:facet>
        <af:panelFormLayout id="pfl3" rows="2" maxColumns="2" labelAlignment="top">
            <af:inputText value="#{bindings.Name.inputValue}"
                                              label="#{bindings.Name.hints.label}"
                                              required="true"
                                              showRequired="true" columns="#{bindings.Name.hints.displayWidth}"
                                              maximumLength="#{bindings.Name.hints.precision}"
                                              shortDesc="#{bindings.Name.hints.tooltip}" id="it3"
                                              binding="#{pageFlowScope.Bean.Name}">
                <f:validator binding="#{bindings.Name.validator}"/>
            </af:inputText>

        </af:panelFormLayout>
    </af:dialog>
</af:popup>

Solution

  • There is no need for javascript to specify where on the DOM an ADF popup should open.

    When you need the popup to open right over an element and not scroll to the top, specify the Align and AlignId attribute in your af:showPopupBehavior component that trigger your popup :

    <af:showPopupBehavior popupId="::popup" align="startBefore" alignId="YOUR_COMPONENT_ID_WHERE_THE_POPUP_SHOULD_OPEN"/>
    

    This is how you do it in all ADF versions.