ZClip与<p:panelGrid>不起作用

在我的JSF-Primefaces web应用程序中复制到剪贴板我使用zClip。一切都与小代码工作很好snipet通过RongNK下面给出，但亘古不变的工作与我的实际代码，请在下面找到相同：ZClip与<p:panelGrid>不起作用

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

来源

2013-05-13 Abhishek Dhote

确保您已经添加了jQuery UI的脚本的HTML： – carrabino 2013-05-13 05:20:45

您是否有任何客户端错误？ – 2013-05-13 06:23:12

我刚刚使用https://github.com/jonrohan/ZeroClipboard进行测试，它工作正常，您应该共享您正在使用的ZClip。 – 2013-05-13 06:54:10

我刚才测试，它做工精细（从here下载zClip）：在copy参数可以用一些选择器，（例如：对于$('#myform\\:txt1')替代方式是使用选择器通过的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>

结果：

enter image description here

来源

2013-05-13 07:29:34

即使我创建了一个适用于我的示例，您的示例工作也是如此。但是，当这个问题放在我的实际代码中时，问题就开始了。当我运行我的实际代码时，我附加了浏览器中的代码。它在那里不起作用。任何线索。 – 2013-05-13 09:57:41

您应该发布您的实际代码:) – 2013-05-13 10:03:43

我可以向您发送我的代码吗？ – 2013-05-13 10:35:34

ZClip与<p:panelGrid>不起作用

回答

相关问题