Anyway to upload file by ajax in JSF? - jsf

I need to upload file ajax so that I can show the name of uploaded file but without adding any jar files like primefaces, richfaces.
My form is inside dialog box where I have an upload button which should call a method by ajax. My code is something like this...
<h:commandButton value="Upload" action="#{bean.uploadMethod}">
<f:ajax listener="#{bean.abcMethod}" event="click"/>
</h:commandButton>
and I would also like to know if I can just browse, keep the name of file in some list to show and then I can submit my whole form. This submission should also upload those files which I have shown the name in list. Is it possible?

I'm also struggling with uploading files (images) through AJAX. I've looked for several methods and how companies like Google or Dropbox implemented this.
So far I found two methods:
Use an iframe to submit the file. This isn't actually AJAX, so it works in most browsers. However I have yet to see an implementation (other than PrimeFaces') in JSF.
Encode the file client side with base64, send through AJAX and decode on the server side. However I haven't seen an implementation in JSF and I haven't got the time past days to actually cook something up.
If you want a quick solution you can use primefaces, richfaces (and probably icefaces). But you already said you didn't want to use one of those.
Maybe someone is nice enough to post a real solution here, but I thought I'd throw in an idea or two. ;-)

Primefaces offers the FileUpload component which is a fully AJAX enabled file upload JSF component.
Here is the showcase example
I am not complete sure how it works but I believe it utilizes modern browser features through HTML5. This functionality of course requires that the client be a modern browser that can understand HTML5 markup.

Related

How do I safely insert potentially malformed HTML into a JSF page?

I'm working on a JSF page that needs to have the corporate privacy policy updated. Rather than copy-and-paste the new text, I'd prefer to have the PrimeFaces dialog that displays it link to the privacy policy elsewhere. So, I'm doing this:
<p:dialog id="dlgPrivacyPolicy">
<ui:include src="https://cdn.mycompany.com/privacy/en-us/privacy.htm"/>
</p:dialog>
The problem is, the HTML on that page is slightly malformed; there's a <meta> tag that isn't closed. This causes my JSF page to fail to compile.
I could track down whoever maintains that page and ask them to correct it, but that's a band-aid. If any more malformed HTML shows up on that page, it will crash mine. And having my page fail to load because the privacy policy didn't close a tag just isn't acceptable.
Is there a safe way for me to insert potentially malformed HTML into my page? Or am I stick with copying and pasting if I really want to avoid that issue?
If you don't want xhtml compilation problem, you should not include the malformed page in server side but in client side, for example by running ajax request on it and include it by using innerHtml attribute of the dlgPrivacyPolicy div.
Using JQuery :
$.ajax({
url: "https://cdn.mycompany.com/privacy/en-us/privacy.htm"
})
.done(function( html ) {
$( "#dlgPrivacyPolicy " ).html( html );
});
Considering your requirements (mentioned in your question and comments) I'd suggest to use jsoup: You can fetch the html content server-side, sanitize it and then use the sanitized content on your page. The sanitizing step is completely up to you (and jsoup's great capabilities) which can include removing unused/unsafe parts of the page (i.e. headers, css etc) as required.
I'm afraid that including a complete HTML page verbatim is always going to be painful. There's the risk of malformed HTML, or the page might do funny things like overwrite CSS styles, pollute global Javscript scope or whatever.
I think the only clean, maintainable solution will be to agree on some kind of (web) service that provides the privacy policy in a well-defined format (HTML, XHTML, whatever) suitable for inclusion elsewhere. This also makes sure the provider of the privacy policy does not suddenly decide to change the URL, or include a popup or similar. The important point is that the service is an official service with agreed-upon rules.
If you cannot get that service, you'll have to find workarounds. The best I can think of would be to filter the policy through some tolerant HTML parser on your side to fix it (at runtime, or as part of the build). Then you can also fix things like over-eager CSS rules or bad Javascript, as applicable.

Submit value from jade template without refresh

