none
Problemas jQuery y MasterPage RRS feed

  • Pregunta

  • Que tal ¡¡

    Estoy tratando de hacer un ModalProgress con jquery, tengo funcionando al 100 este codigo dentro de un .aspx el problema viene cuando pongo este .aspx dentro de un master page, se que cuando pones una pagina dentro de un mp cambia los nombres pero ya hice mis cambios para esto y ni asi me funciona, dejo mi codigo:

    ASPX

    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server"><br/>
    	<asp:ScriptManager runat="server"><br/>
    		<Scripts><br/>
    			<asp:ScriptReference Path="~/jquery-1.2.6.min.js" /><br/>
    			<asp:ScriptReference Path="~/jquery.blockUI.js" /><br/>
    			<asp:ScriptReference Path="~/Default.js" /><br/>
    		</Scripts><br/>
    	</asp:ScriptManager><br/>
    	<div id="EntryForm"><br/>
    		<label for="Name"><br/>
    			Name:</label><br/>
    		<asp:TextBox runat="server" ID="Name" /><br/>
    		<label for="Address"><br/>
    			Address:</label><br/>
    		<asp:TextBox runat="server" ID="Address" /><br/>
    		<label for="City"><br/>
    			City:</label><br/>
    		<asp:TextBox runat="server" ID="City" /><br/>
    		<label for="State"><br/>
    			State:</label><br/>
    		<asp:TextBox runat="server" ID="State" /><br/>
    		<label for="Zip"><br/>
    			Zip:</label><br/>
    		<asp:TextBox runat="server" ID="Zip" /><br/>
    		<asp:Button runat="server" ID="Save" OnClick="Save_Click" Text="Add Customer" UseSubmitBehavior="false" /><br/>
    	</div><br/>
    	<asp:UpdatePanel runat="server" ID="up1"><br/>
    		<Triggers><br/>
    			<asp:AsyncPostBackTrigger ControlID="Save" /><br/>
    		</Triggers><br/>
    		<ContentTemplate><br/>
    			<asp:Panel runat="server" ID="ConfirmSave" Visible="false"><br/>
    				<h3><br/>
    					<asp:Literal runat="server" ID="CustomerName" /><br/>
    					added.</h3><br/>
    			</asp:Panel><br/>
    		</ContentTemplate><br/>
    	</asp:UpdatePanel><br/>
    </asp:Content>
    

    Codigo jQuery

    Sys.Application.add_init(function() {
     // Allows the div.blockMsg style in CSS to
     // override BlockUI's defaults.
     $.blockUI.defaults.css = {};
    
     // Add the BlockUI call as an onclick handler
     // of the Save button.
     $addHandler($get('Save'), 'click', function() {
     $('#<%=EntryForm.ClientID %>').block({ message: null });
     });
     
     // Get a reference to the PageRequestManager.
     var prm = Sys.WebForms.PageRequestManager.getInstance();
    
     // Unblock the form when a partial postback ends.
     prm.add_endRequest(function() {
     $('#<%=EntryForm.ClientID %>').unblock();
     });
    });
    
    // Bonus! Progress indicator preloading.
    var preload = document.createElement('img');
    preload.src = 'images/progress-indicator.gif';
    delete preload;

    Para trarar de hacerlo funcionar dentro del MP agregue que tome el ClienteId pero tampoco me funciona.

    Alguien alguna ayudadita por favor ??

    Muchas gracias y Saludos ¡¡¡

     

    sábado, 17 de julio de 2010 18:54

