2

I am using apex:dataTable and implemented some code to do the pagination. But instead of using apex:commandButton to go Next and Previous, I am using pure html tags as listed below in purpose of easier css:

<span style="{!IF(NOT(ShowPagination), 'display:none', '')}">
    <a id="lnkFirst" href="#">First</a> &nbsp;|&nbsp; <a id="lnkPrevious" href="#">&lt; Previous</a> &nbsp;|&nbsp; <a id="lnkNext" href="#">Next &gt;</a> &nbsp;|&nbsp; <a id="lnkLast" href="#">Last</a>
</span>

And I am using jQuery in my code to call apex:actionFunction to do Next and Previous. As in below:

$("#lnkPrevious").click(function(e) {
    Previous();
});

$("#lnkNext").click(function(e) {
    Next();
});

What I am confused about is after rerendering, this jQuery code seems stopped working. I moved this span outside the area of rerendering and it works for me. But that was a bit of pain to me. Is there a way to walk around this?

2

If you bind functionality on tags you rerender later you might loose that bindings.

Best solution I know is what you have done namely not to rerender this parts of the UI.

Alternatively you could apply the binding again after rerender. This is usually that stuff you do in $(document).ready() related to the rerenderd elements. To execute code after rerendering you could use the onComplete event of apex:actionFunction or put a script tag in the end of the rerenderd element. I have used this pattern in my answer (for a different use case) here: Inline editing doesn't update last edited value without control loosing focus first

Also jquery .on() docu helps to clarify this:

Event handlers are bound only to the currently selected elements; they must exist at the time your code makes the call to .on(). To ensure the elements are present and can be selected, place scripts after the elements in the HTML markup or perform event binding inside a document ready handler.

It means also that direct bindings get deleted when elements get deleted and recreated (=rerendered).

Alternatively, use delegated events to attach event handlers.

Now delegate handlers could be an alternative, but my experience with them is mixed, since not all events are "bubbleing up" in a way that actually works.

  • Thank you for this. I think the best approach of doing this is to rebind the event handlers in the onComplete event of apex:actionFunction. And it works for me pretty well. – Lance Shi Mar 6 '15 at 1:32
  • @LanceShi yeah, onComplete event of apex:actionFunction is even better than inline js. Good point. Updated the answer. – Uwe Heim Mar 6 '15 at 8:37
2

I think the rerendering process modified the DOM structure. So you better use jQuery's .on() function (after version 1.7, before it was deprecated function .live()) to attach event handlers. Another thing is that it is a best practice NOT to use the $ on the visualforce pages, just jQuery or use the .noConflict() function:

jQuery("#lnkPrevious").on('click', function(e) {
    Previous();
});

jQuery("#lnkNext").on('click', function(e) {
    Next();
});

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.