Jquery Onchange event does not fire - Primefaces - inputText

Question

The following event does not fire:

<script> $("#inputTxt").change(function() { alert("changed"); }); </script> 

The code for inputTxt is as follows:

 <p:inputText id ="inputTxt" name="inputTxt" value="#{article.description}" style="border:none; box-shadow:none;"/> 

The coloumn "articleDescription" is defined in a datatable named "articlesInformation", which is placed in the "articleForm" form.

When checking the item, I found that the identifier inputText becomes - "articlesInformation: 0: inputTxt". This is probably the problem.

Viewing page information says:

  <td role="gridcell"> <div class="ui-dt-c"> <input id="articlesInformation:0:inputTxt" name="articlesInformation:0:inputTxt" type="text" value="Description of Article 1" style="border:none; box-shadow:none;" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" /> <script id="articlesInformation:0:inputTxt_s" type="text/javascript">PrimeFaces.cw('InputText','widget_articlesInformation_0_inputTxt' {id:'articlesInformation:0:inputTxt'}); </script></div></td> 

How should jquery be defined for surface components?

Thanks Shikha

Answer 1

When an inputText is placed in a datatable, pffffd assigns it id = datatable_id: row_index: inputText_id. That is, the inputText in line 7 is set to id = datatable_id: 7: inputText_id. Try below ...

 <p:dataTable id="table_Details" var="dataItem" rowIndexVar="rowIndex"> <p:column id="articleDescription" headerText="Article Description"> <p:inputText id="inputTxt" name="inputTxt" value="#{article.description}" onchange="inputTextChanged(#{rowIndex})"/> </p:column> </p:dataTable> function inputTextChanged(rowIndex){ var str = 'table_Details:' + rowIndex + ':inputTxt'; var selected = $(document.getElementById(str)); alert (selected.val()); } 

Hope this helps

Answer 2

You can use attributes with selector

 jQuery('input[id$="inputTxt"]').change(function() { alert("changed"); }); 

Answer 3

When the element id element of an element is changed using Primefaces, you can either use the attribute selector to get the element by its name (provided that this also has not changed), or you can add a class to the element and select:

By attribute:

 $("input[name='inputTxt']").change(function() { alert("changed"); }); 

By class:

 $(".inputTxt").change(function() { alert("changed"); }); 

Answer 4

https://www.mkyong.com/jsf2/primefaces/how-to-get-jsf-id-via-jquery/

For Primefaces and jquery see Live Link