none
Jquery UI e função controla Div, porém botão dentro dela vai para top=10 - problema com updatepanel? ou outro? RRS feed

  • Pergunta

  • Pessoal estou usando uma função Jquery que manipula uma Div a partir de um input bt1, e dentro desse tipo tenho um outro botão:  btpesq com top=10px; quando clico no input bt1 pra executar a função jquery, consigo diminuir o Div, porém parece que é como se o btpesq deixase de pertencer a Div, e ao invés de continuar onde estava, dentro da Div (que é a referência dele) com top =10px, ele vai para o top=10 geral da página, vai lá pro topo mesmo, em termos de código, vejam:


    <script type="text/javascript">    $(document).ready(function () { $("#move1").draggable(); $("#boton1").toggle(function () { $("#move1").animate({ height: 368, width: 1090, marginTop: 806 }, 100, "linear").attr("style", "; float:left;cursor:pointer"); }, function () { $("#move1").animate({ height: 50, width: 200, marginTop: 806 }, 100, "linear").attr("style", "; top:0; left:0;cursor:default"); }); });</script>



    e tenho um div que é manipulado pelo javascript acima, através do input mencionado, e dentro desse Div tenho um update panel e dentro deste tenho o gridview que é ativado pelo btpesq :

     <div id="move1" runat="server"
                style="width:1090px; height:25px; overflow: auto; ; left: 13px; top: 806px; border: 2px solid Black;"><input type="button" id="boton1" runat="server" value="click1" />
            &nbsp;<asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                        <asp:GridView ID="GV" runat="server"
                 style="z-index: 1; left: 30px; top: 43px; ; height: 133px;"   
                 BorderColor="LightBlue" Font-Size="Smaller"  BorderStyle="Solid"
           BorderWidth="1px" CellPadding="1"  CellSpacing="1"
                  AutoGenerateColumns="False" OnRowDataBound="GV_RowDataBound" >

            <HeaderStyle BackColor="LightBlue" />
            <Columns>

            <asp:BoundField DataField="codprop"  HeaderText="Proprio" ItemStyle-Width="90px"><ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" /></asp:BoundField>
            <asp:BoundField HeaderText="Tipo" DataField="tipo" />
            <asp:BoundField HeaderText="Nome" DataField="nome" />
            <asp:BoundField DataField="obs"  HeaderText="Observações" ItemStyle-Width="15px"><ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" /></asp:BoundField>
            </Columns>
        </asp:GridView>

                <asp:Button ID="btnpesq" runat="server" Text="Pesquisar Lista"
                    onclick="btnpesq_Click"
                    style="z-index: 1; left: 614px; top: 10px; " />

            </ContentTemplate>

        </asp:UpdatePanel>
          
               </div>


    ============================

    Mas quando eu clico no botão id="boton1"  value="click1 que é o input deste div(que está em top: 806px), que ativa o javascript, eu manipulo e diminuo o Div, porém o botáo btpesq uqe está dentro do update panel que está dentro ddeste DIv, este btpesq vai parar no top=10 da página geral, ou seja lá em cima mesmo, fora do Div que ele está.

    Alguém pode me ajudar com isso?

    obrigado


    sexta-feira, 11 de janeiro de 2013 14:54

