ASP.Net - Javascript dentro de AJAX UpdatePanel

Question

Tengo un problema con la ejecución de javascript desde un archivo javascript externo dentro de un UpdatePanel. Intento que un selector de color trabaje dentro de un ListView. ListView está dentro de un UpdatePanel.

Estoy usando this color picker.

Aquí es lo que he reducido a:

• Si utilizo el selector de color en un cuadro de texto fuera de un UpdatePanel, funciona perfectamente bien a través de todas las devoluciones de datos.

• Si utilizo el selector de color en un cuadro de texto dentro de un UpdatePanel, funciona, hasta que hago una devolución de datos asincrónica (haciendo clic en un botón "EDITAR" en el ListView). Una vez que el UpdatePanel haya hecho la devolución de datos, el cuadro de texto ya no mostrará el selector de color al hacer clic. Lo mismo ocurre cuando el cuadro de texto está en InsertItemTemplate o EditItemTemplate del ListView.

Si desea replicar, basta con descargar el selector de color (es gratis), a continuación, añadir esto a una página web ...

<asp:ScriptManager ID="ScriptManager1" runat="server"> 
</asp:ScriptManager> 

<div> 
    <asp:UpdatePanel ID="panel1" runat="server"> 
     <ContentTemplate> 
      <asp:TextBox runat="server" ID="textbox" CssClass="color" /> 
      <asp:Button ID="Button1" runat="server" Text="Button" /> 
     </ContentTemplate> 
    </asp:UpdatePanel> 
</div> 

Cuando se carga la página, las obras selector de color multa. Cuando haces clic en el botón (que hace una devolución de datos), el selector de color ya no funcionará.

¿Alguna idea?

Answer 1

Después de una ida y vuelta asíncrona, no se ejecutarán las secuencias de comandos de inicio, lo que es probable por qué no funciona después de la devolución de llamada AJAX. El selector de color probablemente tenga funciones que deben ejecutarse en la carga de la página.

Me he encontrado con esto tantas veces que escribí un pequeño método para registrar mis scripts en el código subyacente, que maneja viajes de ida y vuelta no asincrónicos y no asincrónicos. Aquí está el esquema básico:

private void RegisterClientStartupScript(string scriptKey, string scriptText) 
{ 
    ScriptManager sManager = ScriptManager.GetCurrent(this.Page); 

    if (sManager != null && sManager.IsInAsyncPostBack) 
    { 
     //if a MS AJAX request, use the Scriptmanager class 
     ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), scriptKey, scriptText, true); 
    } 
    else 
    { 
     //if a standard postback, use the standard ClientScript method 
     scriptText = string.Concat("Sys.Application.add_load(function(){", scriptText, "});"); 
     this.Page.ClientScript.RegisterStartupScript(this.Page.GetType(), scriptKey, scriptText, true); 
    } 
} 

realidad Yo al horno lo anterior en una clase de página base para que cualquier página que estoy trabajando se puede llamar this.RegisterClientStartupScript(...). Para hacerlo, simplemente crea una clase de página base e inclúyela allí (asegúrate de marcar protegido no privado o tus clases heredadas de página no podrán acceder a él).

Con el código anterior, puedo registrar con confianza scripts de cliente independientemente de si la página está haciendo una devolución de datos o una devolución de llamada. Al darse cuenta de que está utilizando archivos de script externos, probablemente podría modificar el método anterior para registrar scripts externos en lugar de en línea. Consulte la clase ScriptManager para obtener más detalles, ya que hay varios métodos de registro de scripts ...

Answer 2

Supongo que el código jscolor.js que se ejecuta para configurar el selector de color solo se invoca cuando la página se carga por primera vez, por lo que cuando se regenera el control en el servidor, se pierden los cambios realizados por jscolor. ¿Podría registrar algún javascript para que se le llame en su código para que llame al método init en jscolor cuando se complete su llamada de asincronización?

Answer 3

¿Has probado ScriptManager.RegisterStartupScript que te permite "agregar JavaScript desde el servidor a una página cuando realizas una devolución de datos asincrónica"?

Answer 4

Después de ver el código fuente jscolor, noté que inicializa todo en la carga de la ventana. Por lo tanto, es probable que tenga que volver a init con algo como esto (dentro del UpdatePanel):

function yourInit(){ 
    /* keep in mind that the jscolor.js file has no way to determine 
     that the script has already been initialized, and you may end 
     up initializing it twice, unless you remove jscolor.install(); 
    */ 

    if (typeof(jscolor) !== 'undefined'){ 
     jscolor.init(); 
    } 
} 
if (typeof(Sys) !== 'undefined'){ 
    Sys.UI.DomEvent.addHandler(window, "load", yourInit); 
} 
else{ 
    // no ASP.NET AJAX, use your favorite event 
    // attachment method here 
} 

Si usted decide poner el guión jscolor dentro del UpdatePanel, también tendrá que añadir algo como esto a la fin del jscolor.js:

if(Sys && Sys.Application){ 
    Sys.Application.notifyScriptLoaded(); 
}