Update Panel does not allow jQuery to work properly in Asp.Net Webform-CodePudding

I have a problem with Update Panel in Asp.Net webforms. I have a simple page where I heed to enter a name, choose the font of the name and show that name dynamically as the font is changed. The preview of the name is also draggable. So, when I don't add an Update Panel to the textbox where the name is entered, the preview does not change, but is draggable. When I add an Update Panel to the draggable element, it does change its font dynamically, but it is not draggable. Also, I can't remove the Update Panel from the textbox because I have file uploads on the same page and they are lost on each choose of the font. Does anyone have a clue what is the problem? Thanks in advance.

Here is my code

<script>
    $(document).ready(function () {

        var load_name_width = document.getElementById('<%= txtinputNameWidth.ClientID %>').value;
        var load_name_height = document.getElementById('<%= txtinputNameHeight.ClientID %>').value;
        console.log('load_name_width', load_name_width);
        console.log('load_name_height', load_name_height);
        $("#draggable").css({ top: ((1200 / 2) - (load_name_height / 2)), left: ((load_name_width / 2)), position: 'relative' });

        $(function () {
            $("#draggable").draggable(
                {
                    drag: function () {
                        var offset = $(this).offset();
                        var parentoffset = $(this).parent().offset();

                        var xPos = offset.left;
                        var yPos = offset.top;

                        var xPosParent = parentoffset.left;
                        var yPosParent = parentoffset.top;

                        document.getElementById('<%= txtinputNameWidth.ClientID %>').value = Math.round(2 * (xPos - xPosParent));
                        document.getElementById('<%= txtinputNameHeight.ClientID %>').value = Math.round(1200 - 2 * (yPos - yPosParent));
                    }
                });
        });
    });

<asp:UpdatePanel ID="UpdatePanel" runat="server">
      <ContentTemplate>
         <asp:Label ID="NameLbl" runat="server" Text="Name"></asp:Label>
         <asp:TextBox ID="txtName" runat="server" AutoPostBack="true" OnTextChanged="txtName_TextChanged"></asp:TextBox>
         <asp:DropDownList ID="FontName" runat="server" AutoPostBack="true"  OnSelectedIndexChanged="FontName_SelectedIndexChanged"></asp:DropDownList>
        </ContentTemplate>
   </asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
    <ContentTemplate>
         <p id="draggable">
            <a runat="server" id="NameSurname"></a>
         </p>
     </ContentTemplate>
 </asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel3" runat="server">
   <ContentTemplate>
       <div  runat="server">
          <asp:Label ID="Label1" runat="server" Text="NameW"></asp:Label>
          <input type="hidden" id="inputNameWidth" />
          <asp:TextBox ID="txtinputNameWidth" runat="server"></asp:TextBox>
       </div>
    </ContentTemplate>
 </asp:UpdatePanel>
 <asp:UpdatePanel ID="UpdatePanel4" runat="server">
    <ContentTemplate>
       <div  runat="server" >
           <asp:Label ID="Label2" runat="server" Text="NameH"></asp:Label>
           <input type="hidden" id="inputNameHeight" />
           <asp:TextBox ID="txtinputNameHeight" runat="server"></asp:TextBox>
       </div>
    </ContentTemplate>
 </asp:UpdatePanel>

And in my .cs file

 protected void txtName_TextChanged(object sender, EventArgs e)
    {
        string s_name = txtName.Text.Trim();
        NameSurname.InnerHtml = s_name.ToString();
    }

 protected void FontName_SelectedIndexChanged(object sender, EventArgs e)
    {
        string name_font = FontName.SelectedItem.Text;
        txtName.Font.Name = name_font;
        NameSurname.Style.Add(HtmlTextWriterStyle.FontFamily, name_font);
    }

CodePudding user response：

As @VDWWD answered, the solution was to put my function in this code. Thank you very much!

var prm = Sys.WebForms.PageRequestManager.getInstance();

    prm.add_endRequest(function () {});