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

Question

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

Answer 1

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

Answer 2

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!