Copiar texto al portapapeles desde jsf/primefaces no siempre funciona

La resolución para Copie texto al portapapeles desde jsf / primefaces mencionado aquí works as it is but seems to have some issue for me please find my code below:

    <h:outputScript library="default" name="js/jquery-1.9.1.min.js"/>
    <h:outputScript library="default" name="js/jquery.zclip.min.js"/>
    <script type="text/javascript">
    $(document).ready(function(){

    $('a#copy_coupon_code').zclip({
        path:"#{resource['default:js/ZeroClipboard.swf']}",
        copy:$('span#offer_details_form:coupon_code').text()
    });
    });
    </script>                    
<h:outputText id="coupon_code" value="ABCD11" />
<a id="copy_coupon_code" href="#">Copy coupon and redirect</a> 

This is how the code looks in the browser: enter image description here

Copy to clipboard is not working, any help is greatly appreciated.....

preguntado el 05 de mayo de 13 a las 11:05

Can you please elaborate on separated by 2. mean? -

Open firebug in Firefox or developer tools in your browser and check the html markup for the ids. -

There is some script problem in your code, like @Ravi said, look the firebug to find it. -

@Ravi I tired to debug the code here & updated the question with the findings. Let me know if you have any clue.... -

You could always make a command button for copy to clipboard? See here ovaraksin.blogspot.ie/2012/10/… -

1 Respuestas

This is a well-known problem to integrate JSF and jQuery,because jsf use colon : character to present component's id, and the colon : character is special character(the colon : is reserved for jQuery selector) so you have to escape by placing two backslashes in front of it :

$('span#offer_details_form\\:coupon_code')

I have just tested and it work fine(download zClip from aquí):

<h:head>
    </h:head>
    <h:body>
        <h:outputScript library="js" name="jquery-1.9.1.min.js"/>
        <h:outputScript library="js" name="jquery.zclip.min.js"/>
        <script type="text/javascript">
            $(document).ready(function(){
                $('#copylink').zclip({
                    path:"#{resource['js:ZeroClipboard.swf']}",
                    copy:$('#myform\\:txt1').text()
                });
            });
        </script>
        <h:form id="myform">
            <p:panel>
                <h:outputText id="txt1" value="Stackoverflow"/>
                <a id="copylink" href="#">Copy Description</a>
            </p:panel>
        </h:form>
    </h:body>

y resultado:

enter image description here

contestado el 13 de mayo de 13 a las 08:05

I'm using mobile, so i can not show more information, sorry for that. - rong nguyen

Following was the fix for the issue, this fix was provided by RongNK, thanks a lot @RongNK <a style="position: relative" id="copylink" href="#"... - Abhishek Dhote

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.