Ahmet Ay Ahmet Ay - 5 months ago 11
jQuery Question

Why remoteCommand action grows exponentially?

I am using primefaces RemoteCommand component vie jquery to call method from html table cells. However, when I update panel remoteCommand action calls method more than one. Growth curve is exponential. In the first action calls once, in second two times, in third four times and so on. What is the reason for this, and how can I solve this problem?

<p:panelGrid columns="1" columnClasses="ui-grid-col-12" layout="grid" styleClass="ui-panelgrid-blank"
style="border:0px none; background-color:transparent;">

<p:panel id="tablePanel" header="#{courseConstraintBean.selectedCourse == null ? 'SEÇİLİ DERSİN ' :
(courseConstraintBean.selectedCourse.courseNameWithClass)}
HAFTALIK DERS TABLOSU"
style="margin: 0 auto; min-width: 600px; margin-top: 2%;">

<p:remoteCommand name="sendHourOrDay" actionListener="#{courseConstraintBean.changeLocationHourOrDayCondition(param.id)}" update="form:tablePanel"/>

<p:remoteCommand name="sendLocation" actionListener="#{courseConstraintBean.changeLocationCondition( param.hour, param.day)}" update="form:tablePanel"/>

<script>
$(document).ready(function () {
$('td').click(function () {
sendLocation([{name: 'day', value: $(this).attr('data-day')}, {name: 'hour', value: $(this).attr('data-hour')}]);
});
});

$(document).ready(function () {
$('th').click(function () {
sendHourOrDay([{name: 'id', value: $(this).attr('data-id')}]);
});
});

</script>


<p:messages id="classCourseChartMessage" showDetail="false" autoUpdate="false" closable="true" style=" margin-left: 2%; margin-right: 2%" />


<p:panel style="margin-left: 2%; margin-right: 2%; margin-top: 1%; margin-bottom: 0%; min-width: 550px; background-color: #F6FFFF">

<table width="100%" align="center" style="margin: 0px;">
<div id="head_nav">
<tr>
<th style="width: 16%; padding: 10px" data-id="times">DERSLER</th>
<th style="width: 12%;" data-id="d1">PZT</th>
<th style="width: 12%;" data-id="d2">SAL</th>
<th style="width: 12%;" data-id="d3">ÇARŞ</th>
<th style="width: 12%;" data-id="d4">PERŞ</th>
<th style="width: 12%;" data-id="d5">CUM</th>
<th style="width: 12%;" data-id="d6">CMT</th>
<th style="width: 12%;" data-id="d7">PZR</th>
</tr>
</div>

<tr>
<th data-id="h1">1. Ders</th>
<td style="background-color: #{courseConstraintBean.getLocationColorOfSelectedCourse(0, 0)}; font-size: 10px; color:#A8B4BB" data-hour="0" data-day="0">1</td>
<td style="background-color: #{courseConstraintBean.getLocationColorOfSelectedCourse(0, 1)}; font-size: 10px; color:#A8B4BB" data-hour="0" data-day="1">1</td>
<td style="background-color: #{courseConstraintBean.getLocationColorOfSelectedCourse(0, 2)}; font-size: 10px; color:#A8B4BB" data-hour="0" data-day="2">1</td>
<td style="background-color: #{courseConstraintBean.getLocationColorOfSelectedCourse(0, 3)}; font-size: 10px; color:#A8B4BB" data-hour="0" data-day="3">1</td>
<td style="background-color: #{courseConstraintBean.getLocationColorOfSelectedCourse(0, 4)}; font-size: 10px; color:#A8B4BB" data-hour="0" data-day="4">1</td>
<td style="background-color: #{courseConstraintBean.getLocationColorOfSelectedCourse(0, 5)}; font-size: 10px; color:#A8B4BB" data-hour="0" data-day="5">1</td>
<td style="background-color: #{courseConstraintBean.getLocationColorOfSelectedCourse(0, 6)}; font-size: 10px; color:#A8B4BB" data-hour="0" data-day="6">1</td>
</tr>

Answer

It looks like your click event is binding multiple times. this could be because you are updating very own p:panel which contains the script.(this should not be a problem because you are using $(document).ready(...)).
But just to solve the multiple bindings of an event you could use JQuery's unbind().

<script>
 $(document).ready(function () {
      $('td').unbind('click');
      $('td').click(function () {
         ...
      });
 });
</script>

But keep in mind that binding/unbinding the event directly using TAG name like $('TD'), $('TR')... will affect other tags generated by JSF/Primefaces as well.

So I'd suggest you to bind the events through CSS class selector, for example:

<td class="clickable-cell">...</td>
<td class="clickable-cell">...</td>
<td class="clickable-cell">...</td>
<td class="clickable-cell">...</td>

<script>
$('.clickable-cell').click(...);
</script>