Carlos Mendieta Carlos Mendieta - 1 year ago 85
ASP.NET (C#) Question

JQuery Draggable stops working inside updatepanel after a postback

I have an updatepanel with some devexpress controls inside it.

<asp:UpdatePanel ID="upInsertPartNumber" runat="server">
<div id="divSAFRReceivingPanel" style="width: 50%; position: fixed;">
<dx:ASPxFormLayout runat="server" ID="frmControlPanel" AlignItemCaptionsInAllGroups="True">
... textbox here
... submit button here

There's also a div that I have attached the jquery draggable behavior to. When it first loads up, it works fine. As soon as I submit the form, though, the div gets set to its original position and loses its draggability.


$(function () {

function ResetPanel() {
$('#divSAFRReceivingPanel').draggable({ revert: 'false' });

Ideally, I want to have the draggable div to maintain its position and draggability even after the form has been submitted. Any thoughts on how to do this? Thanks!

Answer Source

Well, that's because when you raise an event a postback ocurrs, and only the content in the UpdatePanel is refreshed, so, your elements lose the functionality they have before the postback.

What you can do is:

  • To keep track of the div's position before the postback
  • When the postback ocurrs send some javascript from the server side (C#) to the client side (the browser), maybe like this

    ClientScript.RegisterStartupScript(this.GetType(), "ResetPanelWithPosition();", funcCall); 
  • Create a function ResetPanelWithPosition() that re-attach the draggable behavior and set the last position you store in the first step.