jquery - ZClip with <p:panelGrid> does not work -
in jsf-primefaces web-application copy clipboard using zclip. works small code snipet given below rongnk doesnot work actual code please find 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 , empty ofrdetben.offer.couponcode}" /> <p:panelgrid columns="4" styleclass="panel-grid" rendered="#{ofrdetben.offer.isexclusiveoffer , 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 , !empty ofrdetben.offer.couponcode}" /> <p:panel id="coupon_details" header="coupon code , instructions" rendered="#{ofrdetben.offer.isexclusiveoffer , !empty ofrdetben.offer.couponcode}" styleclass="panel-grid tr panel-grid td panel-header-title-small"> <p:panelgrid columns="1"> <h:outputtext value="copy 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 , venue.city == 'online'}">#{venue.venueasdisplaystring}</h:outputlink> </div> </ui:repeat> <div class="component-spacing-top"/> <h:outputtext value="how 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 coupon code , click in url" styleclass="font-size-1em text-left-padding" /> <h:outputtext value="2. use 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 note of 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 , venue.city == 'online'}" style="padding-right: 5px" library="default"/> <h:graphicimage alt="in-store" name="img/physical_store.jpg" rendered="#{!empty venue.city , venue.city != 'online'}" style="padding-right: 5px" library="default"/> <h:outputtext value="#{venue.venueasdisplaystring}" rendered="#{!empty venue.city , venue.city != 'online'}" styleclass="font-size-1em" /> <h:outputlink value="#{venue.onlinevenueasurl}" target="new" rendered="#{!empty venue.city , 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>
i have tested , work fine(download zclip here): in copy parameter can use selector, (for example: alternative way $('#myform\\:txt1') using selector 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:
Comments
Post a Comment