asp.net - trigger - Volver a vincular eventos en jQuery después de la actualización de Ajax(panel de actualización)

updatepanel c#

Question

Tengo varios elementos de entrada y opción en mi página, cada uno (bueno casi) tiene un evento adjunto para actualizar el texto en la página una vez que cambian. Yo uso jQuery, que es realmente genial :)

También uso Microsofts Ajax framework, utilizando UpdatePanel. La razón por la que hago eso es porque ciertos elementos se crean en la página en función de alguna lógica del lado del servidor. Realmente no quiero explicar por qué uso el UpdatePanel, incluso si pudiera (con un poco de esfuerzo) volver a escribir para usar solo jQuery . Aún quiero ese UpdatePanel.

Probablemente lo hayas adivinado: una vez que tengo una devolución de datos en el Panel de actualización, los eventos de jQuery dejan de funcionar. De hecho, estaba esperando esto, ya que la "devolución de datos" no es realmente una nueva devolución, por lo que mi código en document.ready que ata los eventos no se volverá a activar. También confirmé mi sospecha leyendo en las bibliotecas de ayuda de jQuery.

De todos modos, me queda el problema de volver a enlazar mis controles después de que UpdatePanel haya terminado de actualizar el DOM . Preferiblemente necesito una solución que no requiera agregar más archivos .js (complementos jQuery) a la página, sino algo tan simple como poder capturar la ''post-actualización'' de UpdatePanel, donde puedo simplemente llamar a mi método para volver a vincular todos los elementos del formulario .

Answer 1

A partir de jQuery 1.7, la forma recomendada de hacerlo es utilizar on() sintaxis on() .

Sin embargo, asegúrese de configurar el evento en el objeto del documento , no el objeto DOM en sí. Por ejemplo, esto se romperá después de la devolución de datos de UpdatePanel :

$('':input'').on(''change'', function() {...});

... porque las '': entradas'' han sido reescritas. Haz esto en su lugar:

$(document).on(''change'', '':input'', function() {...});

Mientras el documento esté cerca, cualquier entrada (incluidas las de UpdatePanel refresca) activará el manejador de cambios.

Answer 2

O puede consultar la última funcionalidad en vivo de jQuery a través del método on() .

Answer 3

Puede usar jQuery y delegación de eventos. Básicamente, enganche los eventos a los contenedores en lugar de a cada elemento y consulte el script de eventos.target y ejecutar en función de eso.

Tiene múltiples beneficios, ya que reduce el ruido del código (no es necesario volver a enlazar). También es más fácil en la memoria del navegador (menos eventos enlazados en el DOM).

Ejemplo rápido here .

jQuery plugin para facilitar la delegación de eventos.

PD. Estoy 99% seguro de que la delegación estará en el núcleo de jQuery en la próxima versión.

Answer 4

Use el siguiente código

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);

function pageLoaded(sender, args) {
    var updatedPanels = args.get_panelsUpdated();
    // check if Main Panel was updated 
    for (idx = 0; idx < updatedPanels.length; idx++) {
        if (updatedPanels[idx].id == "<%=upMain.ID %>") {
            rebindEventsForMainPanel();
            break;
        }
    }
}

Answer 5

Use el siguiente código. Debe validar que el control usará el datapicker:

    <script type="text/javascript" language="javascript">

         Sys.WebForms.PageRequestManager.getInstance().add_endRequest(addDataPicker); 
         function addDataPicker(sender, args)
         {
            var fchFacturacion = document.getElementById(''<%= txtFechaFacturacion.ClientID %>'');
            if (fchFacturacion != null) {
               $(fchFacturacion).datepicker({ onSelect: function () { }, changeMonth: true, changeYear: true, showOn: ''button'', buttonImage: ''../Imagenes/calendar.gif'', buttonImageOnly: true});}
         } 

    </script>

     <asp:UpdatePanel ID="upEjem" runat="server" UpdateMode="Conditional">
       <ContentTemplate>
              <div id="div1" runat="server" visible="false">
                  <input type="text" id="txtFechaFacturacion" 
                      name="txtFechaFacturacion" visible="true"
                      readonly="readonly" runat="server" />
              </div>
       </ContentTemplate>
     </asp:UpdatePanel>

Answer 6

Vincula tus eventos usando el nuevo método ''en vivo'' de jQuery. Se vinculará eventos a todos sus elementos presentes y todos los futuros también. Cha ching! :)

Answer 7

Dado que está utilizando ASP.NET AJAX, tendrá acceso a un controlador de eventos pageLoad , que recibe una llamada cada vez que la página publica, ya sea completa o parcial desde un Panel de actualización. Solo necesita ingresar la función en su página, no se requiere conexión.

function pageLoad(sender, args)
{
   if (args.get_isPartialLoad())
   {
       //Specific code for partial postbacks can go in here.
   }
}

Answer 8

         <script type="text/javascript">
             function pageLoad() {

                 if (Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack()) {


       }

            </script>

        </ContentTemplate>
    </asp:UpdatePanel>

en el "si" puede poner el código que necesita ejecutar cada vez que el panel de actualización hace AsyncPostBack.

Answer 9

Sys.Application.add_load(initSomething);
function initSomething()
{
  // will execute on load plus on every UpdatePanel postback
}