Access Jquery UI using primefaces

Question

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!

Community · Accepted Answer · 2017-05-23 11:54:06Z

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

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered Sep 29, 2013 at 18:42

John N

8544 gold badges13 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rafael Sisto Over a year ago

Great! Thanks! I didn't see that component before. It draws exactly what I need :)

diego matos - keke Over a year ago

new link of the demo is : primefaces.org/showcase/ui/button/button.xhtml

Collectives™ on Stack Overflow

Access Jquery UI using primefaces

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related