21

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?

27

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();
});
  • I understand the that DOM elements are not binded after re-rendering. But I'm trying to understand what actually happens on rerender. Thanks anyway! – Vignesh Damodharan Dec 20 '12 at 4:47
  • @Vignesh I explained exactly what happens on a re-render in the first paragraph of my response. Is there something else you are looking for? – Kevin O'Hara Dec 20 '12 at 11:21
  • Yeah! I get it. I was hoping if someone would explain me what re-render means(the DOM changes and stuff). – Vignesh Damodharan Dec 20 '12 at 13:12
  • I want to help but I am still confused on what you are looking for. Re-render means partial DOM re-rendering. It simply re-renders only the elements that are specified to re-render...not the whole DOM. This happens after the AJAX callback is received. Is the whole jQuery.ready() thing throwing you off? The reason that works when inside the re-rendered element is because the DOM is already loaded so the callback happens immediately. See here: jsfiddle.net/D3cQ4 – Kevin O'Hara Dec 20 '12 at 16:26
  • Thanks! I totally understand about the jQuery.ready() part. I'm trying to get exact details of what re-render means and how the ajax requests are done with the auto-generated ids. That's it! Thanks anyway! :) – Vignesh Damodharan Dec 21 '12 at 4:46
1

For this issue i use jQuery live function and don't care about DOM "updates":

<apex:inputText value="{!myVar}" id="myINput"/>

jQuery('[id$=myInput]').live('keypress', function(){
    ....
});
  • I understand .live() will fix the issue. I'm trying to understand what actually happens on re-render. Is there any documentation on what exactly happens? Btw, thanks for the help! – Vignesh Damodharan Dec 19 '12 at 13:40
  • 4
    Just an FYI, jQuery.live() is deprecated. api.jquery.com/live – Kevin O'Hara Dec 19 '12 at 15:11
  • jQuery.live() is replaced by jQuery.on() . @KevinO'Hara 's approach is better though. – zuke Jan 11 '15 at 12:31
  • I prefer the approach from @KevinO'Hara but it seems you can still use .on() as a replacement for .live() if you're using delegated event handlers: api.jquery.com/on/#direct-and-delegated-events – Semmel Feb 28 at 16:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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