1

I have a VF Page that renders several "tabs" of data. On initial load it works exactly as expected, but then if I use a pagereference method on a button or event I then rerender the page, unfortunately once I rerender the tabs are now broken.

I've attempted onComplete:

<apex:actionSupport oncomplete="resettabs()" action="{!doStuff}" 
                                             reRender="page" status="loadingData"/>

I've tried onStop:

<apex:actionStatus id="loadingData" onstop="resettabs()">

The resettabs() contains an alert, this fires as expected (onload and onStop/Complete), but it appears the jquery selector went from finding "tab1" to undefined -- this based on the selector ($('.tabgroup > div'))

I've also added the call to my <apex:actionStatus onstop="resettabs()"> which led to similar results. It appears that either way, no matter how I attempt it, the JS is called before the elements that are being rerendered are loaded.

Here is the JS in the <head> (also tried it in the <apex:outputPanel id="page"> which is the 

<script>
 $ = jQuery.noConflict();
 $(document).ready(function(){
    resettabs();
 });

 function resettabs(){
    $('.tabgroup > div').hide();
    $('.tabgroup > div:first-of-type').show();
    $('.tabs a').click(function(e){
      e.preventDefault();
        var $this = $(this),
            tabgroup = '#'+$this.parents('.tabs').data('tabgroup'),
            others = $this.closest('li').siblings().children('a'),
            target = $this.attr('href');
        others.removeClass('active');
        $this.addClass('active');
        $(tabgroup).children('div').hide();
        $(target).show();
    });
 }
 </script>

Debug Results: With this alert($('.tabgroup > div').attr('id')); message in the resettabs() I get the following debug results

  • On page loading: "tab1"
  • Running resettabs() from JS console: "tab1"
  • After rerender: "undefined"
  • Running resettabs() from JS after rerender: "undefined"
Improve this question
5
  • 1
    can you share more code ? Oncomplete call all jquery functions again .
    – Mohith Shrivastava
    Commented Mar 3, 2016 at 4:02
  • Basically .. What you need once your rerender performed oncomplete of the action function again you need to initialize/ rerender javascript as well.
    – Ratan Paul
    Commented Mar 3, 2016 at 4:48
  • How would I do that? I've attempt putting it within the rerendered section believing it would do that but it doesn't work.
    – Xtremefaith
    Commented Mar 3, 2016 at 4:49
  • you are doing correct oncomplete of action function calling resettabs function should work..
    – Ratan Paul
    Commented Mar 3, 2016 at 5:11
  • When the page first load its called using $(document).ready() which waits till the elements on the page are rendered. Is it possible that oncomplete is called prior to the rerendering of those elements? Or more likely that the selectors cannot be obtained that way dynamically after the rerender? (looking at debug results posted I'm leaning towards the latter)
    – Xtremefaith
    Commented Mar 3, 2016 at 5:23

1 Answer 1

Reset to default
1

AH HA! I figured it out. Realized that not only were my tabs not hiding/showing/functioning after the rerender but some of the tabs were out of place. Closer look revealed that what is happening is my .tabgroup class was on a <section> html5 tag.

With that I googled and found this helpful tip:

HTML5 elements vanish when rerendering Visualforce (a bug with reRender (VF) removing HTML 5 tags)

That led me to obviously convert the <section> tags to <div> tags and now my oncomplete action works as expected. Thanks for the comments along the way which helped me stay the course I was on.

Improve this answer

You must log in to answer this question.

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