1

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>
8
  • Did you check if the jQuery 'click' handler is called multiple times? If so that is the problem. Might be that it is added multiple times?
    – Kukeltje
    May 11, 2016 at 10:19
  • May be, if so what should I do?
    – Ahmet Ay
    May 11, 2016 at 10:40
  • make sure it is not added multiple times?
    – Kukeltje
    May 11, 2016 at 11:03
  • How? I dont know so much about front end.
    – Ahmet Ay
    May 11, 2016 at 11:26
  • First check if it IS added multiple times. How? By adding console.log in the javascript, or use a browser developer tool with debugging options
    – Kukeltje
    May 11, 2016 at 11:56

1 Answer 1

1

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.