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 class="it" 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 class="it" 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);
}
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 () {});