1

Rencently, I've fighten for understanding jquery in VF apex tag.

Looks like it can have several problem at the same time.

First of all, please check below code.

<div class="btn_none" title="center1">
    Center1
</div>

<div class="container-fluid" id="step01" style="display:none;"></div>
// step01 end

<div class="container" id="step02" style="display:none;">
   <div class="container" id="sandbox-container">
      <div id="datepicker"></div>
      <script>
         // .. code about datepicker
      </script>
   </div>
</div>
// step02 end

<apex:form id="myform">
   <apex:actionFunction name="setCenter" action="{!setParam}" reRender="myform" status="myStatus" oncomplete="onCompleteHandler()">
      <apex:param name="firstparam" assignTo="{!currentCenter}" value=""/>
   </apex:actionFunction>
   <script>
      $(document).ready(function(){
          $(".btn_none").click(function(){
              alert($(this).attr("title"));
              setCenter($(this).attr("title"));
              $("#step01").show();
              $("body").scrollTop($(document).height());
          });
          $("#datepicker").click(function(){
              alert('check step2 show'); // not working
              $("#step02").show();
              $("body").scrollTop($(document).height());
          });
      });
          var onCompleteHandler = function(){
          $("#datepicker").datepicker('setDatesDisabled', {!strlist});
      };

   </script>
</apex:form>

How this code works is,

  1. first, click .btn_none, step01 show works well. + onCompleteHander work well too.

  2. When click step01, shown at first step, step02 show doesn't work. of course alert('check step2 show'); doesn't work too.

Another wired phenomenon,

  1. Everytime I clicked .btn_none, alert($(this).attr("title")) poped more times. 1, 2, 4,,,,, like this. Why is this happening? Maybe I don't have understanding about reRender..

Please help!

2 Answers 2

2

When you reRender an area, all of the scripts in the area execute again. What you're doing here is attaching multiple event handlers to the same DOM element, so this code results in those multiple alerts you're seeing. You need to move the jQuery script outside of the form, and then use a jQuery "on" handler, which will make sure that newly rendered elements will still work correctly. The variable itself you're using to communicate blackout dates should still be inside the form.

<apex:form ...>
    <apex:actionFunction ...> ... </apex:actionFunction>
    <script>
        window.blackoutDates = {!strlist};
    </script>
</apex:form>
<script>
    $(document).ready(function(){
        $(".btn_none").on("click", function(){
            setCenter($(this).attr("title"));
            $("#step01").show();
            $("body").scrollTop($(document).height());
        });
        $("#datepicker").on("click", function(){
            $("#step02").show();
            $("body").scrollTop($(document).height());
        });
    });
    var onCompleteHandler = function(){
        $("#datepicker").datepicker('setDatesDisabled', window.blackoutDates);
    };
</script>
1
  • Okay, Thanks I totally understand why alert pop several times. I modified my code and it works about several popups! Another problem is about date picker. I'll edit my questions Dec 6, 2018 at 6:35
1

Okay so the problem is you are not using a noVonflict. You need to do that.

<apex:includeScript value="{!URLFOR($Resource.jQuery, '/js/jquery-1.4.2.min.js')}"  />
<apex:includeScript value="{!URLFOR($Resource.jQuery, '/js/jquery-ui-1.8.6.custom.min.js')}"  />
<apex:stylesheet value="{!URLFOR($Resource.jQuery, '/css/ui-lightness/jquery-ui-1.8.6.custom.css')}"  />
<script>
   $j = jQuery.noConflict();
   $j(document).ready(function() {
    $j("#phone").dialog({ autoOpen: false, modal: true, position: 'center'  });
   });

   function showDialog(name, phone){
      $j("#phoneNumber").html(phone);
      $j("#phone").dialog("open");
      $j('#phone').dialog("option" , "title" , name);
      $j('#phone').dialog('option', 'position', 'center');
      return false;
   }
</script>

Note how $j = jQuery.noConflict(); is declared and used? If you do this you won’t conflict with other libraries vfp is using.

Refer to : https://developer.secure.force.com/cookbook/recipe/using-jquery-in-a-visualforce-page for more details.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .