What actually happens on re-render?

I would like to know what actually happens on re-render (Ajax Call and DOM replacement) in Salesforce.

My Idea:

  1. The ajax call is made to get data.
  2. On completion of the ajax call, the DOM is constructed(the new part).
  3. The DOM Element is updated/replaced.

Is the DOM updated or replaced?

My Scenario :

I have a Visualforce Page which has multiple input items. I binds keypress event to the input elements on document ready. An action function is present which re-renders a section of the page.

Now, the input elements in the re-rendered panel do not have a keypress event binding.

However, when I have the document.ready() script in the re-rendered output panel, the keypress event gets binded.

Can someone explain how exactly re-render works?

Answer

When a re-render occurs, only the portion of the DOM that is set to rerender is actually re-rendered. Therefore, any jQuery event bindings that you created on $(document).ready() are essentially lost for the portion of the DOM that was re-rendered. If you wrap these event binding calls in a function, it’s easy to re-bind.

What I do in these scenarios is use the onComplete attribute of something like a commandLink to call a function to “re-bind” my event handlers. Here is an example…

<apex:commandLink action="{!doSomething}" rerender="Something" onComplete="bindEvents();">

And then my bindEvents function and also my $(document).ready()

function bindEvents() {
  $('#myElement').click(function() {
    // implemtation
  });
}

$(document).ready(function() {
  bindEvents();
});

Attribution
Source : Link , Question Author : Vignesh Damodharan , Answer Author : Kevin O’Hara

Leave a Comment