Rectangle 27 8

You ultimately need a hook on the HTML DOM change event of <input type="file">. Without ajax (via <p:ajax>) that gets tricky with <p:fileUpload mode="simple"> for 2 reasons:

  • It doesn't support onchange attribute. It might be worth an enhancement request to PF guys. Fortunately, since JSF 2.2 you can specify passthrough attributes.
  • skinSimple="true" generates a <span><span><input /></span></span> and the passthrough attribute would render onchange on all those elements. You need an additional check if this is the <input> element.

All in all, here's how it could be done:

<html ... xmlns:a="http://xmlns.jcp.org/jsf/passthrough">
...
<h:form enctype="multipart/form-data">
    <p:fileUpload label="choose file" mode="simple" skinSimple="true"
        value="#{bean.file}"
        a:onchange="if (tagName == 'INPUT') { if (!!value) PF('button').enable(); else PF('button').disable(); }" />

    <p:commandButton widgetVar="button" value="upload" 
        action="#{bean.upload}" ajax="false"
        disabled="#{facesContext.renderResponse or not facesContext.postback}" />
</h:form>

The condition in the disabled attribute of the button makes sure that it's only disabled during render response phase and an initial GET request. Otherwise JSF would refuse to queue the action event as per point 5 of commandButton/commandLink/ajax action/listener method not invoked or input value not updated.

The button is tied to the document as widgetVar so that JS could enable/disable it via its enable() and disable() functions.

unfortunately it's not working as expected, i get an error: Error Parsing XXX.xhtml: Error Traced[line: XXX] The prefix "a" for attribute "a:onchange" associated with an element type "p:fileUpload" is not bound. Using primefaces 5.2 by the way and jsf 2.2.12

So you didn't click the "passthrough attributes" link to learn about it? I'll update the answer.

i clicked it, but didn't read it carefully enough it seems. Thanks again for this great answer, you seem to know everything about jsf.. respect

You're welcome. JSF is much easier if you know a bit of HTTP/HTML/CSS/JS (after all, that's what JSF is consuming and producing under the covers).

jsf - Check whether a file has been chosen in p:fileUpload - Stack Ove...

jsf file-upload primefaces
Rectangle 27 0

You need to hook on a status of success instead. This will run after the HTML DOM tree has been updated. The status of complete runs directly after the ajax response has been returned. This is admittedly a misleading status name, but you should try to interpret it in context of "HTTP request" like as the begin status.

Another problem is that the document.getElementById() selects items by the HTML element ID, not by JSF component ID. You need to give it exactly the ID as JSF has generated to the HTML. You can figure the right HTML element ID by viewing the page source in webbrowser.

function showAlert(data){
     if (data.status == "success")
         alert(document.getElementById("fff:stateSelected"));  
}

have tried both complete and success. Both give the same result.

I checked your code once again. Where is the component identified by timeResult? Is it inside the same form or not?

Sorry. Have updated the form. Was a mistake.

document.getElementById("fff:stateSelected") returns null because the id generated is j_idt6:fff. How do we get this id in the javascript function?

jsf ajax call: executing javascript function in the end - Stack Overfl...

javascript ajax jsf-2
Rectangle 27 0

Try parsing all html responses with BeautifulSoup, then mechanize should recognise the form. You can see how to do it in this answer Is it possible to hook up a more robust HTML parser to Python mechanize?

Python's Mechanize not recognizing a form that the HTML and BeautifulS...

python mechanize
Rectangle 27 0

I have been a framework nomad for quite sometime. I have tried out JSF, GWT, vaadin, Stripes, play, Tapestry5, and finally wicket. I however got hooked to wicket. This is purely a personal preference and i may not make a good technical argument. I like the fact that wicket is very straight forward. I learnt the hard way that playing around with a framework and actually using it in a real project for a real client are 2 different things. I have undertaken several projects for real clients. I must stay that there is nothing that the clients asked for that i was unable to do with wicket. The main benefit is that a wicket does not do any magic. I have my html and my java files. i can use jquery or prototype when i want. I can make a single page application or a traditional application. I can make a Rich UI or just a plain one with not javascript at all (some clients ask for it for access from very remote browsers e.g not smart phones). I can even make a rich responsive ajax client that will fallback to plain html where javascript is not available. My point: with the kind of transparency that wicket provides, nothing stands on your way.

angularjs - Picking a front-end UI framework - Stack Overflow

angularjs flex user-interface extjs vaadin
Rectangle 27 0

$.post("/page/",
    "",
    function(json){
        try{

        //relevant part
        for(element in json){
            $(element).val(json[element]);
        }
        //end of relevant part

        }catch(e){alert(e.description);}
    }, "json");

Matt's answer is correct, I misread the json response. This is a simpler handler, as it only takes into account the text values of the elements.

ajax - How to hook json response to html form via jquery? - Stack Over...

jquery ajax json forms
Rectangle 27 0

for(var element in json){
    for(var attribute in json[element]){
        $('#' + element).attr(attribute, json[element][attribute]);
    }
}

I think this looks good. Thanks! And setting the "value" attribute is as good as setting the element.val(), right?

Yes, settings $('#input1').attr('value', 123) will set the value of the field.

ajax - How to hook json response to html form via jquery? - Stack Over...

jquery ajax json forms
Rectangle 27 0

There isn't, but you can hook an event listener on JSF ajax request(s) via <f:ajax onevent> and jsf.ajax.addOnEvent. You can then execute some JS code before the ajax request is sent, or after the ajax response is arrived, and/or after the HTML DOM is updated. Depending on the concrete functional requirement, that may be actually what you're looking for.

Here's how such an event listener function can look like:

function someAjaxEventListener(data) {
    var status = data.status;

    switch(status) {
        case "begin":
            // This is invoked right before ajax request is sent.
            break;

        case "complete":
            // This is invoked right after ajax response is arrived.
            break;

        case "success":
            // This is invoked right after HTML DOM is updated.
            break;
    }
}
<f:ajax ... onevent="someAjaxEventListener" />

And here's how you can register it on a view-wide basis (thus, hooking on every <f:ajax>):

<h:outputScript>jsf.ajax.addOnEvent(someAjaxEventListener);</h:outputScript>
<h:outputScript name>

Actually, although a very bad design, you could get hold of the Queue object and enqueue your requests there. BTW, the queueing mechanism for Multipart form is broken. If it queues one request, it will not process further requests. I raised the relevant bug: JAVASERVERFACES-3106

javascript - Is there a way to queue my JS functions to the JSF event ...

javascript ajax jsf
Rectangle 27 0

jQuery.each(jsonObject, function(input_idx, input_val)
{
    var input = $('#' + input_idx);
    jQuery.each(input_val, function(attr_idx, attr_val)
    {
        input.attr(attr_idx, attr_val);
    });
});

Or you can just use simple for loops:

for (var input_idx in jsonObject)
{
    var input_val = jsonObject[input_idx];
    var input = $('#' + input_idx);
    for (var attr_idx in input_val)
    {
        input.attr(attr_idx, input_val[attr_idx]);
    });
});

ajax - How to hook json response to html form via jquery? - Stack Over...

jquery ajax json forms