javascript not able to hide button inside

Question

I want to hide my icon/button on submission of dialog box...My code stops working when i place my icon/button inside <h:form>

This is code for my icon

<h:outputLink id="loginLink" value="javascript:void(0)"
                onclick="dlg.show()">
            <p:graphicImage value="/images/logo.png" />
</h:outputLink>

this is code for dialog box

<p:dialog id="dialog" header="Login" widgetVar="dlg">
    <h:form>
        <p:commandButton value="Login"
                oncomplete="handleLoginRequest(xhr, status, args)" />
    </h:form>
</p:dialog>

now this is my script

<script type="text/javascript">
function handleLoginRequest(xhr, status, args) {
        dlg.hide();
    jQuery('#loginLink').fadeOut();
    alert("This is working fine");
}
</script>

Everything works fine this way.. alert("This is working fine"); is working fine and my icon also gets fade out....

But when I place my icon inside <h:form></h:form> icon doesn't fade out(Script is working fine but unable to reach my icon inside <h:form>

Ex:

<h:form>
    <h:outputLink id="loginLink" value="javascript:void(0)"
            onclick="dlg.show()">
        <p:graphicImage value="/images/logo.png" />
    </h:outputLink>
</h:form>

This way I am facing problem :(

P.S : using <h:form> is must for me as I am going to place my code in <p:menuitem> which needs to be placed inside <h:form>

I'm not familiar enough with jsf to provide a working example, but this type of renaming of components exists in asp .net... these posts describe solutions that may be helpful: http://illegalargumentexception.blogspot.com/2009/02/jsf-working-with-component-ids.html, http://java.dzone.com/articles/jsf-20-clientid-jquery — Glen Hughes, Aug 24 '12 at 09:01
Adding the `` will prefix all element ids, see [How to get element from javascript in JSF 2.0](http://stackoverflow.com/questions/2527071). — f_puras, Aug 24 '12 at 09:03
@Mohit Saluja: Is it necessary (or something specific) to use `` ? You may try `` — Ahsan Khurshid, Aug 24 '12 at 09:07
@A.K that doesn't matter....i think problem will be same even in that case.... — Mohit Saluja, Aug 24 '12 at 09:17
@A.K i have tried this....using `` doesn't makes any difference... — Mohit Saluja, Aug 24 '12 at 09:25

score 2 · Answer 1 · answered Aug 24 '12 at 09:22

2

Thanks for replying :) Below code working fine for me

<h:form id="loginForm">

and in javaScript

jQuery('#loginForm').fadeOut();

(#id of form in place of #id of button/link)

This way i can hide my complete form which is having icon/button...

Actually when i am placing my button/link,icon inside <h:form> id of button is not visible to javaScript

When i am giving id to <h:form> and hiding whole form instead of single component(button) it works fine for me :)

I will try this in <p:menutem/> hope this works fine there...

answered Aug 24 '12 at 09:22

Mohit Saluja

470
7
23

1

Your solution is a workaround it doesn't take care of the problem itself. Please see my answer for a solid fix. ;-) – siebz0r Aug 25 '12 at 10:57
1

yes you are right hiding whole `` didn't worked for me in case of primefaces `` as i needed to kept it in a ``.....than i came with a solution i have used javaScript and hided the only the ``...its almost same as your answer... thanks for your answer.. – Mohit Saluja Aug 26 '12 at 07:43

score 1 · Accepted Answer · answered Aug 25 '12 at 10:45

In stead of hiding the full form you can hide only the element in the form only using the following:

<h:form id="loginForm">
    <h:outputLink id="loginLink" />
</h:form>

<script type="text/javascript">
    function handleLoginRequest(xhr, status, args) {
        dlg.hide();
        $("[id='loginForm:loginLink']").fadeOut();
    }
</script>

In the above example jQuery escapes the ":" in the id.

You can also make use of JSF's binding:

<h:form>
    <h:outputLink binding="#{loginLink}"/>
</h:form>

<script type="text/javascript">
    function handleLoginRequest(xhr, status, args) {
        dlg.hide();
        $("[id='#{loginLink.clientId}']").fadeOut();
    }
</script>

Pick your choice ;-)

thanks for your answer.....i have already got one solution almost same as yours.... i had tried somthing similar to your first one code but skipped `id=` in ` $("[id='loginForm:loginLink']").fadeOut();` so i think that was the reason it didn't worked for me.. and in your second answer i had also tried one similar to that but i use ``...so that one method also not worked for me..... — Mohit Saluja, Aug 26 '12 at 07:49

javascript not able to hide button inside

2 Answers2