I'm currently using PrimeFaces to create a web service and ran into a snag while trying to show() a dialog box using a javascript function instead of an onclick="__.show();" command.
What I would like to do is:
function displayPopup(){
statusDialog.show();
}
and if I do something like
a href=”#” onclick=”statusDialog.show()”
Then it works just fine (but not the work flow I require).
This is the PrimeFaces code:
<p:dialog modal="true" widgetVar="statusDialog" header="Your request is in progress..." draggable="false" closable="false" resizable="false">
<img alt="Banner Right" src="#/images/ajaxloadingbar.gif" border="0"/>
</p:dialog>
This is the generated code:
jQuery(function() {statusDialog = new PrimeFaces.widget.Dialog('j_idt41',{autoOpen:false,minHeight:0,draggable: false,modal: true,resizable:false,closable:false});});
I haven't seen show() before, but you can generate an alert with the alert() function, or an alert with "Yes" and "No" buttons using the confirm() function, int confirm(String text).
It sounds like you just want to call alert("Your request is in progress...").
I don't think you can show images in the basic alert, but 5 seconds on google gave me this site:
http://javascript.internet.com/miscellaneous/custom-alert-box.html
Which seems to solve your problem.
Related
Im developing a SW Application. I have been for several time trying to show a modal between the transition of my xhtml pages. I dont want the user can push many buttons or repeat pushing while the next screen is loading.
First i tried it putting an overlayPaneltrying to cover the full screen but i found this problem:
p:overlayPanel Full Screen
Then, I tried it using blockUI blocking the whole body of my page, but then I found this other problem:
p:blockui disable ajax
Finally, I really thought that i got it, using a JS function but then I had this problem (basically the problem is that it dont works with the dataTable):
onstart and oncomplete dont work in datatable with p:commandLink
Thank U In Advice!!!!
to make an ajaxStatus try to make it like that (do not forget that the ajaxStatus is invoked each time you use a p:ajax that mean in your dataTable you need to add an ajax event when you try to invok it )
mypage.xhtml
<p:ajaxStatus onstart="PF('statusDialog').show()" onsuccess="PF('statusDialog').hide()" />
<h:form id="form">
...
</h:form>
<p:dialog widgetVar="statusDialog" modal="true" draggable="false" closable="false" resizable="false" showHeader="false">
<p:graphicImage name="ajaxloadingbar.gif" library="images/myIcons" />
</p:dialog>
Hope that helped you
I have a calender script in my project. For using it, I have added an image and on its onclick event I call a javascript function displayDatePicker:
<img alt="Calender" src="calender.jpg" onclick="displayDatePicker('txtBox1', this);"/>
I use a masterpage in my project and if the image and the associated textbox control are in contentPlaceHolder, the javasript library's function document.getElementsByName returns null and it seems that it can not detect controls inside a contentPlaceHolder.
I used this code for a page that was not using a masterpage and everything went well.
I appreciate any help from you in advance.
Good luck.
Your asp textbox may render as something like:
<input name="ctl00$FeaturedContent$txtBox1" id="FeaturedContent_txtBox1" type="text"/>
So, in javascript, you should use clientid:
<img alt="Calender" src="calender.jpg" onclick="displayDatePicker('<%= txtBox1.ClientID %>', this);"/>
The problem is, I have next to no knowledge of javascript, and just a passing knowledge of PrimeFaces, and I couldn't find how-to in the documentation :(
So I have a primefaces text box on my page:
<p:inputText styleClass="step1-input" value="#{PageBean.documentToDownload}">
<p:ajax event="keyup" update="infopanel,infopanel2,downloadbutton" listener="#{PageBean.validateUrl}"/>
</p:inputText>
In the text box, when I write something, an action takes place, which takes a few seconds to complete. On result, a panel appears on the page that either displays something, or says what I've written is wrong:
<p:panel id="infopanel" visible="#{PageBean.validLink and PageBean.info != null}" header="Information" style="margin-bottom:10px;">
<h:outputText value="Everything is okay"/>
</p:panel>
<p:panel id="infopanel2" visible="#{PageBean.validLink and PageBean.info == null}" header="Error" style="margin-bottom:10px;">
<h:outputText value="An undefined error occured."/>
</p:panel>
There's already a primefaces statusDialog on the page that I can use:
<script type="text/javascript">
function start(){ statusDialog.show(); }
function stop(){ statusDialog.hide(); }
</script>
So, what I want to do is: on keyup event in the input text I want to launch start() function, to display a dialog, only if PageBean.validLink is true (validLink is set in PageBean.validateUrl listener, and it's instantaneous)
And when infopanel or infopanel2 is shown as an ajax action, I want to call the stop() function.
So, how can I do that?
If i understand your question correctly you want to execute javascript function when the ajax action completes? For this you can use the oncomplete attribute on the ajax component:
<p:ajax event="keyup" update="infopanel,infopanel2,downloadbutton" listener {PageBean.validateUrl}" oncomplete="stop()"/>
If you want to make a callback to execute before an ajax reques begins, you can use the onstart attribute
<input id="btnupdate" type="button" value="Update" onclick="update()"/>
<img id="loadupdate" src="http://localhost/connectu/styles/images/load_big.gif">
This code is returned by and PHP script in response to AJAX request. The update() function contains the code to hide the button and the image.
document.getElementById('btnupdate').style.display='none';
document.getElementById('loadupdate').style.display='none';
The update() function is in the native file. But the problem is, image gets hidden but not button.
I tried FIREBUG. No javascript errors.
This should be style.display:
function update(){
document.getElementById('btnupdate').style.display='none';
document.getElementById('loadupdate').style.display='none';
}
SEE IT'S WORKING
Change to
document.getElementById('btnupdate').style.display='none';
That should work
I am reading an xml file using javascript and then I need to submit my form so that it calls a particular method in my JSF handler. Usually this can be done on a jsp when user clicks a button by having an actionlistener like so:
<h:commandLink styleClass="button" action="#{myHandler.outcome}" actionListener="#{myHandler.doNext}">
<span><h:outputText value="#{text.button_submit}" /></span> </h:commandLink>
I am not sure how to call a method like 'doNext' above in the handler from javascript. I cannot do a simple:
document.form.submit();
as it then repeats the processing i have already done. I want to read values from an xml file and then call a particular method in handler. Any ideas much appreciated.
I found a solution to this. I added a hidden button to my jsp like:
<p id="hiddenButton" style="display:none;" >
<h:commandLink id="hiddenRegButton" styleClass="button" action="#{myHandler.doNext}" />
</p>
and in my javascript I used jQuery to execute the click which leads t the "doNext" method in my Handler to get executed.
jQuery('#hiddenRegButton').click();
this was easier than I thought.