none
mantener diseño de las Tabs RRS feed

  • Pregunta

  • Hola amigos 

    aqui de nuevo molestando 

    tengo una duda tengo una pagina en tabs

    Codigo

    <link href="Tabs/jquery.ui.all.css" rel="stylesheet" type="text/css" />
        <script src="Tabs/jquery-1.8.0.min.js" type="text/javascript"></script>
        <script src="Tabs/jquery.ui.core.js" type="text/javascript"></script>
        <script src="Tabs/jquery.ui.widget.js" type="text/javascript"></script>
        <script src="Tabs/jquery.ui.tabs.js" type="text/javascript"></script>
        <script>
            $(function () {
                $("#tabs").tabs();
            });
    	</script>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
    <div class="demo">
    
                <div id="tabs">
    	            <ul>
    		            <li><a href="#tabs-1">Registrar</a></li>
    		            <li><a href="#tabs-2">Actualizar</a></li>
    	            </ul>
    	            <div id="tabs-1">
    		            <h3>Registrar Pais</h3>
                        
                        <br />
                        <br />
    	            </div>
    	            <div id="tabs-2">
    		            <h3>Actualizar Pais</h3>
                       
                        <br />
                        <br />
    	            </div>
    	            <div id="tabs-3">  
                        <h3>Revertir Cobros</h3>
                        
                        <br />
                        <br />
    	            </div>
                </div>
    
            </div><!-- End demo -->
    </ContentTemplate>
        </asp:UpdatePanel>
    

    y esta es la visualización del código


    lo que ocurre es que cuando digamos doy click a select del grid que me carge la fila seleccionado en un unos textbox me ocurre esto con el diseño

    si ven se distorsiona el diseño y no se porque no se si es algo de los JQuery o es problema del updatepanel que he colocado, me gustaría que pudieran explicarme porque me sucede esto.

    cabe aclarar que cuando recargo la pagina completa vuelve el diseño pero si doy click de nuevo al select del grid pasa de nuevo lo mismo.

    De antemano muchas gracias

    martes, 11 de noviembre de 2014 21:56

Respuestas

  • El problema es que el UpdatePanel está destruyendo el control Tabs de jQuery porque está recargando el HTML.

    Hace mucho dejé Webforms atrás así que no recuerdo si es posible o no, pero teóricamente lo que necesita es aplicar nuevamente el control Tabs después de que el UpdatePanel recarga.

    Alternativamente puede probar a eliminar el UpdatePanel que encierra completamente el DIV de tabs y aplicar pequeños UpdatePanel encerrando únicamente los contenidos internos de los DIV que contienen los contenidos de cada tab.


    Jose R. MCP
    Code Samples


    • Editado webJoseModerator miércoles, 12 de noviembre de 2014 2:07
    • Marcado como respuesta Francisco901 viernes, 28 de noviembre de 2014 22:34
    miércoles, 12 de noviembre de 2014 2:05
    Moderador
  • >>si ven se distorsiona el diseño y no se porque no se si es algo de los JQuery o es problema del updatepanel que he colocado, me gustaría que pudieran explicarme porque me sucede esto.

    esto sucede porque jquery se lleva pesimo con asp.net y su modelo de eventos, cuando se lanza un evento deberias tener en cuanta que a la vuelta la linea $("#tabs").tabs(); vuelva a ejecutarse

    sino quizas deberias dejar de usar eventos y realizas invocaciones ajax al servidor usando $.ajax de jquery

    o sino tambien podrias implementar el tab de ajaxtoolkit

    Tabs ajaxtoolkit

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    • Marcado como respuesta Francisco901 viernes, 28 de noviembre de 2014 22:36
    lunes, 17 de noviembre de 2014 15:42

