4

I am building a JSF application and want to convert a simple h:link to look like a button using jquery ui button widget. I am using JSF2 and primefaces 3.5.

I manually added the jquery-ui.js and have the following xhtml:

<h:link styleClass="linkGr" outcome="#{listadoUsuario.verUser(user.username)}">ver</h:link>
<script>$(".linkGr").button({icons: {primary: "ui-icon-pencil"},text: false});</script>

Having this in a page works fine, but in other pages, I see the following error:

TypeError: Object function (f,h,e){var g=f.split(".")[0],j;f=f.split(".")[1];j=g+"-"+f;if(!e){e=h;h=b.Widget}b.expr[":"][j]=function(k){return !!b.data(k,f)};b[g]=b[g]||{};b[g][f]=function(k,l){if(arguments.length){this._createWidget(k,l)}};var i=new h();i.options=b.extend(true,{},i.options);b[g][f].prototype=b.extend(true,i,{namespace:g,widgetName:f,widgetEventPrefix:b[g][f].prototype.widgetEventPrefix||f,widgetBaseClass:j},e);b.widget.bridge(f,b[g][f])} has no method 'extend'

I noted that this happens in pages where primefaces adds the jquery-plugins.js.

I tried not including the jquery-ui javascript manually since I see the jquery-plugins adds the button widget, but the problem is when adding jquery-plugins (not including jquery-ui.js) I cannot see how to convert the link to a button. The function button is not available in $. Can somebody guide me on how to use primefaces included button method?

Thanks in advance!

Rafael Sisto
  • 404
  • 5
  • 19

1 Answers1

1

PrimeFaces already incorporates jQuery UI, you shouldn't bundle it yourself. There is p:button component. Here is example on Primefaces Showcase. So for your case:

<p:button outcome="#{listadoUsuario.verUser(user.username)}" value="ver" icon="ui-icon-pencil"/>

You can use 

 <f:param name="productId" value="10" />

if you need GET parameters in your URL.

See also: https://stackoverflow.com/a/18916907/2692917

Community
  • 1
  • 1
John N
  • 844
  • 4
  • 12
  • 20