5 Replies Latest reply on Mar 4, 2011 10:17 AM by Y E

    Set inputText to null after ajax submit

    john mcdonald Newbie

      This should be an easy one, but I'm having a hell of a time trying to figure out how to reset a field to null after the ajax request takes place. I have text input filed bound to orderitem.splitQuanaity. When I click into the textInput, set a value, and then onblur the value is set in the orederitem. When I click the button, it performs the splitaction and reRenders the dataTable to display the new orderItem with the splitqty. The problem is that the text field retains the splitQuantity value. I know that's it's being reset to null, because I'm setting the splitQuantity to null in the split action method. Now I'm trying to use javascript to null the field out but it's not working. Any ideas.


      <h:form>
          <h:inputText id="splitQuantity" value="#{_orderitem.splitQuantity}">
              <a:support event="onblur" reRender="orderQty"  ajaxSingle="true"/>
          </h:inputText>
      
          <a:commandButton value="click" 
          oncomplete="form.splitQuantity.value='';"
          action="#{DropShipOrders.splitLineItem(_orderitem)}" 
          requestDelay="100" 
          reRender="orderPanel" 
          ajaxSingle="true"
          />
      </h:form>
      



        • 1. Re: Set inputText to null after ajax submit
          Arbi Sookazian Master

          Have you tried reRendering the splitQuantity inputText id or the form id?  If you set to null in backing bean action method, then when you reRender it the getter should be called and thus should be rendered blank/null...

          • 2. Re: Set inputText to null after ajax submit
            john mcdonald Newbie

            Hi Arbi,
            Thanks for your help.


            I'm currently reReneding the entire panel so that the new, split, Orderitem will appear in my dataTable; that works great. In fact I have a field in my dataTable that looks like this which tells me what both the quantity and splitQuantity are for the Orderitem


            <h:outputText id="orderQty" value="#{_orderitem.quantity} : #{_orderitem.splitQuantity}"></h:outputText>
            



            When the panel reRenders, the splitQuantity for the item is correct; null; but the darn inputText field is stubborn and refuses to be reset until I reload the the page using refresh. I've also id'd the form like this:


            <h:form id="splitForm">
            



            and tried to just reRender the form, doesn't work. I also id'd the actual inputText field and tried to reRender just that field, but it failed to work.


            <h:inputText id="splitQuantity" value="#{_orderitem.splitQuantity}">
                <a:support event="onblur" reRender="orderQty"  ajaxSingle="true"/>
            </h:inputText>
            



            Since the reRenders were my first choice, and I didn't thing they would be any trouble, I've tired everything I can think of and nothing seems to reset the field short of manually reloading the page.


            I'd prefer if I didn't have to use javascript to reset the field because it should just refresh when I reRender the panel, like the outputText does, but at this point I'll take whatever I can get to make this work.


            Thanks Arbi.

            • 3. Re: Set inputText to null after ajax submit
              john mcdonald Newbie

              Am I going insane or is this some sort of issue with the inputText field. Here's another test case:


              <h:form id="splitForm">
                      <a:outputPanel ajaxRendered="true" layout="none" id="splitPanel">
                          <h:outputText id="orderSplitQty" value="#{_orderitem.splitQuantity}"></h:outputText>
                          <h:inputText id="splitQuantity" value="#{_orderitem.splitQuantity}">
                      <a:support event="onblur" reRender="orderQty"  ajaxSingle="true"/>
                  </h:inputText>
              </a:outputPanel>     
              
                  <a:commandButton value="click" 
                  oncomplete="form.splitQuantity.value='';"
                  action="#{DropShipOrders.splitLineItem(_orderitem)}" 
                  requestDelay="100" 
                  reRender="orderPanel" 
                  ajaxSingle="true"
                  />
              </h:form>
              



              Guess what, when I click the button, the orderSplitQty outputText field reRenders to null, like it's supposed to, but the splitQuantity inputText field DOES NOT. What the heck is going on here. I cannot get the inputText field to reRender like it obviously should.


              Thanks guys.

              • 4. Re: Set inputText to null after ajax submit
                john mcdonald Newbie

                This is the most time consuming and painful yet most rewarding software I've ever written.


                I figured it out. This works:


                <h:form>
                    <h:inputText value="#{_orderitem.splitQuantity}">
                        <a:support event="onblur" reRender="orderQty" ajaxSingle="true"/>
                    </h:inputText>
                    <a:commandButton value="click"
                        action="#{DropShipOrders.splitLineItem(_orderitem)}" 
                        requestDelay="500" 
                        reRender="orderPanel" 
                    />
                </h:form>
                



                I removed


                ajaxSingle="true"
                



                from my commandButton and the reRender NOW works properly on the inputText field. What's odd is that everything else worked exactly as it was supposed to except the reRending of the input text field.


                By the way, in case you're wondering, the delay on the commandButton is to allow the inputText action to take place before the splitItem action is called. If the user enters a value into the text field and then immediately clicks the button, without this delay there's a race condition between the two ajax events and more times than not the orderItem would arrive in the action method without the splitQuantity being set from the inputText.


                On to the next challenge. ;)

                • 5. Re: Set inputText to null after ajax submit
                  Y E Newbie

                  After two days of pulling my hair with the very same problem I came across your solution on this unlikely place - I think this is related to richfaces rather than Seam.
                  Thank you.
                  You saved my day.