PrimeUI - how to get it to work?

Question

PrimeUI - how to get it to work?

2.3k views Asked by JackTheKnife At 16 November 2016 at 20:25

I'm new to PrimeUI and have tried to follow steps from PrimeUI QuickStart guide.

From one paragraph:

In order to use PrimeElements, add X-Tag library that also includes the pollyfill for custom elements.

<script type="text/javascript"src="%PATH%/x-tag-core.min.js"></script> 
<script type="text/javascript" src="%PATH%/primeelements-3.0.js"></script>

but PrimeUI download package doesn't contains primeelements-3.0.js. Any clue where I can get that file?

Going forward with examples. I have tried to use code from PrimeElements - Web Components

<button type="button" is="p-button" icon="fa-external-link" onclick="document.getElementById('dlgelement').show()" >Show</button>


<p-dialog id="dlgelement" title="Dialog Header" modal showeffect="fade" hideeffect="fade" draggable resizable>
    <p>Dialog content here.</p>
</p-dialog>

final effect is that I can open dialog box but not able to close it due to errors

primeui.min.js:3 Uncaught TypeError: t(...).zIndex is not a function
    at HTMLDocument.<anonymous> (http://localhost/lib/primeui.min.js:3:9501)
    at HTMLDocument.dispatch (http://localhost/lib/jquery.js:4732:27)
    at HTMLDocument.elemData.handle (http://localhost/lib/jquery.js:4544:28)

I have tried other code examples from their showcase but I have got about 10% of them to work.

Any itps what I have missing?

Original Q&A

There are 3 answers

**Twisty** · Answer 1 · 2016-11-16T23:51:17+00:00

I created a Plunker based off the Dialog sample code and it would not execute the PrimeElement code. Here is the example I created (Version 3: https://plnkr.co/edit/WMawVdtcvDpmVxzI4b3Q?p=preview )

index.html

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="theme.css" />
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/primeui/4.1.15/primeui.min.css" />
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.js"></script>
  <script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/primeui/4.1.15/primeui.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/x-tag/1.5.11/x-tag-core.min.js"></script>
  <script type="text/javascript" src="primeelements.js"></script>
</head>

<body>
  <button id="btn-show" type="button" onclick="document.getElementById('dlgelement').show()" is="p-button" icon="fa-external-link-square">PrimeElement</button>

  <p-dialog id="dlgelement" title="Title of Dialog" modal>
    content here

    <script type="x-facet-buttons">
      <button type="button" is="p-button" icon="fa-check" onclick="document.getElementById('dlgelement').hide()">Yes</button>
      <button type="button" is="p-button" icon="fa-close" onclick="document.getElementById('dlgelement').hide()">No</button>
    </script>
  </p-dialog>
</body>

</html>

This is based off the Quick Start and Dialog example.

I was only able to get it to work after I added jQuery initialization.

  <script>
  $(function(){
    $('#dlgelement').puidialog();
    $('#btn-show').click(function(){
      $('#dlgelement').show();
    });
  });
  </script>

Working here: (Version 5) https://plnkr.co/edit/WMawVdtcvDpmVxzI4b3Q?p=preview

It may be a bug in the PrimeUI. You can for the Plunker and test your own code.

Update

As I tinker with this more, since I have not used PrimeUI before, I updated my Plunker to match their example code. When I go to close a dialog is when I encounter the error you described.

TypeError: t(...).zIndex is not a function

...nd(this.blockEvents,function(i){return t(i.target).zIndex()<e.element.zIndex()?!...

primeui.min.js (line 3, col 9489)

I switched to the non-minimized version and got:

TypeError: $(...).zIndex is not a function

if ($(event.target).zIndex() < $this.element.zIndex()) {

primeui.js (line 4116, col 29)

.zIndex() is an element of jQuery UI and should have already loaded. This error suggests that something in PrimeUI is not using it right or disabling it.

**Nikofoxxx** · Answer 2 · 2018-02-05T13:08:40+00:00

Download the latest release of PrimeUI and import the files primeui-all.min.js and primeui-all.min.css into your html. They have the necessary libraries embedded (jQuery, jQuery-UI...). Once this is done, the errors will disappear.

Working here: plnkr.co/edit/y0zevrqyTpVpxdS4Yr1x?p=preview

**keizee** · Answer 3 · 2023-11-06T10:56:57+00:00

This error can be reproducible when you attempt to click outside a dialogue box when modality is turned on. Primeui will check if the element youre clicking is above the modality mask so it can decide to ignore your input. When it does that, it will call the zIndex function, which does not exist because of the wrong jquery ui.

Primeui 4.1.15 is only compatible up to jquery ui 1.11.4. From jquery ui 12 and above, zIndex is deprecated. Therefore, the solution is simply to downgrade to 1.11.4.

https://api.jqueryui.com/1.11/zIndex/

https://jqueryui.com/upgrade-guide/1.12/#removed-zindex

(You may need to add a migration script for jquery 3.0.0+ since jquery ui 1.11.4 has other separate compatibility problems with jquery.)

It probably is possible to lift the zIndex function from 1.11.4 and add it in newer jquery ui versions, but this is only if you downloaded jquery ui locally and compile it together when deploying your webapp. In the end, the above option of using jquery ui 1.11.4 was what I went with to deal with this problem.

TechQA.

PrimeUI - how to get it to work?

There are 3 answers

Related Questions in JQUERY

Related Questions in JQUERY-UI

Related Questions in PRIME-UI

Popular Questions

Popular Tags

Trending Questions