ZClip with <p:panelGrid> does not work

StackOverflow https://stackoverflow.com/questions/16515212

Domanda

In my JSF-Primefaces web-application for copy to clipboard I am using zClip. Everything works well with the small code snipet given below by RongNK but doesnot work with my actual code please find the same below:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">
    <f:view id="offer_details" encoding="UTF-8" contentType="text/html">
        <h:head>                              
        </h:head>
        <h:body>    
            <h:outputStylesheet library="default" name="css/discount_box.css"  />
            <h:outputStylesheet library="default" name="css/discountbox_primefaces.css"  />
            <h:outputScript library="default" name="js/discount_box.js" />

<h:outputScript library="default" name="js/jquery-1.9.1.min.js"/>
<h:outputScript library="default" name="js/jquery.zclip.js"/>
<script type="text/javascript">
    $(document).ready(function(){
        $('#copylink').zclip({
            path:"#{resource['default:js/ZeroClipboard.swf']}",
            copy:$('#offer_details_form\\:txt1').text()
        });
    });
</script>          
            <table align="center" width="100%">
                <tr>
                    <td><!-- left panel --></td>

                    <td align="center" width="1000px"><!-- center panel -->                                                                            
                        <ui:include src="header.xhtml" /><!-- header panel -->

                        <table align="center" width="100%"><!-- content panel -->
                            <tr>
                                <td>
                                    <table align="center" width="100%">
                                        <tr>                                                                                        
                                            <td align="left" width="75%" valign="top">

                                                <p:panel id="offer_details_panel" header="#{OfrDetBen.offer.where}" styleClass="panel-grid tr panel-grid td">
                                                    <p:panelGrid columns="2" styleClass="panel-grid">
                                                        <p:panelGrid columns="1" styleClass="panel-grid">                                                                                                                  
                                                            <h:graphicImage alt="#{OfrDetBen.offer.where}" value="#{OfrDetBen.offer.imgFullPath}" class="medium-panel-image" />
                                                            <h:form id="offer_rating_form">
                                                                <p:rating value="#{OfrDetBen.offer.rating}" />                                                                                      
                                                            </h:form>                                                        
                                                        </p:panelGrid>

                                                        <h:form id="offer_details_form">                                                                 
                                                            <p:panelGrid columns="2" styleClass="panel-grid">                                                                                                                  
                                                                <h:outputText value="#{msg._offer}#{msg._colon} " rendered="#{OfrDetBen.offer.isOfferByTitle}" styleClass="font-size-1em font-weight-bold"/>                                                                                    
                                                                <h:outputText value="#{OfrDetBen.offer.what}" rendered="#{OfrDetBen.offer.isOfferByTitle}" styleClass="font-size-1em font-weight-bold default-font-color" />

                                                                <h:outputText value="#{msg._original_price}#{msg._colon} " rendered="#{OfrDetBen.offer.isOfferByDetails}" styleClass="font-size-1em font-weight-bold"/>
                                                                <h:outputText value="#{OfrDetBen.offer.originalPrice}" style="text-decoration: line-through" rendered="#{OfrDetBen.offer.isOfferByDetails}" styleClass="font-size-1em font-weight-bold default-font-color" />

                                                                <h:outputText value="#{msg._discount_offer}#{msg._colon} " rendered="#{OfrDetBen.offer.isOfferByDetails}" styleClass="font-size-1em font-weight-bold"/>
                                                                <h:outputText value="#{OfrDetBen.offer.discount}" rendered="#{OfrDetBen.offer.isOfferByDetails}" styleClass="font-size-1em font-weight-bold default-font-color" />                                                                                                                                            

                                                                <h:outputText value="#{msg._offer_price}#{msg._colon} " rendered="#{OfrDetBen.offer.isOfferByDetails}" styleClass="font-size-1em font-weight-bold"/>
                                                                <h:outputText value="#{OfrDetBen.offer.offerPrice}" rendered="#{OfrDetBen.offer.isOfferByDetails}" styleClass="font-size-1em font-weight-bold default-font-color" />                                                                                                                                                                                                                        

                                                                <h:outputText value="#{msg._savings}#{msg._colon} " rendered="#{OfrDetBen.offer.isOfferByDetails}" styleClass="font-size-1em font-weight-bold"/>
                                                                <h:outputText value="#{OfrDetBen.offer.savings}" rendered="#{OfrDetBen.offer.isOfferByDetails}" styleClass="font-size-1em font-weight-bold default-font-color" />                                                                                                                                                                                                                                                                                                       

                                                                <h:outputText value="#{msg._offer_on}#{msg._colon} " styleClass="font-size-1em font-weight-bold"/>
                                                                <h:outputText value="#{OfrDetBen.offer.tag}" styleClass="font-size-1em" />                                                                                

                                                                <h:outputText value="#{msg._validity}#{msg._colon} " styleClass="font-size-1em font-weight-bold"/>
                                                                <p:panelGrid columns="2" styleClass="panel-grid">
                                                                    <h:outputText value="#{msg._valid_from}#{msg._colon} " styleClass="font-size-1em font-weight-bold"/>
                                                                    <h:outputText value="#{OfrDetBen.offer.beginsAsString}" styleClass="font-size-1em" />
                                                                    <h:outputText value="#{msg._valid_till}#{msg._colon} " styleClass="font-size-1em font-weight-bold"/>
                                                                    <h:outputText value="#{OfrDetBen.offer.endsAsString}" styleClass="font-size-1em" />
                                                                </p:panelGrid>    

                                                                <h:outputText value="#{msg._details}#{msg._colon} " rendered="#{!empty OfrDetBen.offer.description}" styleClass="font-size-1em font-weight-bold"/>
                                                                <h:outputText value="#{OfrDetBen.offer.description}" rendered="#{!empty OfrDetBen.offer.description}" styleClass="font-size-1em" />                                                                                                                                                                                                                                                

                                                                <h:outputText value="#{msg._share}#{msg._colon} " styleClass="font-size-1em font-weight-bold"/>
                                                                <!-- Facebook button -->                                                                                
                                                                <div id="fb-root"></div>
                                                                <script>(function(d, s, id) {
                                                                  var js, fjs = d.getElementsByTagName(s)[0];
                                                                  if (d.getElementById(id)) return;
                                                                  js = d.createElement(s); js.id = id;
                                                                  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1;appId=205623646117694";
                                                                  fjs.parentNode.insertBefore(js, fjs);
                                                                }(document, 'script', 'facebook-jssdk'));</script>

                                                                <!-- Google +1 button -->
                                                                <div class="g-plusone" data-size="medium" style="padding-right: 200px !"></div>
                                                                <script type="text/javascript">
                                                                  (function() {
                                                                    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
                                                                    po.src = 'https://apis.google.com/js/plusone.js';
                                                                    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
                                                                  })();
                                                                </script>

                                                                <!-- Twittter button -->
                                                                <a href="https://twitter.com/share" class="twitter-share-button" data-via="discountboxin" data-related="discountboxin" data-dnt="true">Tweet</a>
                                                                <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

                                                                <!-- Facebook button -->
                                                                <div class="fb-like" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true" data-font="trebuchet ms"></div>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  

