JSF - Calling bean method when clicking <a> element

Question

So I have an anchor element, and it's href attribute is set dynamically from the bean. I am using an anchor since it is interacting with fancybox javascript. What I need to have happen is to call a method in the bean when the anchor is clicked so that the href will update again. There is a textbox above that is also bound to bean. What needs to happen is to take the text from the text box, and parse that into a query string for the anchor's href.

I'm trying to figure out the best way to have this happen (if it is possible). Would I be able to use javascript (or Ajax) to call an updateHref() method?

The textbox and anchor element (it's ModelBean.ending that needs to be updated):

<h:inputTextarea value="#{ModelBean.tweet}" class="textarea.hs-input #{ModelBean.tweetClass}" style="width:200px;" >
                        <f:facet name="label">
                            Tweet
                        </f:facet>
                    </h:inputTextarea>

                </td>
            </tr>
            <tr>
                <td>
                    <h:commandButton value="Analyze Tweet" class="hs-button orange" action="#{ModelBean.tweetAnalysis()}" />
                </td>
                <td>
                    <a href="https://app.hubspot.com/social/#{ModelBean.hubID}/publishing/compose_bookmarklet?body=#{ModelBean.ending}" class="hs-button primary fancybox-iframe" data-fancybox-type="iframe"  >
                        Tweet it!
                    </a>
                </td>
            </tr>

Here's the bit of java that would need to be called:

ending = URLEncoder.encode(tweet, "UTF-8");
ending = ending.replaceAll("\\+", "%20");

If you think any other part of the code would be useful please let me know! And thanks in advance for any suggestions!

Answer 1

If you use JSF 2.0, f:ajax tag may solve your problem. Here is sample usege of f:ajax tag,

    <h:commandLink value="#{..}">
        <f:ajax execute="name" render="output" />
    </h:commandLink>
    <h:inputTextarea id="output" value="#{..}" />

execute =”name” – Indicate the form component with an Id of “name” will be sent to the server for processing. For multiple components, just split it with a space in between, eg execute=”name anotherId anotherxxId”. In this case, it will submit the text box value.

render =”output” – After the Ajax request, it will refresh the component with an id of “output“. In this case, after the Ajax request is finished, it will refresh the h:inputTextarea component.