0 Replies Latest reply: Sep 16, 2013 5:01 AM by user13277662 RSS

    display popup with parametrized text using javascript

    user13277662

      I have a table with files. One column has a delete link for each file. On the delete link click, I want to display confirmation dialog: "Do you really want to delete file <FILENAME>?

      I want to display the dialog by javascript to make it faster.

      How can I pass the parameter <FILENAME> to the dialog?

      I'm using version 11.1.2.1

       

      My first but incorrect solution:

       

      <af:column...>

      <af:commandLink ...>

           <af:clientListener method="showPopup" type="action"/>

           <af:clientAttribute name="fileNameToDelete" value="#{row.file.name}"/>

      </af:commandLink>

      </af:column>

      ...

      <af:popup id="deleteFileDialog">

              <af:dialog title="Confirmation" id="delDelivDia" dialogListener="#{fileExchangeBean.confirmDeleteDialogClosedListener}">

               <af:outputText value="Do you really want to delete file " id="ot222"/>

                <af:outputText value="" id="fileNameToDelete" clientComponent="true"/>

                <af:outputText value=" ?" id="ot2222"/>

              </af:dialog>

          </af:popup>

       

       

      function showPopup(event){

              var source = event.getSource();

              var popupId = source.getProperty("popupId");

              var popup = source.findComponent(popupId);

             

              if (!popup.isPopupVisible()){

                  popup.show();

                 

                  var fileNameToDelete = source.getProperty("fileNameToDelete");

                  var outTextComp = popup.findComponent('fileNameToDelete')

                  alert('outTextComp = '+outTextComp)

                  outTextComp.setValue(fileNameToDelete)

              }

      }

       

      This solution does not work because when I click the delete link for the first time, the outTextComp is null. It seems that when showPopup() is called, the dialog component is not yet created.

      But than, at the second or later delete link click, the outTextComp can be already found and used.

       

       

      My second, but ugly solution:

      Use another javascript function to set the fileNameToDelete value - call it after the popup is opened:

       

      <af:popup id="deleteFileDialog" clientComponent="true">

              <af:clientListener type="popupOpened" method="deleteFileDialogOnPopupOpened"/>

              <af:dialog title="Confirmation" id="delDelivDia" dialogListener="#{fileExchangeBean.confirmDeleteDialogClosedListener}" clientComponent="true">

                <af:outputText value="Do you really want to delete file " id="ot222"/>

                <af:outputText value="" id="fileNameToDelete" clientComponent="true"/>

                <af:outputText value=" ?" id="ot2222"/>

               </af:dialog>

      </af:popup>

       

      function deleteFileDialogOnPopupOpened(actionEvent){

           var fileName = ... // get the fileName to delete, e.g. from the table selected row

           var popup = actionEvent.getSource();

          var outTextComp = popup.findComponent('fileNameToDelete')

          outTextComp.setValue(fileName);

      }

      This solution works, but unfortunately the outTextComp.setValue() causes the popup to refhresh right after it is opened - so it is ugly from user point of view.

       

       

      So what is the correct and recommended way to pass a clicked row value to a dialog using javascript?