Respuestas

  • Estoy viendo que en la asignación del evento "click" te faltó obtener el ClientID del botón "Save".  Prueba con este script para ver si te funciona: 

    Sys.Application.add_init(function() {
     // Allows the div.blockMsg style in CSS to
     // override BlockUI's defaults.
     $.blockUI.defaults.css = {};
    
     // Add the BlockUI call as an onclick handler
     // of the Save button.
     $addHandler($get('#<%=Save.ClientID %>'), 'click', function() {
     $('#<%=EntryForm.ClientID %>').block({ message: null });
     });
     
     // Get a reference to the PageRequestManager.
     var prm = Sys.WebForms.PageRequestManager.getInstance();
    
     // Unblock the form when a partial postback ends.
     prm.add_endRequest(function() {
     $('#<%=EntryForm.ClientID %>').unblock();
     });
    });
    
    // Bonus! Progress indicator preloading.
    var preload = document.createElement('img');
    preload.src = 'images/progress-indicator.gif';
    delete preload;

    Una consulta: ¿Este script lo estás poniendo dentro de tu página o como un archivo .js?

    Suerte!


    Para el correcto funcionamiento y que otros usuarios se puedan beneficiar de la solucion de esta pregunta por favor marca las respuestas que te hayan ayudado como "Respuesta".
    Si la respuesta te ha sido útil por favor Vótala.

    Gustavo A. Cantero
    Scientia® Soluciones Informáticas
    MCP - MCSD - MCTS - MCPD
    http://www.scientia.com.ar
    http://www.programandoamedianoche.com
    http://www.gustavo-cantero.com.ar
    http://twitter.com/ScientiaIT
    http://facebook.com/ScientiaIT
    • Marcado como respuesta Tom_1003 sábado, 17 de julio de 2010 20:39
    sábado, 17 de julio de 2010 19:13
  • EL problema es que si tienes un script en un .js la parte del código que dice "<%=EntryForm.ClientID %>" no se va a ejecutar, ya que no está dentro de la página.  Podrias hacer lo siguiente:

    - Dentro de la página .aspx agrega una parte de script que guarde el nombre de los objetos en variables, algo así:

    <script type="text/javascript">
    var idEntryForm = '<%=EntryForm.ClientID %>';
    </script>

    - Dentro de .js utiliza esta variable, por ejemplo:

    $('#' + idEntryForm).block({ message: null });

    Con eso debería funcionar.

    Suerte!


    Para el correcto funcionamiento y que otros usuarios se puedan beneficiar de la solucion de esta pregunta por favor marca las respuestas que te hayan ayudado como "Respuesta".
    Si la respuesta te ha sido útil por favor Vótala.

    Gustavo A. Cantero
    Scientia® Soluciones Informáticas
    MCP - MCSD - MCTS - MCPD
    http://www.scientia.com.ar
    http://www.programandoamedianoche.com
    http://www.gustavo-cantero.com.ar
    http://twitter.com/ScientiaIT
    http://facebook.com/ScientiaIT
    sábado, 17 de julio de 2010 19:32
  • Y QUE FUNCIONA GUSTAVO :D

    la solucion fue la que dijiste de agregar las variables dentro del aspx

    <script type="text/javascript">

        var idEntryForm = '<%=EntryForm.ClientID %>';
        var idSave = '<%=Save.ClientID %>';
    </script>

    MUCHAS GRACIAS, TODO SALIO MAS QUE BIEN.

    AHORA LO TENGO FUNCIONANDO AL 100 DENTRO DE UN MASTER PAGE.

    SALUDOS ¡¡¡¡¡¡

    • Marcado como respuesta Tom_1003 sábado, 17 de julio de 2010 20:38
    sábado, 17 de julio de 2010 20:38

