UpdatePanel and JQuery Plugin CQ

Supported by Nova Outsourcing

 

UpdatePanel is the powerful utility in Microsoft Asp.net family for asynchronous posback. JQuery is the popular framework to facilitate coding in the client end. When the two work together, issues occur.

We normally code with JQuery plugin similar to the code below.

<script type="text/javascript">
    $(document).ready(function () {
        //jMP3 init
        $(".mp3player").jmp3({
            showfilename: "false",
            backcolor: "000000",
            forecolor: "00ff00",
             30,
            showdownload: "true"
            });
        });
    };
</script>

But if the code is in as UpdatePanel, as the following structure, the issue will happen.

You will find the JQuery Plugin only works when the page is first loaded. The JQuery Plugin disappears immediately when any asynchronous postback occurs.

It is because that $(document).ready(…) only work when the whole document of the page is loaded. When the content is partially loaded by the asynchronous postback, it doesn’t work. So the JQuery Plugin is not applied to the elements.

To address the issue, we would ask ScriptManager for help. The ScriptManager has the following events in client end.

PageRequestManager.beginRequest	before the asynchronous postback happen
PageRequestManager.pageLoading	after the beginRequest but before the content in the UpdatePanel is updated
PageRequestManager.pageLoaded	after the document in the page is loaded and after the content in the UpdatePanel is updated

So we replace the $(document).ready(…) with the following code.

<script type="text/javascript">
    Sys.Application.add_init(app_init);
    function app_init() {
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_pageLoaded(function () {
            $(".mp3player").jmp3({
                showfilename: "false",
                backcolor: "000000",
                forecolor: "00ff00",
                 30,
                showdownload: "true"
            });
        });
    };
</script>

Then the UpdatePanel and JQuery Plugin work together.

Supported by Nova Outsourcing