0

I've got a problem to add any kind of event to a growl element. My goal is to close the growl by right-clicking on it.

I tried different solutions and my growl looks like this:

<h:form id="loginForm" class="col-md-2 col-md-offset-5 loginForm">
<p:growl id="growl" showDetail="false" life="3000" sticky="true" >
...Login Stuff ...
<p:commandButton id="loginButton" value="Login" update="growl js" styleClass="fullWidth loginElement"
    actionListener="#{loginBean.loginShiro}" ajax="true"
    oncomplete="handleLoginRequest(xhr, status, args)" />
</h:form>

at first I tried something like this at the end in my javascript code:

$( '#growl').onClick(function() {
    alert('Test!!!')
});

I swapped the "#growl" to ".ui-growl", ".ui-growl-item" and ".ui-growl-item-container", but with no effort.

Then I thought maybe the growl element is not rendered when javascript is rendered, and i tried to put my javacode directly in the form and update it with the commandbutton as well. So this part was directly in the form:

<h:panelGroup id="js">
    <script type="text/javascript">
        $('#growl').onClick(function() {
         alert('Test!?')
        });
    </script>
</h:panelGroup>

... didn't worked as well.

just adding a onclick="..." property wasnt working and i couldn't add a element becouse a growl is just a message and its missing an interface.

I'm out of ideas, do you guys have any suggestions? I dont want a button to close it, and i achieved to close it with a left-click with help of this answer: https://stackoverflow.com/a/15711724/3297005

but thats still not exactly what i wanted.

The best solution would be this: $('#grow').mousedown(function(event) {...}

couse i dont know any other way to check if the button pressed, was a right-mouse button.

I hope someone has an idea.

thanks guys

Edit:

Thanks for your suggestions.

After your comments I tried to use: $("#loginForm\:growl_container").ready(...) and this works. So i think its the right path to my element.

But:

$("#loginForm\\:growl_container").click() and 
$("#loginForm\\:growl_container").mousedown()

are still not working :'-(

I tried to update them in my panel element too, but also without success.

I tried the click events with other elements inside my form, and its working. I think there must be something special with this p:growl or h:message elements.

Community
  • 1
  • 1
Zahori
  • 1
  • 1
  • 2

1 Answers1

0

Since p:growl is inside the h:form you can't access the p:growl only by its ID.
Attach the Form Id while accessing it.

And one more thing is Primefaces seems to attach the text _container to the end of your p:growl Id.
So if you have

<p:growl id="myGrowl">...</p:growl>

then the Id would be:myGrowl_container

Example:

$("#loginForm\\:growl_container")

And also try using click() when using Jquery like one of the Question comments suggest.

Kishor Prakash
  • 8,011
  • 12
  • 61
  • 92
  • Thanks Kishor, I tried your solution and can access the element with the ready() function. But with I still dont get a reaction with click() or mousedown(). :( – Zahori Feb 20 '14 at 08:01