Todas las respuestas

  • Si estás utilizando ASP.NET 4 puedes establecer la propiedad ClientIDMode de tus controles en "Static" que no cambie su ID.  Aquí tienes la documentación de esta propiedad: Control.ClientIDMode Property.

    Suerte!


    Para el correcto funcionamiento y que otros usuarios se puedan beneficiar de la solucion de esta pregunta por favor marca las respuestas que te hayan ayudado como "Respuesta".
    Si la respuesta te ha sido útil por favor Vótala.

    Gustavo A. Cantero
    Scientia® Soluciones Informáticas
    MCP - MCSD - MCTS - MCPD
    http://www.scientia.com.ar
    http://www.programandoamedianoche.com
    http://www.gustavo-cantero.com.ar
    http://twitter.com/ScientiaIT
    http://facebook.com/ScientiaIT
    sábado, 17 de julio de 2010 19:02
  • Que tal Gustavo, gracias por la ayuda y por el tip, pero te comento, ahorita toda la platadorma esta bajo 3.5.

     

    Muchas gracias.

    sábado, 17 de julio de 2010 19:07
  • Estoy viendo que en la asignación del evento "click" te faltó obtener el ClientID del botón "Save".  Prueba con este script para ver si te funciona: 

    Sys.Application.add_init(function() {
     // Allows the div.blockMsg style in CSS to
     // override BlockUI's defaults.
     $.blockUI.defaults.css = {};
    
     // Add the BlockUI call as an onclick handler
     // of the Save button.
     $addHandler($get('#<%=Save.ClientID %>'), 'click', function() {
     $('#<%=EntryForm.ClientID %>').block({ message: null });
     });
     
     // Get a reference to the PageRequestManager.
     var prm = Sys.WebForms.PageRequestManager.getInstance();
    
     // Unblock the form when a partial postback ends.
     prm.add_endRequest(function() {
     $('#<%=EntryForm.ClientID %>').unblock();
     });
    });
    
    // Bonus! Progress indicator preloading.
    var preload = document.createElement('img');
    preload.src = 'images/progress-indicator.gif';
    delete preload;

    Una consulta: ¿Este script lo estás poniendo dentro de tu página o como un archivo .js?

    Suerte!


    Para el correcto funcionamiento y que otros usuarios se puedan beneficiar de la solucion de esta pregunta por favor marca las respuestas que te hayan ayudado como "Respuesta".
    Si la respuesta te ha sido útil por favor Vótala.

    Gustavo A. Cantero
    Scientia® Soluciones Informáticas
    MCP - MCSD - MCTS - MCPD
    http://www.scientia.com.ar
    http://www.programandoamedianoche.com
    http://www.gustavo-cantero.com.ar
    http://twitter.com/ScientiaIT
    http://facebook.com/ScientiaIT
    • Marcado como respuesta Tom_1003 sábado, 17 de julio de 2010 20:39
    sábado, 17 de julio de 2010 19:13
  • Gracias por la gran ayuda:

    Hice un proyecto para hacer la prueba de su funcionamiento y actualmente esta asi:

    root

         Default.aspx

         MasterPage.master

         Default.js

         jquery-1.2.6.min.js

         jquery.blockUI.js

     

    ahora asi tengo mi Master Page

     

    <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
    
    <!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 href="~/Default.css" rel="stylesheet" type="text/css" />
      <asp:ContentPlaceHolder id="head" runat="server">
      </asp:ContentPlaceHolder>
    </head>
    <body>
      <form id="form1" runat="server">
      <asp:ScriptManager ID="ScriptManager1" runat="server">
    		<Scripts>
    			<asp:ScriptReference Path="~/jquery-1.2.6.min.js" />
    			<asp:ScriptReference Path="~/jquery.blockUI.js" />
    			<asp:ScriptReference Path="~/Default.js" />
    		</Scripts>
    	</asp:ScriptManager>
      <div>
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
        
        </asp:ContentPlaceHolder>
      </div>
      </form>
    </body>
    </html>
    
    

    Contestanto tu pregunta, cargo los js desde el MP.

    Intente haciendo el cambio al $get('Save') y tampoco me funciono.

    Intente poner el codigo de Default.js al final del .aspx y me dice que no encuentra el objeto EntryForm

    sábado, 17 de julio de 2010 19:25
  • EL problema es que si tienes un script en un .js la parte del código que dice "<%=EntryForm.ClientID %>" no se va a ejecutar, ya que no está dentro de la página.  Podrias hacer lo siguiente:

    - Dentro de la página .aspx agrega una parte de script que guarde el nombre de los objetos en variables, algo así:

    <script type="text/javascript">
    var idEntryForm = '<%=EntryForm.ClientID %>';
    </script>

    - Dentro de .js utiliza esta variable, por ejemplo:

    $('#' + idEntryForm).block({ message: null });

    Con eso debería funcionar.

    Suerte!


    Para el correcto funcionamiento y que otros usuarios se puedan beneficiar de la solucion de esta pregunta por favor marca las respuestas que te hayan ayudado como "Respuesta".
    Si la respuesta te ha sido útil por favor Vótala.

    Gustavo A. Cantero
    Scientia® Soluciones Informáticas
    MCP - MCSD - MCTS - MCPD
    http://www.scientia.com.ar
    http://www.programandoamedianoche.com
    http://www.gustavo-cantero.com.ar
    http://twitter.com/ScientiaIT
    http://facebook.com/ScientiaIT
    sábado, 17 de julio de 2010 19:32
  • Me acabo de dar cuenta que el div con el Id EntryForm no es runat server, entonces jamas va a encontrar el ClientId del div.

    deja hago el cambio completo y te aviso.

    Gracias de vd por seguir el post.

     

     

    sábado, 17 de julio de 2010 19:47
  • Ok, por favor pruébalo y avísame.

    Saludos.


    Para el correcto funcionamiento y que otros usuarios se puedan beneficiar de la solucion de esta pregunta por favor marca las respuestas que te hayan ayudado como "Respuesta".
    Si la respuesta te ha sido útil por favor Vótala.

    Gustavo A. Cantero
    Scientia® Soluciones Informáticas
    MCP - MCSD - MCTS - MCPD
    http://www.scientia.com.ar
    http://www.programandoamedianoche.com
    http://www.gustavo-cantero.com.ar
    http://twitter.com/ScientiaIT
    http://facebook.com/ScientiaIT
    sábado, 17 de julio de 2010 19:57
  • Y QUE FUNCIONA GUSTAVO :D

    la solucion fue la que dijiste de agregar las variables dentro del aspx

    <script type="text/javascript">

        var idEntryForm = '<%=EntryForm.ClientID %>';
        var idSave = '<%=Save.ClientID %>';
    </script>

    MUCHAS GRACIAS, TODO SALIO MAS QUE BIEN.

    AHORA LO TENGO FUNCIONANDO AL 100 DENTRO DE UN MASTER PAGE.

    SALUDOS ¡¡¡¡¡¡

    • Marcado como respuesta Tom_1003 sábado, 17 de julio de 2010 20:38
    sábado, 17 de julio de 2010 20:38
  • Me alegro!

    Saludos!


    Para el correcto funcionamiento y que otros usuarios se puedan beneficiar de la solucion de esta pregunta por favor marca las respuestas que te hayan ayudado como "Respuesta".
    Si la respuesta te ha sido útil por favor Vótala.

    Gustavo A. Cantero
    Scientia® Soluciones Informáticas
    MCP - MCSD - MCTS - MCPD
    http://www.scientia.com.ar
    http://www.programandoamedianoche.com
    http://www.gustavo-cantero.com.ar
    http://twitter.com/ScientiaIT
    http://facebook.com/ScientiaIT
    sábado, 17 de julio de 2010 20:39
  • HOla Estoy con un problema similar. Y no puedo solucionarlo..

    En una pagina sin masterPages me corre bien, pero cuando lo uso con el masterPages, no me funciona tampoco me bota error.

    Padrian dame la solucion??

    (NO PONGO LOS JQUERY POR QUE SON LARGOS)

    -- MI MASTER ---------------------------------------------------------------------------------------------------------------------------
    -- EN RESUMEN 

     

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

              <Scripts>

                    <asp:ScriptReference Path="~/Funciones/jquery-1.4.1.min.js" />

                    <asp:ScriptReference Path="~/Funciones/ScrollableGridPlugin.js" />

                </Scripts>

                                                                    

     </asp:ScriptManager>

    <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

    </asp:ContentPlaceHolder> 

     

     

     

    -- MI ASPX ---------------------------------------------------------------------------------------------------------------------------
    -- RESUMEN 

     

    <%@ Page Language="VB" MasterPageFile="~/MasterCancela.master" EnableEventValidation="true"  AutoEventWireup="false" CodeFile="CANCELAOPER_OrdenDeposito.aspx.vb" Inherits="Paginas_CANCELAOPER_OrdenDeposito" title="ORDEN DE DEPOSITOS" %>

    <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> 

     

    <table width="100%" >

       <script type = "text/javascript">

        $(document).ready(function () {

            $('#<%=dgSaldos.ClientID %>').Scrollable({

                ScrollHeight: 250

            });

     

        });

        </script>  

    ...

     

    <asp:GridView id="dgSaldos" runat="server" BackColor="White" BorderColor="#CCCCCC"
    BorderStyle="None" BorderWidth="1px" CellPadding="2" AutoGenerateColumns="False"
    CssClass="contenido2" PageSize="20" > <RowStyle ForeColor="#000066" />

    <Columns>

    <TemplateField></TemplateField>
    <asp:BoundField></asp:BoundField>

    <Columns>

    </asp:GridView>

    ..

    -------------------------------------------------------------

     


    jueves, 26 de mayo de 2011 17:52
  • Probá poniendo un ContentPlaceHolder dentro del tag HEAD del Master, y en tu página poné el script dentro de un "Content" que apunte al anterior, por ejemplo, en tu Master podrías tener algo así:
    <!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 id="Head1" runat="server">
      <asp:ContentPlaceHolder ID="head" runat="server" />
    </head>
    <body>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
          <Scripts>
             <asp:ScriptReference Path="~/Funciones/jquery-1.4.1.min.js" />
             <asp:ScriptReference Path="~/Funciones/ScrollableGridPlugin.js" />
           </Scripts>
     </asp:ScriptManager>
     <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server" />
    </body>
    </html>
    

    y en tu página algo así:

    <asp:Content ContentPlaceHolderID="head" Runat="Server"> 
      <script type = "text/javascript">
      $(document).ready(function () {
        $('#<%=dgSaldos.ClientID %>').Scrollable({
          ScrollHeight: 250
        });
      });
      </script> 
    </asp:Content>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> 
     
    <asp:GridView id="dgSaldos" runat="server" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="2" AutoGenerateColumns="False" 
    CssClass="contenido2" PageSize="20" > <RowStyle ForeColor="#000066" />
     
    <Columns>
     
    <TemplateField></TemplateField>
     <asp:BoundField></asp:BoundField>
     
    <Columns>
     
    </asp:GridView>
    </asp:Content>
    

    Suerte!


    Para el correcto funcionamiento y que otros usuarios se puedan beneficiar de la solucion de esta pregunta por favor marca las respuestas que te hayan ayudado como "Respuesta".
    Si la respuesta te ha sido útil por favor Vótala.

    Gustavo A. Cantero
    Scientia® Soluciones Informáticas
    MCP - MCSD - MCTS - MCPD
    http://www.scientia.com.ar
    http://www.programandoamedianoche.com
    http://www.gustavo-cantero.com.ar
    http://twitter.com/ScientiaIT
    http://facebook.com/ScientiaIT
    viernes, 27 de mayo de 2011 12:56
  • Amigo hice todo lo que lei sin excepción copio mi código de la pagina aspx

    <asp:ScriptManager ID="ScriptManager1" runat="server">
      <Scripts>
       <asp:ScriptReference Path="~/script/jquery-1.6.2.min.js" />
       <asp:ScriptReference Path="~/script/jquery.blockUI.js" />
       <asp:ScriptReference Path="~/script/Default.js" />
      </Scripts>
     </asp:ScriptManager>
    <script type="text/javascript">
      var idEntryForm = '<%=EntryForm.ClientID %>';
      var idlnkmes1 = '<%=lnkmes1.ClientID %>';
      var idlnkmes2 = '<%=lnkmes2.ClientID %>';
      var idlnkmes3 = '<%=lnkmes3.ClientID %>';
    </script>
    
    <div id="EntryForm" runat="server">
        
       <table width="100%" border="0" cellpadding="0" cellspacing="0">
         <tr>
          <th class="barrano" scope="col"><table width="100%" border="0" cellspacing="0" cellpadding="10">
           <tr>
            <th class="textobarra" scope="col">SELECCIONE EL MES Y JUEGO DE SU PREFERENCIA</th>
            <th class="textobarra" scope="col">
              <asp:LinkButton ID="lnkmes1" runat="server" Visible="True" OnClick="lnkMonthClick"></asp:LinkButton>
            </th>
            <th class="textobarra" scope="col">
              <asp:LinkButton ID="lnkmes2" runat="server" Visible="True" OnClick="lnkMonthClick"></asp:LinkButton>
            </th>
            <th class="textobarra" scope="col">
              <asp:LinkButton ID="lnkmes3" runat="server" Visible="True" OnClick="lnkMonthClick"></asp:LinkButton>
            </th>
           </tr>
          </table></th>
         </tr>
        </table>
        <table width="100%" border="0" height="50" cellpadding="0" cellspacing="0" >
     <tr class="barrahomelat">
          <td height="10" colspan="7" class="mes" scope="col">
            <asp:Label ID="Lblmes" 
              runat="server"></asp:Label>
          </td>
          </tr>
    </table>
    
    <table width="100%" border="0"class="barratotal">
         <tr>
          <td>
          <asp:Calendar ID="Calendar1" runat="server" 
              BackColor="White" 
              OnDayRender="Calendar1_DayRender" 
              OnSelectionChanged="Date_Selected"
              Width="100%" 
              ForeColor="Black" 
              Height="400px" 
              Font-Size="X-Small" 
              Font-Names="Verdana"
              BorderColor="White" 
              Font-Bold="True" 
              ShowNextPrevMonth="False" 
              ShowTitle="False">
              <TodayDayStyle BackColor="#CCCCCC" Font-Size="X-Small"></TodayDayStyle>
              <DayHeaderStyle Font-Size="X-Small" Font-Bold="True"></DayHeaderStyle>
              <SelectedDayStyle ForeColor="White" BackColor="#333399"></SelectedDayStyle>
           </asp:Calendar>
          
          </td>
         </tr>
        </table>
    </div> 
     <asp:UpdatePanel runat="server" ID="up1">
      <Triggers>
       <asp:AsyncPostBackTrigger ControlID="Calendar1" />
      </Triggers>
     </asp:UpdatePanel>  
       
    

    Este es el codigo del Js

    Sys.Application.add_init(function() {
     // Allows the div.blockMsg style in CSS to
     // override BlockUI's defaults.
     $.blockUI.defaults.css = {};
     // Add the BlockUI call as an onclick handler
     // of the Save button.
     $addHandler($get(idlnkmes1), 'click', function() {
        $('#' + idEntryForm).block({ message: null });
     });
     $addHandler($get(idlnkmes2), 'click', function() {
        $('#' + idEntryForm).block({ message: null });
     });
     $addHandler($get(idlnkmes3), 'click', function() {
        $('#' + idEntryForm).block({ message: null });
     });
     
     // Get a reference to the PageRequestManager.
     var prm = Sys.WebForms.PageRequestManager.getInstance();
    
     // Unblock the form when a partial postback ends.
     prm.add_endRequest(function() {
        $('#' + idEntryForm).unblock();
     });
    });
    
    // Bonus! Progress indicator preloading.
    var preload = document.createElement('img');
    preload.src = '../images/comunes/progress-indicator.gif';
    delete preload;


    y este mi codigo dentro de cada link que cambia el calendarios

    this.Calendar1.VisibleDate = new DateTime(DateTime.Now.Year, VariableMES, 1, 0, 0, 1);
    

    bueno el detalle es que cuando precione el links (lnkmes1, lnkmes2, lnkmes3) se ejecuta todo pero se queda procesando y no actualiza el calendario alguna idea

    Saludos y gracias

     

    lunes, 29 de agosto de 2011 3:30