Copy text to clipboard from jsf / primefaces doesnt always work

Question

The resolution for Copy text to clipboard from jsf / primefaces mentioned here 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:

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

Answer 1

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 here):

<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>

and result: