12 Replies Latest reply on Oct 22, 2010 10:10 AM by Tina Ng

    problem with s:link or h:commandLink

    Tina Ng Newbie

      In my application, I need function delete. When we click on the icon delete, a modal popup will appear asking if we are willing to delete... If we click on Yes button, the selected item is deleted and the page is reloaded.


      The problem is that when I click on the icon delete and let it be (without clicking Yes or No button). My page is reloading and after few seconds, my modal popup disappears.


      I think that with s:link or h:commandLink, SEAM automatically call @Create function


      Here is the code define icon and delete




      <s:link id="linkSuppression">
                              <h:graphicImage value="/img/icones/supprimer.png" />
                              <s:conversationPropagation type="join"/>
                              <a4j:support status="_none" event="onclick" reRender="tablePrestations" />
                              <rich:componentControl for="panelSuppression" attachTo="linkSuppression" operation="show" event="onclick" />
      </s:link>
      <hardis:modal id="panelSuppression" width="380" height="70" title="#{messages['general.delete.question']}">
              <table width="100%">
                  <tbody>
                     <tr>
                        <td width="50%">
                            <rich:spacer width="20" height="1" styleClass="right"/>
                            <a4j:commandLink reRender="tablePrestations" eventsQueue="serviceQueue" action="#{gestionPrestation.deleteSelectedPrestation}">
                               <a4j:support status="_none" event="onclick" reRender="tablePrestations" ajaxSingle="true" />
                               <hardis:button id="tablePrestations:#{var}:panelSuppressionBtn1" class="right" title="#{messages['button.yes']}"/>
                               <rich:componentControl for="panelSuppression" attachTo="tablePrestations:#{var}:panelSuppressionBtn1" operation="hide" event="onclick"/>
                             </a4j:commandLink>
                          </td>
                          <td width="50%">
                               <rich:spacer width="20" height="1" styleClass="left"/>
                               <hardis:button id="tablePrestations:#{var}:panelSuppressionBtn2" class="left" title="#{messages['button.no']}" />
                                <rich:componentControl for="panelSuppression" attachTo="tablePrestations:#{var}:panelSuppressionBtn2"  operation="hide" event="onclick"/>
                          </td>
                      </tr>
                  </tbody>
              </table>
      </hardis:modal>



      My backing bean




      @AutoCreate
      @Scope(ScopeType.CONVERSATION)
      @Name("gestionPrestation")
      public class GestionPrestationAction {
          @In
          private EntityManager     entityManager;
      
          @Logger
          private Log               logger;
      
          @In
          private PrestationService prestationService;
      
          @In
          @Out
          private Prestation        prestationToAdd;
      
          @DataModel
          private List<Prestation>  prestations;
      
          @DataModelSelection
          private Prestation        selectedPrestation;
      
          @Create
          public void initComponent() {
              Conversation.instance().begin();        
              logger.info("createAction");
              prestationToAdd = new Prestation();
              allEftcos = eftcoService.getAllEftcos();
              allActivites = activiteService.getAllActivites();
              initDataModel();
          }
      
          public void deleteSelectedPrestation() {
              logger.info("Suppress... " + selectedPrestation);
              prestations.remove(selectedPrestation);
              entityManager.remove(selectedPrestation);
              adjustNewNumeroGca();
              logger.info(selectedPrestation + " is deleted");
          }
      }
      



      Please tell me how to fix it? I appreciate your time!


      Thanks,
      Tina


        • 1. Re: problem with s:link or h:commandLink
          Leo van den berg Master

          Hi,


          do you have a ajax-push or ajax-poll tag on your page?


          Leo

          • 2. Re: problem with s:link or h:commandLink
            Tina Ng Newbie

            Hi Leo,
            I don't know what is ajax-push or ajax-poll. Why?


            Within my form, i have


            ajaxSingle="true"



            for each column because it's editable. Each column is defined something like this:




            <a4j:form id="prestationForm">
                 <a4j:region id="_blank" />
                 <a4j:status id="_none" for="_blank" />
                 
                 <rich:column width="10%" sortBy="#{each.libelleSupport.translatedLibelle}">
            
                                <f:facet name="header">
                                    <h:outputText value="#{messages['general.code']}" />
                                </f:facet>
            
                                <a4j:outputPanel id="codeCell">
                                    <a4j:outputPanel
                                            styleClass="pointer"
                                            rendered="#{!each.selectionSupport.isSelected('code')}"
                                            layout="block">
                                        <h:panelGroup>
                                            <h:outputText id="cellId" value="#{each.code}" />
                                            <rich:spacer height="15" />
                                        </h:panelGroup>
                                        <a4j:support status="_none" event="onclick" ajaxSingle="true"
                                                action="#{gestionCodeLibelle.select('code')}"
                                                reRender="codeCell" />
                                    </a4j:outputPanel>
            
                                    <h:panelGroup rendered="#{each.selectionSupport.isSelected('code')}">
                                        <h:inputText value="#{each.code}">
                                            <a4j:support status="_none" event="onblur" ajaxSingle="true"
                                                action="#{gestionCodeLibelle.unselect('code')}"
                                                reRender="codeCell, errorBoxRegion" />
                                                <s:validate/>
                                        </h:inputText>
                                    </h:panelGroup>
                                </a4j:outputPanel>
            
                                <f:facet name="footer">
                                    <h:inputText
                                        value="#{itemToAdd.code}"
                                        required="true" size="6">
                                        <a4j:support status="_none" event="onblur" ajaxSingle="true" />
                                        <s:validate/>
                                    </h:inputText>
                                </f:facet>
                            </rich:column>
            
            </a4j:form>
            



            • 3. Re: problem with s:link or h:commandLink
              Leo van den berg Master

              Hi,


              the reason I ask this is because you state that if you don't submit, something is still happening and after a few seconds the Modal panel disappears. This can only be because the delete button is submitting/activating something, or some timed element - such as a poll or push is reRendering stuff.


              Leo

              • 4. Re: problem with s:link or h:commandLink
                Tina Ng Newbie

                I don't have any ajax-push or ajax-poll tag in my page

                • 5. Re: problem with s:link or h:commandLink
                  Leo van den berg Master

                  Hi,


                  the reason i keep asking that is that - as you state - whitout doing anything, the modal panel dissappears. So something is activating the reRerender of the page or parts of it. Th only thing I see is that you have a double activation in your link which both are activated after click on the s:link.


                  The fist one is the ajax:support for onclick which triggers a reRender and the second is the rich comnponentControl which triggers the showing of the panel. Possibly this is the cause. You can unite it to one single ajax-support using the different onXX methods.


                  Leo

                  • 6. Re: problem with s:link or h:commandLink
                    Tina Ng Newbie

                    I understand your point.


                    I tried to remove the first reRender in a4j:support inside s:link and reRender in a4j:Support inside a4j:commandLink. But it doesn't work better though :-(

                    • 7. Re: problem with s:link or h:commandLink
                      Leo van den berg Master

                      Hi,


                      It is not clear to me why you are not using the ajax command button only. Have you tried this with the rich-modalpanel. I understand what you want to do, this is also possible directly with the Primefaces ConfirmDialog.


                      Leo

                      • 8. Re: problem with s:link or h:commandLink
                        Tina Ng Newbie

                        You mean that instead of s:link, i use a4j:commandButton?


                        I made a replacement for that and when I click on delete icon, my modal panel doesn't appear. I never tried Primefaces. Actually i'm really new to JSF and those stuffs. I will look for example on the net.



                        Thanks Leo!

                        • 9. Re: problem with s:link or h:commandLink
                          Leo van den berg Master

                          Hi,


                          I've included an example on how to use the Rich-modalpanel. In this case we use it to open a modal panel with a text-editor in it.




                          <a4j:commandButton id="addMemoButton"      image="../images/16/Notepad.png"
                               action="#{bean.createMemo}"
                               limitToList="true" 
                                  eventsQueue="inputQueue" 
                                  requestDelay="250"
                                  focus="headerLine"
                                  oncomplete="#{rich:component('eventNoteModalPanel')}.show();"
                               reRender="headerLine, inputText, growl">
                          </a4j:commandButton>



                          The modal panel is as follows:



                          <h:form id="eventNoteForm">
                               <rich:modalPanel id="eventNoteModalPanel" autosized="true" width="550" domElementAttachment="parent" onshow="#{rich:element('headerLine')}.focus();" >
                                    <f:facet name="header">
                                         <h:outputText value="#{messages['incident_event_note']}" />
                                    </f:facet>
                                    <f:facet name="controls">
                                         <h:panelGroup layout="block" style="vertical-align: middle">
                                              <a4j:commandButton style="padding-top:3px;padding-right: 3px;"
                                                   image="../images/close.png"
                                                   action="#{bean.cancelMemo}"
                                                   eventsQueue="inputQueue" limitToList="true"
                                                   ignoreDupResponses="true" requestDelay="250"
                                                   oncomplete="#{rich:component('eventNoteModalPanel')}.hide();"
                                                   reRender="headerLine, inputText, growl" />
                                         </h:panelGroup>
                                    </f:facet>
                                    <a4j:outputPanel id="notePanel">
                                         <rich:panel>
                                         <h:panelGrid columns="1">
                                         <h:inputText id="headerLine" value="#{bean.eventNote.header}" required="true" maxlength="150" style="width:300px;"     />
                                         <rich:editor id="inputText" useSeamText="false" value="#{bean.eventNote.text}" height="400" width="600" />
                                         </h:panelGrid>
                                         </rich:panel>
                                         <rich:panel>
                                              <a4j:commandButton id="saveMemoButton" image="../images/save2.gif"
                                                   action="#{bean.addMemo}"
                                                   eventsQueue="inputQueue"
                                                   limitToList="true" ignoreDupResponses="true" requestDelay="250"
                                                   oncomplete="if (#{facesContext.maximumSeverity.ordinal == null}) #{rich:component('eventNoteModalPanel')}.hide();" 
                                                   reRender="headerLine, inputText, growl">
                                                   <s:defaultAction />
                                              </a4j:commandButton>     
                                              <rich:toolTip for="saveMemoButton" styleClass="tooltip">
                                                   <h:outputText value="#{messages['application_save_tooltip']}" />
                                              </rich:toolTip>
                                         </rich:panel>
                                    </a4j:outputPanel>
                               </rich:modalPanel>
                          </h:form>
                          



                          The modal panel has some aditional tricks such as preventing it from clsing if there is a validation error and focussing always on the inputline.
                          There is also a defaultAction defiend on the save button, so when you hit the enter key, the text will be saved.


                          Hopefully this helps you abit further.


                          Leo


                          • 10. Re: problem with s:link or h:commandLink
                            Tina Ng Newbie

                            Does it matter if we define commandButton and modalPanel within the same form?

                            • 11. Re: problem with s:link or h:commandLink
                              Leo van den berg Master

                              Hi,


                              keep the modalform in a separate form.



                              From the  demo page





                              The modal panel has an absolute layout.There is no reason to put it on the page where it is called.If you want to perform submits from this modal panel, you should have a separate form inside it. In this case, the panel must be declared outside of the other form on the same page. I.e. nested forms are not allowed.
                              Those requirements are applied because of the bug in earlier Internet Explorer versions, as the dialog is moved to the top of the browser DOM tree just after it is rendered.




                              Leo

                              • 12. Re: problem with s:link or h:commandLink
                                Tina Ng Newbie

                                Hi Leo,
                                After trying some solutions, I figure out that


                                1. s:link or h:commandLink or even a4j:commandButton makes my page reload itself without entering into my action of delete.


                                2. if I use only graphicImage like this:




                                <h:graphicImage id="linkSuppression" value="/img/icones/supprimer.png" styleClass="pointer"/>
                                                         
                                <rich:componentControl for="panelSuppression" attachTo="linkSuppression" operation="show" event="onclick" />



                                and panelSuppression is my panelModal in another form, the @DataModelSelection lost their function. It means that I cannot get the selected item as I wish. It always point to the first item in the list @DataModel.


                                Do you have any other suggestion Leo?


                                I really appreciate your time!!!
                                Tina