I am a newbie in node.js. Just need a little bit of clarification here. I am using jade as the view engine. Other than normal form submit and ajax technology, is there any other way to submit date from a jade template in node?
Thanks
socket.io is one other method, although it's not tied to Jade specifically (can also be used from plain HTML).
Heck, you could even go 1999 and write a 1x1px transparent <img> with a src url containing GET parameters picked up by another route. If you are going to all that trouble, why are you not just using ajax again?

Why does JSF process the entire form

We are developing web application using JSF. We are using rich faces on Jboss server. We have a4j command buttons , command links and a4j js functions to invoke server actions.
We have set limit render to true, render only required components. And I also set execute to "#this" . We are observing a strange behavior , All the actions associated with the form are also executed along with the button clicked, even though we have not specified the execute value to "#this". This is bringing down the performance drastically.
Is this the way JSF process POST requests or is there something else we are missing?
What you're currently describing in the question is definitely not the default behaviour of JSF nor RichFaces.
Your concrete problem is caused elsewhere. As per the comments, you seem to have created a PhaseListener for logging purposes which is re-executing the entire view for some reason. You'd need to turn off this PhaseListener or to fix its implementation.

Is there a way to have a JSF page automatically update a webpage when bean values change?

(Using JEE6) Is it possible to have a webpage automatically update (or listen) to values from within a bean/class and display them on the JSF when these changes happen?
As KayKay mentioned you can implement some sort of polling methodology using javascript to ask the server periodically to send updates if there are any. And unless you use ajax you will have to be content with only complete page refreshes.
JSF as good as it is, sits on top of basic stateless web technology. As such unless you use Ajax or some custom code the server will only respond to a request from the client. Some libraries like icefaces have incorporated a "push" component that allows what you are looking for (from what I understand, this is a fundamental part of icefaxes). That is, to push server side changes to the client.
You have to set up a listener on your end so that your bean will be notified when a value change happens on the server (like in your backing bean which is on the server). When the change happens you can ask say, 'icefaces push' (or another library like primefaces, which you indicate you don't want to use) to send a notice to the client. The client side code (usually ajax/javascript) will process the notice and then send a request for the whole object per normal request response. That is the notice tells the client something it's interested in changed so the client can ask for an update. Aside from the notice, still request/response.
I mention icefaces push because it seems to be the favoured library for this now. But others have this as well. I don't believe the standard JSF 2.0 AJAX libraries have this.
Here are a couple of resources to look at:
(The video is a good start to get the idea of what is going on, then use the rest of the site)
http://www.icesoft.org/demos/icepush-demos.jsf
Older but I think still relevant IBM tutorial on what you want to do, using inventory changes as an example:
http://www.ibm.com/developerworks/web/library/wa-aj-dynamic/index.html
And another stack question related:
Is there a better Ajax Push for JSF 2.0 than Icefaces
Unfortunately it looks like you cannot do this with just JSF, you will have to use one of these libraries or even harder, roll your own push mechanism.
I don't know of a JSF feature to do so. I would simply do some javascript polling, using for example jquery load method to refresh the parts of the page where the values are displayed.
It would help to know what you want to do : refresh the whole page when there is a change, update somes values that are displayed from the start, or add new values to the page.

Log in (form-based) from JSF page

Using JSF 1.2 and RichFaces 3.3.1 on JBoss 4.2.3.
I've just started on a JSF Application. It uses XHTML files for most of its content, and a login.jsp with form-based authentication for logging in, something I understand is common in JSF applications. However, I now need to include sections from the regular pages, which include a header bar and a right panel, that have RichFace styles. I've tried dozens of combinations of ways to put the Rich tags into the login page, while still allowing the submit to go through j_security_check, but so far nothing has worked. Is there a way to do this?
Just convert login.jsp to login.xhtml. It doesn't matter for j_security_check where the request is coming from. You can just use plain HTML in a JSF/Facelets page.

Resources