Take the 2-minute tour ×
Salesforce Stack Exchange is a question and answer site for Salesforce administrators, implementation experts, developers and anybody in-between. It's 100% free, no registration required.

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 complete of ajax call, the DOM is constructed(the new part).
  3. The DOM Element is updated/replaced.

My question is, is the DOM updated or replaced?

My Scenario :

I've a Visualforce Page which has multiple input items. I bind 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.

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

Can someoe explain what exactly how re-render works?

share|improve this question
add comment

2 Answers 2

up vote 16 down vote accepted

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();
});
share|improve this answer
    
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 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 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 Dec 21 '12 at 4:46
add comment

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(){
    ....
});
share|improve this answer
    
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 Dec 19 '12 at 13:40
2  
Just an FYI, jQuery.live() is deprecated. api.jquery.com/live –  Kevin O'Hara Dec 19 '12 at 15:11
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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