Question

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'}">
        <h:outputText styleClass="managedorder-color-name" value="#{orderItem.itemColor.swatchcolor}" />
    </td>
    ...
</c:forEach>

When I debug it with FireBug, I can walk through the code and see it execute, so I know it is getting called. However I should point out here that sometimes on the first run through, the code does not seem to execute, but if I click the “veiw” link a second time then it does execute. 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” (F8), 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.

Answer 1

The changes are been overridden by the ajax rendering. The onclick is executed before the ajax request. But when the ajax request completes, then the HTML DOM tree is changed with new elements from the server side. You need to execute the changeColorName() JS function after the ajax rendering. You can use the oncomplete attribute for this.

<a4j:commandLink ... oncomplete="changeColorName()" />