Rectangle 27 2

binding="#{abc}"
binding="#{myBean.uiAbc}"
#{abc.clientId}
#{myBean.uiAbc.clientId}
function doSomething(){
    $("##{myBean.uiAbc.clientId}").val("hello everyone");
}

That the id and binding need have to be the same name is complete nonsense.

The only problem which you may face is that the default JSF naming container separator character, :, is a special character in CSS selectors, like as used in jQuery, and thus this construct would possibly fail. This construct would only work if you've manually reconfigured your JSF webapp to use a different, CSS-safe, character like - or _. If you indeed use the default of :, then you should use

function doSomething(){
    $("[id='#{myBean.uiAbc.clientId}']").val("hello everyone");
}

Thanks for your ans... Ya its a nonsense but why it was working before and not now when I have changed binding? I have not changed anything except binding. :(

It's likely caused because you mixed id with binding and incorrectly assumed that the component referenced by <h:someComponent id="foo" binding="#{bar}"> would be available by #{foo} instead of #{bar}. This is not true. It's available by #{bar} and the id is not required for that.

I think you should write a book over JSF. I would love it. :) :) :)

jquery - How binding attribute of inputText can effect javascript meth...

javascript jquery jsf liferay
Rectangle 27 1

The jQuery function for binding a blur event handler is just .blur(), not .onblur(). Additionally, in your first example, you were mixing a call to the jQuery function with a call to the native JavaScript document.getElementById().

The following should work:

$("##{p:component('commentInput')}")).blur(function() {
    $(this).css({'background-color':'#DFD8D1'});
});

The first # is part of the jQuery selector, the second is (I assume) part of the JSF code to get the correct id of that element. I can't guarantee there won't be parsing problems on the server-side (I have no experience with JSF), but I'd expect it to work.

Overriding JSF component methods with jQuery - Stack Overflow

jquery jsf jsf-2 primefaces
Rectangle 27 6

The flow is as follows:

ready
  • jQuery's $(document).ready() function handlers are all invoked.
  • Yours finds an element in DOM by ID and attaches a keydown listener to it.
  • During user interaction, an ajax request is fired and the HTML DOM tree is updated with new HTML elements delivered by the ajax response.
  • Among others, exactly that element having the keydown listener is removed from HTML DOM tree and replaced by a fresh new element without any keydown listener. The document ready event is not fired during ajax requests. Your ready handler is never re-invoked. The keydown listener is never re-attached. To the enduser, it then indeed seemingly "stops functioning".

The solution on this particular case should now be obvious: explicitly re-attach the keydown listener on complete of ajax call. Most straightforward would be to extract the job of attaching the keydown listener into a reusable function and fire it as follows:

function applyKeydownOnTableFilter() { 
    // ...
}

$(document).ready(applyKeydownOnTableFilter);

So that you can just do a:

<p:commandButton ... oncomplete="applyKeydownOnTableFilter()" />

But this is quite tedious to repeat for every single ajax command/listener and not very maintenance friendly. Better is to approach it differently: use jQuery's $.on() instead. Replace

$(document).ready(function() {
    $("#form\\:dataTable\\:id\\:filter").keydown(function(event) {
        // ...
    });
});
$(document).on("keydown", "#form\\:dataTable\\:id\\:filter", function(event) {
    // ...
});

This way the keydown listener isn't actually attached to the element of interest. Instead, thanks to the event bubbling feature of JavaScript, the keydown event will ultimately reach the $(document) which is always present and usually not changed during JSF ajax requests. Once reached, the $(document).on() is triggered, which will then determine the source of the event and check it if matches the given selector and if so, then invoke the function. This all without the need to attach the keydown listener to the physical element and thus not sensitive to whether the element is removed/replaced in the HTML DOM tree.

By the way, do you also see how much similarities there are between HTML DOM tree and JSF component tree?

Thanks as always. The approach with $.on() works as intended. There a small thing, however that I cannot figure out. While using $.on(), if a wrong key is hit (i.e any non-digit key) then, the data table is updated unnecessarily that causes some costly queries to be executed on the database which is completely unnecessary. Is there any workaround that can prevent the data table from being updated, when a wrong key is hit. This should be done alone by event.preventDefault(); but it does not. While using $(document).ready(function() {}); as in the question, this did not happen.

