Jquery UI and ASP.NET PostBack fail after post back

Question

I have a asp.net web forms app with update panels. and its also in a listview and I dont know if that matters or not.

I have the following Javascript..

<script lang="javascript" type="text/javascript">
function pageLoad(sender, args)
{

$(document).ready(function () {

$('textarea.epop').live('click', test);
});

function tes(event)
{
        var btn = $(this);
        alert(btn.val());

        $('#editortext').val(btn.val());

        var dialog = $('#edialog').dialog({
          modal: true,
          width:'auto',
          resizable: false,

          buttons: {
            'OK': function() {
              alert($('#editortext').val());
              alert(btn.val());

              btn.val($('#editortext').val());

              $('#editortext').val("");
              $(this).dialog('close');
              return false;
            }
          }
        });
        // Move the dialog back into the <form> element
        dialog.parent().appendTo(jQuery("form:first"));

        $('#edialog').dialog('open');

  return false;
}

}
</script>

Then I have this in the html body..

<div id="edialog" title="Edit SQL" style="display: none">
    <label for="editortext">
        SQL Query:</label>
    <textarea rows="20" cols="100" id="editortext" class="editortext"></textarea>      
</div>

and then in one of my list items in my list view wich is inside a update panel. I have..

<asp:TextBox ID='txtSQLQuery' CssClass="epop" TextMode="multiline" Columns="50" Rows="5" runat="server" Text='<%# Eval("SQLQuery") %>' />

code works perfect the first time with no post back. but say I change the selection, and then a auto postback happens... then the code no longer sets the text.. when you click ok.. using alerts I can see that its actually still referencing the old value and not the new current displayed value which seemed to invoke the click.

At this point I am stumped..

Answer 1

If you have your controls inside updatepanel and the update panel is set to updatemode ="condicional" you probably have to invoke updatePanel.update() from your server side code to update values.

Another thing that often happens is that the update panel and jquery are not best friends, so it will be better writing or initialize your code like this:

$(document).ready(function () {

     $('textarea.epop').live('click', function(e){
             test();
       });
});

// register again after postback's

   var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_endRequest(function() {

      $('textarea.epop').live('click', function(e){
             test();
       });
    })