jQuery Re-Binding after tab change using Active Social for DotNetNuke

Question

I am working with a third party tab control which is part of a DotNetnuke module called Active Social which I have no documentation for. The problem is when I change tabs I lose a js (masonry.js) which styles the content being loaded in the tab. I need to re-bind the script but have not been successful

Here is what I have so far.

I am using a re-binding method that I have used in previous projects

function BindControlEvents() {
        //jQuery is wrapped in BindEvents function so it can be re-bound after each callback.
        var $container = $('.addMasonry');
        $container.imagesLoaded(function () {
            $container.masonry({
                itemSelector: '.explore-image',
                columnWidth: 10,
                isFitWidth: true
            });

        });

    }
    //Initial bind
    $(document).ready(function () {
        BindControlEvents();
    });

// Re-bind for callbacks var prm = Sys.WebForms.PageRequestManager.getInstance();

    prm.add_endRequest(function () {
        BindControlEvents();
    });

This however does not re-bind when the tab is changed. So I created a button on the page

 <li><a onclick="BindControlEvents();" href="#">re-bind</a></li>

Clicking this button after the tab change will re bind my script.

The next step I assume would be to find the event that tells me a tab is finished loading but so far I have been unsuccessful

I have tried selecting the tab container and running the BindControlEvents function on .load() and .ajaxComplete() but still no success.

Are there any other ways to find out when a tab is fully loaded. I understand I might not be giving much to work off of but this is as much as I know.

Thanks for the help

Mark

Answer 1

Maybe there's a partial postback that is not intercepted, try to add the following in your js, outside of jquery init:

    <script type="text/javascript">
    Sys.Application.add_load(BindControlEvents);

    function BindControlEvents() {
    [...]
    </script>

Hope this helps, al.