Apologize for this question but my knowledge in JavaScript is quite minimal.
After the user press the button a dialog will popup so I want to add the spin.js into the dialog.
Dialog jsf file:
<script type="text/javascript">
function showStatus() {
document.body.style.cursor = 'wait';
statusDialog.show();
}
function hideStatus() {
document.body.style.cursor = 'default';
statusDialog.hide();
}
</script>
<p:commandButton id="genButton"
value="Generate Files"
widgetVar="startButton1"
disabled="#{נean.disableButton}"
actionListener="#{bean.generateUdm}"
onclick="PrimeFaces.monitorDownload(showStatus, hideStatus)"
ajax="false"
style="width:200px"
icon="ui-icon-shuffle">
<p:fileDownload value="#{bean.streamedContent}"/>
</p:commandButton>
<p:dialog modal="true" header="Generating fILE" showHeader="true"
position="center"
widgetVar="statusDialog"
draggable="false"
closable="false"
resizable="false">
????????????? ADD SPIN ???????????
</p:dialog>
I manage to add the spin to my web app but not via the dialog.
I would appreciate to get some code example.
If all that you want is adding loading image to dialog why don't you put a simple gif (can get one from google Or generate one by your self Ajaxload - Ajax loading gif generator)
and use simple <h:graphicImage to show it...
JSF 2 GraphicImage Example
?
Related
I have a java ee application where I'm using JSF with Primefaces.
Now I need to open a dialog where PDF document is displayed.It is disabled to print or download the document. So I have hidden the bar.
<p:dialog widgetVar="dlgpdf" height="800" width="950" header="pdf" maximizable="false" minimizable="false" resizable="false" dynamic="true" showEffect="clip">
<p:media value="#{DIPCSS.downloadFiles()}" player="pdf" width="900px" height="600px" id="pdfvisualizer">
<f:param name="idee" value="#{DIViewBean.id}" />
<f:param name="#toolbar" value="0" />
</p:media>
</p:dialog>
Everything is fine here.
But how do I know that the user has scrolled to the end of the document? Then I want to enable the button press.
I've tried a lot of JS code, but none of it works for me. The problem is probably that it's in a dialog and there is a new html structure. Any recommendations?
I try this now:
<script type="text/javascript">
const myDiv = document.getElementById('pdfvisualizer')
myDiv.addEventListener('scroll', () => {
if (myDiv.offsetHeight + myDiv.scrollTop >= myDiv.scrollHeight) { console.log('scrolled to bottom')}
})
</script>
And Error is: Uncaught TypeError: Cannot read property 'addEventListener' of null
I am trying to hide my content by clicking the button. But when the page is loading, content is hiding but after finishing page load content is showed. This content doesn't hide. I am using Visual Studio 2017 community and asp.net/vb.net framework. But the same JQuery code is working on my text editor and my browser.
Here is my sample code:
<p id="justp" class="testcls">Hi Hide me!</p>
<asp:Button ID="testbtn" runat="server" Text="hide me" />
<script>
$(function () {
$('#testbtn').click(function () {
$('.testcls').hide();
});
});
</script>
I am try to passing alert inside hide() and it is run successfully :
$('.testcls').hide(alert("Hello"));
What is the problem?
How can I solve this?
In case your are just using this button to hide/show your content on the client side (no server side calculation or something like that) use a normal input / button tag:
Replace this:
<asp:Button ID="testbtn" runat="server" Text="hide me" />
With this line:
<button type="button" id="testbtn">Hide me!</button>
As mentioned above this solution will only work if you don't need to submit any data.
What is the problem?
The button submits your form after the click so the page will be refreshed and the view will return to the default status.
How can I solve this?
You've several ways to change this behavior :
if you have got a control on the asp code you could remove the runat="server" to prevent the button from submitting :
<asp:Button ID="testbtn" Text="hide me" />
You could simply add the return false; statement at the end of the event.
Another way is preventing the default behavior using preventDefault() like :
$('#testbtn').click(function (e) {
e.preventDefault();
$('.testcls').hide();
});
The one that I recommend to you is using UseSubmitBehavior:
<asp:Button ID="testbtn" runat="server" UseSubmitBehavior="false" Text="hide me" />
Last choice is using the plain HTML code like :
<button type="button" id="testbtn">Hide me!</button>
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 an Asp.net application.
Within that application I have a ModalPopupExtender embedded within an ASCX user control.
I would like to be able to wire up a cancel button so I can hide the popup when user presses cancel
without doing a post back.
Here is what I have so far:
<cc1:ModalPopupExtender ID="PopupExtender1" runat="server" PopupControlID="pnlPopup" BehaviorID="mdlPopupForm"
TargetControlID="btnHiddenSubmit" OkControlID="btnOkay" CancelControlID="btnCancel"
Drag="true" PopupDragHandleControlID="PopupHeader" EnableViewState="true"
BackgroundCssClass="modalBackground" ClientIDMode="Static" />
Here is the HTML for btnCancel
<input type="button" id="btnCancel" onclick="cancelPopupPanelClick()" value="Cancel" />
Here is the javascript:
function cancelPopupPanelClick() {
alert('CancelEventFired');
var modalPopup = $find('PopupExtender1');
if (modalPopup != null) {
modalPopup.hide();
}
}
The event fires fine. The issue I'm having is that I can't "Find" the modalPopup in order to hide it.
Is this complicated by the fact that I have the ModalPopupExtender embedded in an ASCX control?
I have verified that the "AjaxControlToolkit.ToolkitScriptManager" is loaded in the containing ASPX page.
Can someone get me pointed in the right direction?
Thanks,
JohnB
You're using invalid selector, try this:
var modalPopup = $('#PopupExtender1');
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.