JQuery se desactiva cuando se hace Click en un Boton Aspx.

jorgelramos · #1 (**permalink**) 11/08/2011, 18:33

hola estimados.
Tengo un problema. estoy tratando de empezar a utulizar JQUERY en mis aplicaciones ASPX 3.5. y usando Marter Page. basicamente lo utilizo para poner un Acordión, uso controles Aspx como botones que producen POSTBACK, y cuando hago click en el boton aparentemente el JQUERY deja de funcionar, he estado tratando de indagar por todo lado y no he podido dar con una solución.

El codigo del Master Page

Código HTML:

<%@ Master Language="VB" CodeFile="MasterWeb.master.vb" Inherits="MasterWeb" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/Esquemas.css"/>
    <script src="../js/js/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script src="../js/js/jquery-ui-1.8.15.custom.min.js" type="text/javascript"></script>
    <asp:ContentPlaceHolder ID="CPH_Head" runat="server"></asp:ContentPlaceHolder>   
</head>
<body style="margin:0px" >
    <form id="form1" runat="server"><asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <div class="sCab"></div>
    <asp:ContentPlaceHolder ID="CPH_Body" runat="server"></asp:ContentPlaceHolder>
    <div class="sPie"></div>
    </form>
</body>
</html>

Codigo de la Pagina Contenedora

Código HTML:

<%@ Page Language="VB" MasterPageFile="~/MasterWeb.master" AutoEventWireup="true" CodeFile="Inicio.aspx.vb" Inherits="paginas_Inicio" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>
<asp:Content ID="Content1" runat="server" contentplaceholderid="CPH_Head"> 
    <script type="text/javascript" language="javascript" >
    $(document).ready(function() {
        $("#accordion").accordion();       
    });

</script> 
</asp:Content>
<asp:Content ID="Content2" runat="server" contentplaceholderid="CPH_Body">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" >
<ContentTemplate>                        
<div id="accordion">
   <h3><a href="#">Sección 1</a></h3>
   <div>Contenido 1...
       <asp:Button ID="Button1" CssClass="boton1" runat="server" Text="EJEMPLO 1" />      
       <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
   </div>
   <h3><a href="#">Sección 2</a></h3>
   <div>Contenido 2...</div>
   <h3><a href="#">Sección n</a></h3>
   <div>Contenido n</div>
</div>              
</ContentTemplate>        
</asp:UpdatePanel>
</asp:Content>

y el Codigo ASPX del boton "Button1"

Código HTML:

    Protected Sub Button1_Click1(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
        Label1.Text = Now
        UpdatePanel1.Update()
    End Sub

Espero me puedan guiar en este Problema.

Saludos.

dwaks · #2 (**permalink**) 14/08/2011, 08:24

También coloca el código html generado cuando si funciona y después del click del botón.

Como lo tienes dentro del UpdatePanel del Ajax ToolKit puede ser el factor. Cuando das click el UpdatePanel modifica esa área y debes validar esa información porque se pierde referencia al id accordion ya que el DOM del jquery es atachado al load de la página global y no del load parcial que hace el UpdatePanel.

Lo otro y más simple para que pruebes es que muevas el código del jquery despúes del acordion haciéndolo parte de cada refresh del UpdatePanel. Ponlo entre </div> y </ContentTemplate>.

Puedes decirnos que tratas de hacer poniendo el acordion dentro del UpdatePanel?

Saludos,

jorgelramos · #3 (**permalink**) 15/08/2011, 08:51

Hola gracias por tu respuesta,
Compare los dos codigos HMTL generados antes y despues del PostBack del boton aspx y eran iguales.

Lo que hice fue sacar el boton del UpdatePanel y entonces funcionó bien. pero esa no es la idea, si pongo updatepanel es justamente para no tener que recargar toda la pagina.

Respondiendo a tu pregunta del porque poner el Acordion dentro de UpdatePanel, pues supongamos que cada opcion del Acordión seria una Opcion de mi Sistema en que la primera fuera un Registrar, y la segunda pestaña del Acordion fuera un Listar, y dentro de cada pestaña tendria un boton aspx GRABAR y en la otra un boton aspx LISTAR, logicamente no se quiere que se recargue toda la página, ya se que se podria hacer en paginas separadas pero digamos que se requiere hacer eso en la misma pagina usando las pestañas del Acordion, es mas con cualquier codigo Jquery en General.

Probe con lo que me dijiste de poner el Codigo Jquery osea el

Código HTML:

 <script type="text/javascript" language="javascript" >
    $(document).ready(function() {
        $("#accordion").accordion();       
    });

</script>

entre el </div> y el
</ContentTemplate> , pero igual no funcionó.

Espero puedas ayudarme en este problema..

Gracias, Saludos.