How do you invoke a bean method from Javascript in PrimeFaces?
I have the following menuItem:
<p:menuitem id="toggleAlarms" icon="ui-icon-cancel" rendered="#{navigationBean.admin}" value="Cancel Alert" update=":alarmMessages" action="#{alarmsBean.toggleAlertOff()}"/>
When I click on that item in the UI the method gets called.
But when I have this element:
<p:messages id="alarmMessages">
<script>
jQuery('#alarmMessages').effect("pulsate", {times:5}, 1000 );
jQuery('#alarmMessages').show();
$('#alarmMessages').click(function() {
jQuery('#toggleAlarms').click();
alert('fool');
})
</script>
</p:messages>
If I click on the messages object on the UI, I can see the alert message with fool in it.
However, I never see the toggleAlarms.click() method invoke the alarmsBean.toggleAlertOff() call.
Am I doing something wrong?
any chance that #{navigationBean.admin} returns false ?
cause if so you wont be able to find it in the DOM... (maybe better use style=display:none)
also , your selector might be wrong if the menuitem is inside form try jQuery('#someFormID\\:toggleAlarms').click(); do view source on your web page to see the right id of the menuitem
finally try the same with commandButton instead (not sure that menuitem will respond as expected to .click())
Update
in order to check if your jquery selector is right use alert($('#toggleAlarms').length) instead of alert('fool');
Related
I am working on JSF application in primefaces in that i am showing an information to the user via <p:messages> .
So when the user click submit the page will processed and the p:messages dialog will triggered to show the information to the user ,
I referred Primefaces p:messages showcase Page
It is working fine..But after it displayed the messages , it is not closing automatically either we need to close that dialog manually or it remains in open stage.
I need it should it close automatically after it displayed the message to user...
How can i do that ...Can anybody give suggestion that how can i do ?
<p:messages id="msgs"> is ultimately rendered as <div id="msgs"> and its contents is then updated with the factual messages to the user.
If you want to clear the message screen after some delay you should use the JavaScript setTimeout function after ajax call has been completed:
<p:commandButton ...
oncomplete="setTimeout(function() { $('#msgs").html(''); }, 3000);" />
The second parameter of setTimeout function is the delay in milliseconds.
The other alternative is to use <p:growl> instead.
Worked for me for <p:fileUpload>, which was in <p:dataList> and <h:panelGrid> elements.
<p:fileUpload...
oncomplete="setTimeout(function() { $('[id$=mr-upload-messages]').hide(1000); }, 2000);">
...
<p:messages id="mr-upload-messages" showDetail="true" showSummary="false" closable="true"/>
I have used jQuery $('[id$=mr-upload-messages]' to find id's which ends with mr-upload-messages, because Primefaces adds it's unique identifier at the beginning of id.
$('#msgs').html(''); immediately hide in 3 seconds but if you want to hide slowly as jquery hide method do this..
<p:commandButton ...
oncomplete="setTimeout(function() { $('#msgs').hide(1000); }, 3000);" />
hide(1000); hiding motion will be completed in 1 second
I came across the attention, and did it this way:
function hideMsg(){
$("#msg").delay(1000).hide(1000);
}
oncomplete="hideMsg()"
According to the documentation (http://jquerymobile.com/demos/1.2.0/docs/api/events.html), the pageinit event should be called after all the widgets and plugins for a jQuery mobile page have been executed. So, I believe I should be able to interact with elements on that page with impunity in the event callback. However, I listen for the page to initialize and then try to interact with a button on the page, and I get the following error:
cannot call methods on button prior to initialization; attempted to
call method 'disabled'
I've put together a codepen, to show you:
http://codepen.io/mattsnider/pen/mvcbD
What gives? Does the pageinit not work as documented or is this a bug?
There's nothing wrong with your pageinit event. The wrong lies in the <a> tag.
To remove the error you're getting, you'll have to make two changes to your code :
Its not disabled, its disable
before your call the disable method, you have to call button() method. Thus, you would've initialized the button element.
This is how the code will look like now :
$('#ageNext').button().button('disable');
But, if you do this, you'll get an error like this :
Uncaught TypeError: Cannot call method 'addClass' of undefined
The culprit lies in the code which invokes the disable method
disable: function() {
this.element.attr( "disabled", true );
this.button.addClass( "ui-disabled" ).attr( "aria-disabled", true );
//^^ Uncaught TypeError: Cannot call method 'addClass' of undefined
return this._setOption( "disabled", true );
}
You see the this.button there? This will become undefined if the element is not a real button.
So that said, I've got the disable to work only on input[type=button] and <button/> type of elements. For some reason, this doesn't work as expected on <a/> impersonating buttons. I've got this to work by manually adding ui-disabled class to the element, like this :
$(document).on('pageinit', '#age', function (e) {
$('#ageNext').addClass('ui-disabled');
});
Demo : http://jsfiddle.net/hungerpain/gzAHT/
This may also happen if you have unmatched HTML tags, especially troubling is </div> without a previously declared <div>.
First thing to check might be that your HTML is well formed.
First of all, Thanks a lot all of you for your continuous support.
I have a problem releated .xhtml and 'f:ajax'.
I am setting richfaces:collapsiblepanel 'expanded' attribute by bean variable which is default collapsed and on blur event it gets expanded. I want to set focus a UIComponent after f:ajax request compeleted. And for that I have written a function in javascript and called it in 'onevent' of f:ajax.
But onevent function fires before panel open and I can not able to set focus on UIComponent which are define in that collapsible panel.
How can I setFocus or How can I fire that function after ajax request compeleted ?
Thanks in advance.
Your js function should look like this
function doTheFocus(data) {
if (data.status === 'success') {
//here goes the js code that will set the focus
//this code will be executed only when the ajax will be done
}
}
And here is how your f:ajax will look like
<f:ajax onevent="doTheFocus" />
If you want to call the js function of the focus when the panel is opened you can try
<rich:collapsiblePanel onswitch="doTheFocus"
or (I'm not sure...)
<rich:collapsiblePanel onswitch="doTheFocus()"
If you eventually will use the onswitch , you might be needed to add some logic inside doTheFocus function to check if the panel is expanded or not...
I am trying to call a function once a selection is made in the drop down menu. Here is my code for the drop down menu in my list.gsp for the 'Code' domain class:
<td><g:select name="data" from="${codeInstance.datas.language}"
onchange="${remoteFunction(action: 'translationById')}"/>
</td>
And here is the function I am trying to call. This is in my CodeController:
def translationById = {
println "Fine"
//println params;
}
I am just trying to print out "Fine" so I know that the function was called, but "Fine" never gets printed. Why is the function not getting called?
Instead of using a closure, use a method, like:
def translationById() {
println "Fine"
//println params;
}
Also, use some browser debugger like firebug or similar to see if error message is being displayed.
What happens if you put an alert inside the onchange event instead of a remoteFunction? If the alert is displayed, then I think your problem is with the prototype library. Add the prototype library to your header. Like <g:javascript library="prototype" />.
The syntax looks fine to me. Try to make sure that your 'codeInstance' and 'datas' are not null. Also, try and pass in the controller name like this:
remoteFunction(action: 'translationById', controller: 'code')
The new norm in grails is to use methods instead of closures:
def translationById(){
println "fine"
}
I am attempting to refresh a listview after I change the list items in it but it keeps failing with the message:
"Uncaught cannot call methods on listview prior to initialization;
attempted to call method 'refresh'".
The list is an unordered list in a div with a data-role="dialog" attribute. The list has data-role="listview". After updating, if I call $('#theULInQuestion').listview('refresh'), I get the error message. What gives?
Thanks,
Rob
There are a lot of page-events in the jQuery Mobile framework which makes it hard to determine which is the proper one to bind to. I bind to the pageshow event because by the time that event fires, the DOM is prepared (jQuery Mobile has initialized everything).
However whenever I am having issues with timing the refresh of a jQuery Mobile widget I check to see if it has been initialized and run the necessary code to either initialize or refresh the widget.
$(document).delegate('#my-dialog-id', '<page-event>', function () {
var $the_ul = $('#theULInQuestion');
//add your rows to the listview here
$the_ul.append('<li>a row</li><li>another row</li>');
if ($the_ul.hasClass('ui-listview')) {
$the_ul.listview('refresh');
} else {
$the_ul.trigger('create');
}
});
Each of the jQuery Mobile widgets have specific classes that are added to that type of widget. So you can check (after appending your rows) if the widget has the jQuery Mobile classes; if it does then refresh it, if it doesn't then initialize it.
Here is a jsfiddle: http://jsfiddle.net/jasper/urTeW/1/
Note that you can place the conditional statement to refresh/initialize anywhere in your code, it doesn't have to happen when a page-event fires.