1

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?

JackTheKnife
  • 3,795
  • 8
  • 57
  • 117
  • When I download the latest release off GitHub, I see `primeelements.js` and `primeelements.min.js` right in the Zip. Are you not seeing these? – Twisty Nov 16 '16 at 22:30

2 Answers2

1

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.

Twisty
  • 30,304
  • 2
  • 26
  • 45
  • Exactly - there is something wrong with PrimeUI 4.x library or their documentation (not up to date?). I went back to version 3 and elements, which were there, are working in about 75% compared to version 4 – JackTheKnife Nov 17 '16 at 13:56
  • 1
    @JackTheKnife I would hop on their GitHub and report some of this there. I have forked a plunker with the primeui.js and tried to tinker around with that section of code. What I have found is that it does not seem to appear as a jQuery Object; hence, `.zIndex()` cannot be called, is not a function of that object. I might go back into their earlier code and see if this is handled in a different manner, and maybe we can roll the code back for just that function. – Twisty Nov 17 '16 at 17:37
1

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

Nikofoxxx
  • 125
  • 1
  • 6