Reload plugin after callback

Question

I have a page with several buttons on top. Below the buttons is some content.

Whenever a button is pressed, the content is refreshed using UpdatePanels.

In this content I am trying to use the royal slider plugin, which needs to be initialized every time a button is pressed. I am running into the problem where I cannot get royal slider to initialize on every button click.

What I have tried is calling a function inside the div that is being refreshed but this does not work a.k.a the function is not called after the callback.

HTML (content):

<asp:UpdatePanel ID="ID" ChildrenAsTriggers="true" runat="server">
<div class="wrapper">


<!-- main navigation -->
    <asp:Panel ID="someID" runat="server"></asp:Panel>
                    <script type="text/javascript">
                            createSlider();
                    </script>
</div>
</asp:UpdatePanel>

JS:

function createSlider() {
        $('.royalSlider').royalSlider({
            arrowsNav: true,
            loop: false,
            keyboardNavEnabled: false,
            controlsInside: false,
            imageScaleMode: 'fill',
            arrowsNavAutoHide: true,
            autoScaleSlider: true,
            autoScaleSliderWidth: 680,
            autoScaleSliderHeight: 140,
            controlNavigation: 'none',
            thumbsFitInViewport: false,
            navigateByClick: true,
            sliderDrag: true,
            sliderTouch: true,
            startSlideId: 0,
            autoPlay: false,
            transitionType: 'move',
            globalCaption: true,
            deeplinking: {
                enabled: true,
                change: false
            },
            /* size of all images */
            imgWidth: 680,
            imgHeight: 140
        });
    }

How would I go about doing this?

Answer 1

Have you tried something like this:

<script type="text/javascript">
    var prm = Sys.WebForms.PageRequestManager.getInstance();

    prm.add_endRequest(function() {
        createSlider();
    });
</script>

And put this script OUTSIDE of the UpdatePanel