Javascript doesnt work after updating component

Question

Context
In a dialog a user can press a button to fill an existing datatable named qPdt. When he clicks on a row I want the row text to be inserted in some inputTextArea.

Problem
What happens is that if I open the dialog and click any row, everything works fine and as expected. But if I open the dialog and press the button, my script doesn't work anymore/isn't called anymore. I have to close the dialog and re-open it to make the script work.

Probably I'm lacking some javascript/jsf basics here. Any hint would be nice :)

Code

<script>
$('#accordion\\:duoDlgForm2\\:qPdt tr').on('click', function() {
  var $item = $(this).closest("tr").find("td:nth-child(1)").text().trim();
  $("#accordion\\:duoDlgForm2\\:rt1Selected").append($item);
  });
</script>

Also tried (located inside the form and outside of it)

<script>
$(document).ready(function() {
  $('#accordion\\:duoDlgForm2\\:qPdt').on('click','tr',function() {
  var $item = $(this).closest("tr").find("td:nth-child(1)").text().trim();
  $("#accordion\\:duoDlgForm2\\:rt1Selected").append($item);
  });
});
</script>

datatable:

<p:scrollPanel mode="native">  
  <p:dataTable id="qPdt" var="p" value="#{regelBean.queriedParams}" scrollable="false"
    emptyMessage="x" rowKey="#{p}" selection="" selectionMode="single">                            
    <p:column>#{p.name}
      <f:facet name="header" style="">Parameter</f:facet>
    </p:column>
  </p:dataTable>
</p:scrollPanel>

button to open the dialog

<p:commandButton id="selectButton" value="?" update=":stmtDetailForm :newDuoDlg" oncomplete="PF('newDuoDialog').show()" actionListener="#{regelBean.selectButtonHit(tVar)}">

button to populate the datatable

<p:commandButton value="&lt;" update="qPdt regelDetail sp2" action="#{regelBean.findParams()}"/>

PF 4.0, IE9, working with includes.

probably you're updating the dialog or the accordion or the form in some point, that would cause the `onclick` event to demolish... try to bind the event on something bigger.. like to outer form.. anyway update the post with the full code of the dialog and the button. — Hatem Alimam, Jun 12 '14 at 14:42
the button does an update. But why does this destroy the `onclick` event? And how can I fix that? — dasLort, Jun 12 '14 at 14:51

score 2 · Answer 1 · edited May 23 '17 at 10:28

2

Probably you're updating the dialog or the accordion or the form in some point, that would cause the event to demolish... try to bind the event on something bigger, like the document.

JS

function bindDataTableSelection() {
   $(document).on('click', '.ui-datatable-selectable', function() {
     itemText = $('.ui-datatable-selectable.ui-state-highlight')
               .find("td:nth-child(1)").text().trim();
     $("#accordion\\:duoDlgForm2\\:rt1Selected").append(itemText);
   });
}

Now call the function in document.ready

Read more:

Primefaces's partial update breaks JQuery event binding?

Hope this helps

edited May 23 '17 at 10:28

Community

1
1

answered Jun 12 '14 at 15:16

Hatem Alimam

9,968
4
44
56

When I use this method and add an alert, what I get when I click is "oldParam" "oldParam" "oldParam" and on the next click the param I wanted when oldParam was displayed but also three times, sometimes four. Why more than once??? And why do I need to click twice? My script is `$(document).ready(function (){ $(document).on('click',...` I didn't use a name for the function – dasLort Jun 18 '14 at 08:35
Please don't be too nit-picking here ;) Without this, your solution is none to me. Please give me a pointer if you refuse to answer this here – dasLort Jun 18 '14 at 08:41

dasLort · Accepted Answer · 2014-06-18T09:12:31.247

0

Thanks to Hatem Alimam, I was able to solve the problem :-*

I bound the script to the scrollPanel instead of to the datatable itself. This works:

$(document).ready(function() {
    $('#accordion\\:duoDlgForm2\\:scrollPanelID').on('click','tr',function() {
    var $item = $(this).closest("tr").find("td:nth-child(1)").text().trim();
    $("#accordion\\:duoDlgForm2\\:rt1Selected").append($item);
    });
});

edited Jun 18 '14 at 09:12

answered Jun 12 '14 at 15:23

dasLort

1,264
1
13
28

you have to be careful, `tr` selector is somehow dangerous.. basically you're binding this click event on every tr tag in the page.. – Hatem Alimam Jun 12 '14 at 15:35

Javascript doesnt work after updating component

2 Answers2