Oh right :( PrimeFaces doesn't use directly the onkeydown attribute for this but also attaches an event handler by jQuery. This is fired before your event handler. So, basically, you're too late ... Sorry, you've to switch back to ready event so that yours is attached first. To minimize the oncomplete mess, you may want to perform the job in a page-wide manner by <p:ajaxStatus oncomplete> or perhaps $.ajaxStop().

As to the concrete requirements of this question, PrimeFaces 5.0 (currently available as a release candidate - RC1) comes with handy data table filters There is a major enhancement in data table filters. Therefore, such client side validations on data table filters can completely be eliminated :)

JavaScript/jQuery event listeners do not work after JSF component is u...

javascript jquery jsf primefaces jsf-2.2
Rectangle 27 6

The flow is as follows:

ready
  • jQuery's $(document).ready() function handlers are all invoked.
  • Yours finds an element in DOM by ID and attaches a keydown listener to it.
  • During user interaction, an ajax request is fired and the HTML DOM tree is updated with new HTML elements delivered by the ajax response.
  • Among others, exactly that element having the keydown listener is removed from HTML DOM tree and replaced by a fresh new element without any keydown listener. The document ready event is not fired during ajax requests. Your ready handler is never re-invoked. The keydown listener is never re-attached. To the enduser, it then indeed seemingly "stops functioning".

The solution on this particular case should now be obvious: explicitly re-attach the keydown listener on complete of ajax call. Most straightforward would be to extract the job of attaching the keydown listener into a reusable function and fire it as follows:

function applyKeydownOnTableFilter() { 
    // ...
}

$(document).ready(applyKeydownOnTableFilter);

So that you can just do a:

<p:commandButton ... oncomplete="applyKeydownOnTableFilter()" />

But this is quite tedious to repeat for every single ajax command/listener and not very maintenance friendly. Better is to approach it differently: use jQuery's $.on() instead. Replace

$(document).ready(function() {
    $("#form\\:dataTable\\:id\\:filter").keydown(function(event) {
        // ...
    });
});
$(document).on("keydown", "#form\\:dataTable\\:id\\:filter", function(event) {
    // ...
});

This way the keydown listener isn't actually attached to the element of interest. Instead, thanks to the event bubbling feature of JavaScript, the keydown event will ultimately reach the $(document) which is always present and usually not changed during JSF ajax requests. Once reached, the $(document).on() is triggered, which will then determine the source of the event and check it if matches the given selector and if so, then invoke the function. This all without the need to attach the keydown listener to the physical element and thus not sensitive to whether the element is removed/replaced in the HTML DOM tree.

By the way, do you also see how much similarities there are between HTML DOM tree and JSF component tree?

Thanks as always. The approach with $.on() works as intended. There a small thing, however that I cannot figure out. While using $.on(), if a wrong key is hit (i.e any non-digit key) then, the data table is updated unnecessarily that causes some costly queries to be executed on the database which is completely unnecessary. Is there any workaround that can prevent the data table from being updated, when a wrong key is hit. This should be done alone by event.preventDefault(); but it does not. While using $(document).ready(function() {}); as in the question, this did not happen.

Oh right :( PrimeFaces doesn't use directly the onkeydown attribute for this but also attaches an event handler by jQuery. This is fired before your event handler. So, basically, you're too late ... Sorry, you've to switch back to ready event so that yours is attached first. To minimize the oncomplete mess, you may want to perform the job in a page-wide manner by <p:ajaxStatus oncomplete> or perhaps $.ajaxStop().

As to the concrete requirements of this question, PrimeFaces 5.0 (currently available as a release candidate - RC1) comes with handy data table filters There is a major enhancement in data table filters. Therefore, such client side validations on data table filters can completely be eliminated :)

JavaScript/jQuery event listeners do not work after JSF component is u...

javascript jquery jsf primefaces jsf-2.2
Rectangle 27 2

This problem is caused because the JavaScript-manipulated piece of HTML is being replaced by the original server-generated HTML without it being JS-manipulated once again afterwards.

For me the only possible solution is number 2, because i should update this textArea, so number 1 is discarded. I will try and come back here.

where can i put this jQuery ? I can't find the success event on ajax. How can i do it ?

@Shelly: Uh, so you didn't wrote the code in the question yourself? You'd better not copypaste code without understanding any tiny part of it ...

Sorry, my mistake i already implemented the "sucess" event on ajax. thanks BalusC

jquery - Summernote disappears after ajax update - Stack Overflow

jquery ajax jsf summernote
Rectangle 27 2

