1 Reply Latest reply on Jul 30, 2012 6:41 PM by jsmoorejr

    Changing h:outputText "value", or even the value expression, using JavaScript/jQuery

    jsmoorejr

      So here is my problem. I am trying to take the value that comes from the backend and get rid of unwanted text in the value. So basically I get a color back and there is an asterisk or two at the end of the color name. I send that value to a JavaScript function and remove any asterisks that may be present in the string. This has been working fine for me up until now. I found one other location that this was happening and when I try to do the same thing, it doesn't work. The string comes in with the asterisks, I remove them and replace the html with the new string and for a brief moment, it works, then the original string comes back.

       

      So, here is a bit more detail. In the app I am working on, there is a link that when clicked opens a richfaces modal window. Then, there is a table that is populated with various quotes that have come in from the website. At the end of each row is a "View" link to view the details of the quote. When that is clicked, it opens another modal that has a table with each product, color, size, and other information they customer wants quoted on. In the "View" link code there is an onclick, this is where I put my function call.

       

      <a4j:commandLink ajaxSingle="true" action="#{editRequestedQuoteController.viewRequestedQuote}"
          reRender="mainRequestedQuotePanel,subpanel,btnPanel,messagPanelView"
          onclick="#{rich:component('viewRequestedQuotePanel')}.show(); changeColorName()">
          <span>View</span>
          <f:param name="orderId" value="#{order.id}"/>
      </a4j:commandLink>
      

       

      The changeColorName() function is called and runs the following code:

       

      function changeColorName() {
          jQuery(".managedorder-color-name").each(function(){
              var existingColor = jQuery(this).text();
              var newColor = existingColor.replace(/\*/g, '');
              jQuery(this).text(newColor.trim(newColor));
          });
      }
      

       

      The code newColor.trim(newColor) is just removing leading/trailing spaces from the string.

       

      Here is the code where the string is being rendered:

       

      <c:forEach var="orderItem" items="#{editRequestedQuoteBean.orderItems}" varStatus="status" >
          ...
          <td rowspan="#{orderItem.logo.logoName != null ? '4' : '2'}">
              <span class="managedorder-color-name">#{orderItem.itemColor.swatchcolor}</span>
          </td>
          ...
      </c:forEach>
      

       

      In the above code, I realize that there isn't an h:outputText tag, but I have changed it around multiple times with no success. When I debug it with FireBug, I can walk through the code and see it execute, so I know it is getting called. When I step over the last line, I can see the text is replaced with the string I am sending, but then if I "continue", the string goes back to the version I started with, the one with the asterisks. Does anyone know why this might be happening? Please, anyone, let me know if this is unclear or if you need more information.

       

      Thanks,

        • 1. Re: Changing h:outputText "value", or even the value expression, using JavaScript/jQuery
          jsmoorejr

          Kinda feel a bit embarrased about this, but someone on a different site pointed this out to me. I just needed to move the function call to the oncomplete instead of the onclick, since the ajax request happens after the onclick event. Any change I was making to the string before the Ajax request had finished, was just being replaced after the Ajax request completed. So, my final version of the function call became this:

           

          <a4j:commandLink ajaxSingle="true" action="#{editRequestedQuoteController.viewRequestedQuote}"
              reRender="mainRequestedQuotePanel,subpanel,btnPanel,messagPanelView"
              onclick="#{rich:component('viewRequestedQuotePanel')}.show()" oncomplete="changeColorName()">
              <span>View</span>
              <f:param name="orderId" value="#{order.id}"/>
          </a4j:commandLink>