Todas as Respostas

  • Tentando explicar de uma maneira bem simples, este problema acontece devida a execução do ajax (UpdatePanel), pois ele não entra no $(document).ready() pois não cria a página inteira, apenas onde foi solicitado.

    Você pode resolver isso de duas formas. A primeira é chamando explicitamente o método javascript que você quer executar em cada load da página.

    Algo do tipo:

    No código:
    ScriptManager.RegisterClientScriptBlock(page, typeof(Page), Guid.NewGuid().ToString(), "$(document).ready(iniciaJquery);", true);
    Na aspx:
    function iniciaJquery()
    {
       $("#move1").draggable();
    }
    Mas a melhor forma que lhe aconselho resolver é utilizando uma bilioteca javascript que resolve este problema. Ela pode ser encontrada aqui (http://updatepanelplugin.codeplex.com/) em conjunto com exemplos de sua utilização.

    Thiago Dorneles


    terça-feira, 15 de janeiro de 2013 17:59
  • Prezado Thiago, obrigado. Testei aqui e continuou com o mesmo problema, a não ser que eu tenha feito algo errado. usei inclusive o plugin e refiz essa funcionalidade do codigo demo de exemplo desse update plugin. vou postar aqui, caso queira tentar aí e conferir se é um erro da ferramenta, ou que deixei algo passar batido mesmo.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="jpagerequest._Default" %>
    
    <!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">
    
    
    
        <style  type="text/css"> 
        #listHolder{;border:0; } 
        .list{font-family:verdana;font-size:10;color:#000000;}
        
        
           #move1{
              cursor:move;
              ;
            
            
              width:300px;
            height:300px;
            border:1px solid Black;
            }
          #move2{
              cursor:move;
              ;
            
            
              width:300px;
            height:300px;
            border:1px;
            }
            #boton1{
                clear:both;
            }
            #boton2{
                clear:both;
            } 
        
        
     </style>
    
        <title></title>
    
            
    
            <script src="../Scripts/jquery-1.8.0.min.js" type="text/javascript"></script>
            <script src="../Scripts/jquery-ui-1.9.2.custom.min.js" type="text/javascript"></script>
        <script src="../Scripts/jquery.updatepanel.js" type="text/javascript"></script>
    
    <script type="text/javascript">    $(document).ready(function () { $("#move1").draggable(); $("#boton1").toggle(function () { $("#move1").animate({ height: 25, width: 200, marginlinear").attr("style", "; float:left;cursor:pointer"); }, function () { $("#move1").animate({ height: 368, width: 1090, marginlinear").attr("style", ";  cursor:default"); }); });</script>
        
    
     <script type="text/javascript">   function iniciaJquery()
    {
       $("#move1").draggable();
    }</script>
    
    </head>
    <body>
        <form id="form1" runat="server">
        
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        
        <div>
            <asp:UpdatePanel ID="UpdatePanel123" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <asp:Button ID="Button1" runat="server" Text="Button1" /><br />
                    <asp:Label ID="Label1" runat="server" Text="Label1"></asp:Label>
                </ContentTemplate>
            </asp:UpdatePanel>
            
            <asp:UpdatePanel ID="UpdatePanel234" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <asp:Button ID="Button2" runat="server" Text="Button1" /><br />
                    <asp:Label ID="Label2" runat="server" Text="Label2"></asp:Label>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    
             <div id="move1" runat="server" 
            style="width:1090px; height:368px;  ;   border: 2px solid Black;"><input type="button" id="boton1" runat="server" value="-" />
                
           <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
    
                <asp:Button ID="btnTeste" runat="server" Text="Testando" 
                    style="   " />
    
            <asp:GridView ID="GV" runat="server" 
                 style="   ; height: 133px;"   
                 BorderColor="LightBlue" Font-Size="Smaller"  BorderStyle="Solid" 
           BorderWidth="1px" CellPadding="1"  CellSpacing="1" 
                  AutoGenerateColumns="False" >
    
            <HeaderStyle BackColor="LightBlue" />
            <Columns>
    
            <asp:BoundField DataField="cod"  HeaderText="Proprio" ItemStyle-Width="90px"><ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" /></asp:BoundField>
            <asp:BoundField HeaderText="Ti" DataField="tipo" />
            <asp:BoundField HeaderText="No" DataField="nome" />
            <asp:BoundField DataField="obs"  HeaderText="Observações" ItemStyle-Width="15px"><ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" /></asp:BoundField>
            </Columns>
        </asp:GridView>
            </ContentTemplate>
    
        </asp:UpdatePanel>
          
               </div>
    
    
        </form>
    </body>
    </html>

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace jpagerequest
    {
        public partial class _Default : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                ScriptManager.RegisterClientScriptBlock(this, typeof(Page), Guid.NewGuid().ToString(), "$(document).ready(iniciaJquery);", true);
    
            }
        }
    }

    Desde já agradeço!



    • Editado Angelo.Net sexta-feira, 18 de janeiro de 2013 17:38
    sexta-feira, 18 de janeiro de 2013 17:31