This problem is caused because the JavaScript-manipulated piece of HTML is being replaced by the original server-generated HTML without it being JS-manipulated once again afterwards.

For me the only possible solution is number 2, because i should update this textArea, so number 1 is discarded. I will try and come back here.

where can i put this jQuery ? I can't find the success event on ajax. How can i do it ?

@Shelly: Uh, so you didn't wrote the code in the question yourself? You'd better not copypaste code without understanding any tiny part of it ...

Sorry, my mistake i already implemented the "sucess" event on ajax. thanks BalusC

jquery - Summernote disappears after ajax update - Stack Overflow

jquery ajax jsf summernote
Rectangle 27 2

This problem is caused because the JavaScript-manipulated piece of HTML is being replaced by the original server-generated HTML without it being JS-manipulated once again afterwards.

For me the only possible solution is number 2, because i should update this textArea, so number 1 is discarded. I will try and come back here.

where can i put this jQuery ? I can't find the success event on ajax. How can i do it ?

@Shelly: Uh, so you didn't wrote the code in the question yourself? You'd better not copypaste code without understanding any tiny part of it ...

Sorry, my mistake i already implemented the "sucess" event on ajax. thanks BalusC

jquery - Summernote disappears after ajax update - Stack Overflow

jquery ajax jsf summernote
Rectangle 27 1

I have worked with ricfaces and JSF for 4-5 years before moving to jQuery components and Grails for last 1.5 years. And here is my take on the subject:

  • Ultimately JSF controls are rendered as HTML components and so I do not see any issue refreshing the components (if at all you do not have a handle on the ids generated for jsf controls you could surround the controls with div and then refresh the div).
  • IMHO - jQuery modals are pretty simple to use and more flexible than RichFaces modal panel.
  • I do not think this is correct but without knowing your use case it would be difficult to tell. I believe the one thing you will lose is two way data binding provided by jsf components.

Pros of using JSF - Since your server side code is JSF, you get the data binding built into your UI components (both ways - server to client and client to server). The other thing is the look n feel of JSF components will match with rest of page. With jqGrid you will have to customize the theme.

Cons of using JSF - rich:dataTable is not very customizable and not that rich compared to jqGrid. So if you have a complex UI and you realize that a particular UI feature is not supported via rich:dataTable, you have no option but to use some other component or let go off that feature.

Pros of jqGrid - Rich in features and very easily customizable. I have done - treegrid, frozen columns, editable columns, client validation with qtip plugin etc.

Cons of jqGrid - Only one way data binding from server to client. And in order to accomplish this, you will have to write some server code to format the data into a JSON structure before sending it to client. For data binding from client to server: you will have to manually map the request params into a JSF bean.

Note: I have not used jqGrid with JSF backend. However, my response is based on my understanding of how each of the framework works.

jsp - RichFaces application, should I use rich:dataTable or jQGrid, pr...

jsp jsf jqgrid richfaces facelets
Rectangle 27 0

Have you tried settig prependId as false.

I haven't Hiraj. The pages are quite complex with a lot of Richfaces components, so I dont want to take the chance of breaking how some components render on the page.

Binding events based on ID with JSF and jQuery - Stack Overflow

jquery jsf richfaces
Rectangle 27 0

If I understand you right, you add HTML content after document ready, using $('ol').after(txtForNewListItem).

So you need to rebuild you list. I do something similar. Here is "pseudo" code:

ol.append(
     jQuery("<li/>")
     .attr("id", "someID")
     .append(jQuery("<span/>")
        .addClass("btnRemoveItem")
        .attr("title", "Remove item from list")
        .attr("id", data[i].id)
        .click(function() { alert('hello') })
      )
    .append("txtForNewListItem")
    );

You need to work a bit on this code, but hopefully it gives you an idea of what you need to do.

Items are not being added to the DOM via jQuery. By stating that I had added the element to the DOM via the append method, I was meaning to simply imply that I did so to test my implementation of the livequery method -- which worked. The problem is that when items are rendered for the first time utilizing the JSF lifecycle that the livequery / listen events are not binding properly.

If $('ol').after(txtForNewListItem) works, then all other jQuery triggers should work as well. I have no knowledge of JSF.

jsf - jQuery event binding - Stack Overflow

jquery jsf richfaces
Rectangle 27 0

RichFaces has this built in as the rich:jQuery component. Set the selector attribute as to what you would use within your jQuery statement. Set the query to be the function you wish to call. If you are rebinding elements which were set on load then you will need to name the component as well, as they DOM will not go through the full re-rendering lifecycle, and there will be no update.

