javascriptjqueryasp.netupdatepaneljhtmlarea

jhtmlarea not working inside updatepanel


I have a jhtmlarea textarea on my form

textarea id="txtDigital" name="txtDigital" class="form-control" style="background-color:white; resize: vertical !important; "
                                            rows="20" placeholder="Details" runat="server"></textarea>

Which is being set in javascript with:

$(document).ready(function () {
    $(function () {
       $("#<%=this.txtDigital.ClientID%>").htmlarea({
            toolbar: [
            ["bold", "italic", "underline", "strikethrough"],
            ["increasefontsize", "decreasefontsize", "forecolor"],
            ["orderedList", "unorderedList", "superscript", "subscript"],
            ["indent", "outdent", "justifyleft", "justifycenter", "justifyright"]
        ]
        });
    });
});

which works fine until I add an ASP.NET UpdatePanel - the textarea is inside the updatepanel, and when the page loads, it just loads as a plain textarea. I used Firebug to step through and the code does run, but not after the UpdatePanel refreshes I suspect.. Removing the updatepanel allows it to load as jhtmlarea as expected.

I tried calling the same code as a function when I display the textarea, and it formats as jhtmlarea correctly, but, is disabled some how that I can't see when I inspect the page.

I'd appreciate any help around getting it to work inside the UpdatePanel.

Thanks


Solution

  • Its an issue where the partial postback which doesn't invoke jquery event , you need to rebind jquery after PostBack.You need a named function and pass it as endRequest callback so that when browser relinquishes control demo() gets called

    function demo()
    {
        $("#<%=this.txtDigital.ClientID%>").htmlarea({
                toolbar: [
                  ["bold", "italic", "underline", "strikethrough"],
                  ["increasefontsize", "decreasefontsize", "forecolor"],
                  ["orderedList", "unorderedList", "superscript", "subscript"],
                  ["indent", "outdent", "justifyleft", "justifycenter", "justifyright"]
                ]
        });
    }
    
    $(document).ready(demo);
    

    Now add below script in your aspx file after ScriptManager

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