<h:outputText id="txt1" value="Stackoverflow"/>
<a id="copylink" href="#">Copy Description</a>                                                                  

                                                                <h:outputText value="hidden" styleClass="hidden-text" rendered="#{OfrDetBen.offer.isExclusiveOffer and empty OfrDetBen.offer.couponCode}" />
                                                                <p:panelGrid columns="4" styleClass="panel-grid" rendered="#{OfrDetBen.offer.isExclusiveOffer and empty OfrDetBen.offer.couponCode}">                                                                                                                                                                                 
                                                                    <h:outputText value="hidden" styleClass="hidden-text" />
                                                                    <h:outputText value="hidden" styleClass="hidden-text" />
                                                                    <h:outputText value="hidden" styleClass="hidden-text" />
                                                                    <p:commandButton value="Get coupon" update="@form" action="#{OfrDetBen.getCouponCode}" />                                                                                                                                
                                                                </p:panelGrid>

                                                                <h:outputText value="hidden" styleClass="hidden-text" rendered="#{OfrDetBen.offer.isExclusiveOffer and !empty OfrDetBen.offer.couponCode}" />
                                                                <p:panel id="coupon_details" header="Coupon code and instructions" rendered="#{OfrDetBen.offer.isExclusiveOffer and !empty OfrDetBen.offer.couponCode}" styleClass="panel-grid tr panel-grid td panel-header-title-small">
                                                                    <p:panelGrid columns="1">
                                                                        <h:outputText value="COPY this coupon code: #{OfrDetBen.offer.couponCode}" styleClass="font-size-1.5em font-weight-bold default-font-color" />                                                                                                                                                                                                                                                                                                                                                                                                                                                            
                                                                        <ui:repeat var="venue" value="#{OfrDetBen.offer.venues}" varStatus="status">
                                                                            <div>
                                                                                <h:outputText value="CLICK here: " styleClass="font-size-1em font-weight-bold" />
                                                                                <h:outputLink value="#{venue.onlineVenueAsURL}" target="new"  rendered="#{!empty venue.city and venue.city == 'Online'}">#{venue.venueAsDisplayString}</h:outputLink>                                                                                                                                        
                                                                            </div>
                                                                        </ui:repeat>
                                                                        <div class="component-spacing-top"/>
                                                                        <h:outputText value="How to use coupon?" styleClass="font-size-1em font-weight-bold"/>
                                                                        <h:outputText value="For online offers:" styleClass="font-size-1em font-weight-bold"/>
                                                                        <h:outputText value="1. Copy the coupon code and click in the URL" styleClass="font-size-1em text-left-padding" />
                                                                        <h:outputText value="2. Use the coupon code while making payment" styleClass="font-size-1em text-left-padding" />                                                                        
                                                                        <h:outputText value="For in-store offers:" styleClass="font-size-1em font-weight-bold"/>
                                                                        <h:outputText value="1. Make a note of the coupon code" styleClass="font-size-1em text-left-padding" />
                                                                        <h:outputText value="2. Use ot while making payment" styleClass="font-size-1em text-left-padding" />
                                                                    </p:panelGrid> 


                                                                </p:panel>                                                                                                                                                                                        
                                                            </p:panelGrid> 
                                                        </h:form>                                                                                                              
                                                    </p:panelGrid>
                                                    <div class="component-spacing-top"/>
                                                    <div align="center"><h:graphicImage alt="#{OfrDetBen.offer.where}" value="#{OfrDetBen.offer.bnrFullPath}" rendered="#{!empty OfrDetBen.offer.bnrFullPath}" class="banner-image" /></div>
                                                    <div class="component-spacing-top"/>
                                                </p:panel>        

                                                <div class="component-spacing-top"/>
                                                <p:tabView id="tabView">    
                                                    <p:tab id="tab_venues" title="#{msg._venues}">
                                                        <ui:repeat value="#{OfrDetBen.offer.venues}" var="venue" varStatus="status">
                                                            <div>
                                                                <h:graphicImage alt="Online store" name="img/online_store.jpg" rendered="#{!empty venue.city and venue.city == 'Online'}" style="padding-right: 5px" library="default"/> 
                                                                <h:graphicImage alt="In-store" name="img/physical_store.jpg" rendered="#{!empty venue.city and venue.city != 'Online'}" style="padding-right: 5px" library="default"/> 
                                                                <h:outputText value="#{venue.venueAsDisplayString}" rendered="#{!empty venue.city and venue.city != 'Online'}" styleClass="font-size-1em" />                                                               
                                                                <h:outputLink value="#{venue.onlineVenueAsURL}" target="new" rendered="#{!empty venue.city and venue.city == 'Online'}" >#{venue.venueAsDisplayString}</h:outputLink>                                                                                                                                        
                                                                <h:outputText value=", #{venue.contactDetails}" rendered="#{!empty venue.contactDetails}" styleClass="font-size-1em" />                                                                                                                                                                                                                                                                                                                                                                                                        
                                                            </div>
                                                        </ui:repeat>
                                                    </p:tab>  

                                                    <p:tab id="tab_terms" title="#{msg._terms_and_conditions}" rendered="#{!empty OfrDetBen.offer.termsConditions}">  
                                                        <h:outputText value="#{OfrDetBen.offer.termsConditions}" styleClass="font-size-1em" />                                                                
                                                    </p:tab>                                                        

                                                    <p:tab id="tab_reviews" title="#{msg._reviews_comments}">
                                                        <div align="center">
                                                            <div id="fb-root"></div>
                                                            <script>(function(d, s, id) {
                                                              var js, fjs = d.getElementsByTagName(s)[0];
                                                              if (d.getElementById(id)) {return;}
                                                              js = d.createElement(s); js.id = id;
                                                              js.src = "//connect.facebook.net/en_US/all.js#xfbml=1;appId=101408836627673";
                                                              fjs.parentNode.insertBefore(js, fjs);
                                                            }(document, 'script', 'facebook-jssdk'));</script>
                                                            <div class="fb-comments" data-href="http://www.discountbox.in/offer_details.xhtml?offer=#{OfrDetBen.choosenOfferSeoURL}" data-num-posts="5" data-width="685"></div>                                                                                                                            
                                                        </div>
                                                    </p:tab>    
                                                </p:tabView>                                                                                                                                                                                                                                   
                                            </td>                                                                                        
                                        </tr>                                        
                                    </table>                                                                                                           
                                </td>
                            </tr>
                        </table>                

                        <ui:include src="footer.xhtml" /><!-- footer panel -->
                    </td>

                    <td><!-- right panel --></td>
                </tr>                                
            </table> 
        </h:body>        
    </f:view>
</html>
È stato utile?

Soluzione

I have just tested and it work fine(download zClip from here): in copy parameter you can use some selector, (for example: alternative way for $('#myform\\:txt1') is using selector by styleClass $('.zzzxxx'))

<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 styleClass="zzzxxx" id="txt1" value="Stackoverflow"/>
                <a id="copylink" href="#">Copy Description</a>
            </p:panel>
        </h:form>
    </h:body>

Result:

enter image description here

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top