To resolve this simply have your component have an oncomplete attribute to the name of the rich:jQuery component you wish to call. So in the example above we would need to add this to our component:

jsf - jQuery event binding - Stack Overflow

jquery jsf richfaces
Rectangle 27 0

The awesomeness of the naming container in JSF. When I was playing with this kind of thing, I used jQuery's endsWith selector ( the '$=' in the following code ).

jQuery('input[id$="myInputField"]')

Thanks digitaljoel. Got it working that way now.

Sure thing. This will work well as long as you are reasonably sure that the 'endsWith' value you are testing for is suitably unique. If you have control over the css classes, Mark's answer may be better, but it looks like you've already explored that route.

Binding events based on ID with JSF and jQuery - Stack Overflow

jquery jsf richfaces
Rectangle 27 0

Could you assign a class to the text box and then simply use the class selector to bind your paste event?

<h:form id="myForm">
<h:inputText id="myInputField" value="#{myBean.sampleName}" styleClass="bindPaste" />

if ( jQuery('.bindPaste') ) {
    jQuery('.bindPaste').bind('paste', MySite.common.handleMousePaste.bind(this));
}

I had it working that way originally Mark, but its not really ideal and could cause issues with future changes to the page.

Binding events based on ID with JSF and jQuery - Stack Overflow

jquery jsf richfaces
Rectangle 27 0

You can use "oncomplete" of rich:dataScroller :

If you want to call an action or render another component, you can use a4j:jsFunction in oncomplete of rich:dataScroller :

<rich:dataScroller oncomplete="myJavascript()" ... />

    <a4j:jsFunction name="myJavascript" render="paketler" action="#{sigortaFaturaPaketiSorgulamaBean.myAction}" ... />

jsf 2 - JQuery binding click event on richfaces datascroller - Stack O...

jquery jsf-2 richfaces
Rectangle 27 0

The solution that I use to this problem is to create an external field to the loop, which stores a JSON containing the values that should be saved. This field, to be outside the loop, properly saves values after each try and restore the missing values when necessary. I use two functions JavaScript and JQuery library.

<h:outputScript library="jquery" name="jquery.min.js" />
<h:outputScript library="all" name="all.js" />

<h:form>
    <h:inputText value="#{mainController.name}" required="true" />
    <ui:repeat var="phone" value="#{mainController.phoneList}" varStatus="status">
        <h:inputText styleClass="savePhoneNumber" value="#{phone.number}" required="true" onchange="saveUiRepeatInput('#{allPhoneNumber.clientId}', 'savePhoneNumber')" />
    </ui:repeat>

    <h:inputHidden id="allPhoneNumber" binding="#{allPhoneNumber}" />
    <h:outputScript>loadUiRepeatInput('#{allPhoneNumber.clientId}', 'savePhoneNumber')</h:outputScript>

    <h:commandButton action="#{mainController.add()}" value="Add Phone" immediate="true" />
    <h:commandButton action="#{mainController.save()}" value="Save" />
</h:form>
function saveUiRepeatInput(inputAll, inputClass) {
    document.getElementById(inputAll).value = JSON.stringify($('.' + inputClass).map(function() { return this.value; }).get());
}

function loadUiRepeatInput(inputAll, inputClass) {
    var jsonAll = document.getElementById(inputAll).value;
    if (jsonAll) {
        var array = JSON.parse(jsonAll);
        $('.' + inputClass).each(function(i) { if (i < array.length) this.value = array[i]; });
    }
}

Although work perfectly (including via ajax, with some minor changes), it looks like a hack, not an ideal solution. So if anyone can help with any solution strictly based on JSF, I will be grateful. Thanks.

jsf 2 - JSF - How can I retain the transient values within a ui:repeat...

jsf jsf-2
Rectangle 27 0

Your myth for following is wrong, i.e. to have same id and binding attribute.

id="abc" binding="#{abc}"

JSF renders component with id which provided by us with preceding by form id. e.g. in your case it will be,

:formId:abc

to avoid prepending form id just set prependId attribute to false. it will render the component with id "abc" only.

Also if your component is naming container e.g. dataTable. Then you the method accessing client id is different.

In short just right click in your browser and check the element's id and you can find the id to the jQuery.

jquery - How binding attribute of inputText can effect javascript meth...

javascript jquery jsf liferay