Todas las respuestas

  • El problema es que el UpdatePanel está destruyendo el control Tabs de jQuery porque está recargando el HTML.

    Hace mucho dejé Webforms atrás así que no recuerdo si es posible o no, pero teóricamente lo que necesita es aplicar nuevamente el control Tabs después de que el UpdatePanel recarga.

    Alternativamente puede probar a eliminar el UpdatePanel que encierra completamente el DIV de tabs y aplicar pequeños UpdatePanel encerrando únicamente los contenidos internos de los DIV que contienen los contenidos de cada tab.


    Jose R. MCP
    Code Samples


    • Editado webJoseModerator miércoles, 12 de noviembre de 2014 2:07
    • Marcado como respuesta Francisco901 viernes, 28 de noviembre de 2014 22:34
    miércoles, 12 de noviembre de 2014 2:05
    Moderador
  • hola webjose gracias por contertar y perdon por no contestar antes.

    ya hice lo que me digiste pero me sigue pasando lo mismo con el diseño

    lunes, 17 de noviembre de 2014 15:28
  • Hmm, curioso.  Pero bueno, yo le di dos alternativas.  ¿Cuál de ellas probó?  Coloque el nuevo código aquí para validar que corresponda a lo que le sugerí.

    Jose R. MCP
    Code Samples

    lunes, 17 de noviembre de 2014 15:35
    Moderador
  • >>si ven se distorsiona el diseño y no se porque no se si es algo de los JQuery o es problema del updatepanel que he colocado, me gustaría que pudieran explicarme porque me sucede esto.

    esto sucede porque jquery se lleva pesimo con asp.net y su modelo de eventos, cuando se lanza un evento deberias tener en cuanta que a la vuelta la linea $("#tabs").tabs(); vuelva a ejecutarse

    sino quizas deberias dejar de usar eventos y realizas invocaciones ajax al servidor usando $.ajax de jquery

    o sino tambien podrias implementar el tab de ajaxtoolkit

    Tabs ajaxtoolkit

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    • Marcado como respuesta Francisco901 viernes, 28 de noviembre de 2014 22:36
    lunes, 17 de noviembre de 2014 15:42
  • Hola perdon mi ausencia pero e estado muy atareado

    este es mi nuevo codigo, en realidad no entiendo porque no me funciona y cada vez que doy click sigue distorcinandose el diseño

    <link href="Tabs/jquery.ui.all.css" rel="stylesheet" type="text/css" />
        <script src="Tabs/jquery-1.8.0.min.js" type="text/javascript"></script>
        <script src="Tabs/jquery.ui.core.js" type="text/javascript"></script>
        <script src="Tabs/jquery.ui.widget.js" type="text/javascript"></script>
        <script src="Tabs/jquery.ui.tabs.js" type="text/javascript"></script>
        <script>
            $(function () {
                $("#tabs").tabs();
            });
    	</script>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
    
    <div class="demo">
    
                <div id="tabs">
    	            <ul>
    		            <li><a href="#tabs-1">Registrar</a></li>
    		            <li><a href="#tabs-2">Actualizar</a></li>
                        <li><a href="#tabs-3">Registrar Depart</a></li>
    		            <li><a href="#tabs-4">Actualizar Depart</a></li>
                        <li><a href="#tabs-5">Registrar Muni</a></li>
                        <li><a href="#tabs-6">Actualizar Muni</a></li>
    	            </ul>
                    <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                    <ContentTemplate>
    	            <div id="tabs-1">
    		            <h3>Registrar Pais</h3>
                           <table class="style1">
                                <tr>
                                    <td class="style9">
                                        <asp:Label ID="lblNombrePais" runat="server" Text="Pais :"></asp:Label>
                                    </td>
                                    <td class="style7">
                                        <asp:TextBox ID="txtPais" runat="server" Height="22px" Width="199px"></asp:TextBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="style9">
                                        <asp:Label ID="lblCodigoPais" runat="server" Text="Codigo de Pais :"></asp:Label>
                                    </td>
                                    <td class="style7">
                                        <asp:TextBox ID="txtCodigoPais" runat="server"></asp:TextBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="style9">
                                        <asp:Label ID="lblImpuesto" runat="server" Text="Impuesto Pais :"></asp:Label>
                                    </td>
                                    <td class="style7">
                                        <asp:TextBox ID="txtImpuestoPais" runat="server"></asp:TextBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="style9">
                                        <asp:Label ID="lblTasa" runat="server" Text="Tasa de Impuesto :"></asp:Label>
                                    </td>
                                    <td class="style7">
                                        <asp:TextBox ID="txtTasaImpuesto" runat="server"></asp:TextBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="style9">
                                        <asp:Label ID="lblMoneda" runat="server" Text="Moneda :"></asp:Label>
                                    </td>
                                    <td class="style7">
                                        <asp:TextBox ID="txtMoneda" runat="server"></asp:TextBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="style9">
                                        <asp:Button ID="btnGuardar" runat="server" Text="Guardar" 
                                            onclick="btnGuardar_Click" />
                                    </td>
                                    <td class="style7">
                                        <asp:Label ID="lblMensaje" runat="server" Text=""></asp:Label>
                                    </td>
                                </tr>
                            </table> 
                        <br />
                        <br />
    	            </div>
                    </ContentTemplate>
                    </asp:UpdatePanel>
    Ayuda porfavor ya agote mis recursos no se que puedo hacer

    jueves, 27 de noviembre de 2014 20:46
  • Se que estan ocupados pero estoy desesperado ademas no puedo cambiar a ajax me han pedido precisamente Jquery para la programacion.

    muchas gracias por sus respuesta si estan correctas y funcionan pero para lo que yo la necesito no solventa mi problema.

    como puedo hacer para evitar que se distorcione el diseño cuando doy click a un boton o un evento select

     
    viernes, 28 de noviembre de 2014 19:59
  • Gracias a ambos por el apoyo ya logre solventar mi problema El de webjose me sirvió era yo el que no entendí la esencia de la solución.

    Leandro muchas gracias igual por el aporte es un conocimiento nuevo para mi gracias infinitamente gracias

    viernes, 28 de noviembre de 2014 22:36