GridPanelでDivを選択して

Question

JavaScriptでうまくいきません。私はフォーム上に更新パネルを持っています。この更新パネルで私はグリッドビューを持っています。選択ボタンをクリックすると、Panel1がテーブルの上に表示され、左隅がクリックされた位置に配置されます。

私はマウスが2つの隠されたフィールド座標に保存したJavaScript関数書いた：

function getMouseXY(event) 
{ 
    var hiddenFieldX=$get('<%=mouseX.ClientID%>'); 
    var hiddenFieldY=$get('<%=mouseY.ClientID%>'); 

    if (navigator.appName=="Microsoft Internet Explorer") 
    { 
     hiddenFieldX.value = event.clientX + document.body.scrollLeft 
     hiddenFieldY.value = event.clientY + document.body.scrollTop 
    } 
    else 
    { 
     hiddenFieldX.value=event.pageY 
     hiddenFieldY.value=event.pageX 
    } 
} 

した後に、私は、サーバー側に私のパネル1であるのTextBox1を完了する必要があります。私はどこでPanel1を配置できますか？パネルの座標を設定する関数があります。

function showDetails() 
{ 
    var hiddenFieldX=$get('<%=mouseX.ClientID%>'); 
    var hiddenFieldY=$get('<%=mouseY.ClientID%>'); 

    var elem=$get("details") ; 
    elem.style.left = hiddenFieldX.value+"px" 
    elem.style.top = hiddenFieldY.value+"px" 
} 

しかし、いつ呼び出すべきかわかりません。

<asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
     <ContentTemplate> 
     <asp:HiddenField ID="showDetails" Value="false" runat="server" /> 
     <asp:HiddenField ID="mouseX" Value="0" runat="server" /> 
     <asp:HiddenField ID="mouseY" Value="0" runat="server" /> 


     <asp:Panel ID="Panel1" runat="server" style="border-color:Blue; border-style:double; border-width:thick; width : 200px; height:200px; position:absolute ; top:100px ; left: 100px; z-index:0" Visible="false"> 
      <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> 
     </asp:Panel> 
     <asp:SqlDataSource ID="EnvoxDataSource" runat="server" </asp:SqlDataSource> 
     <asp:GridView ID="gvRecherche" runat="server" AllowPaging="True" PageSize="30" Caption="Résultats" AllowSorting="True" CssClass="tableSeparator" 
AutoGenerateColumns="False" DataSourceID="EnvoxDataSource" 
OnSelectedIndexChanged="gvRecherche_SelectedIndexChanged" 
onclick="getMouseXY(event)" > 
      <PagerStyle BorderStyle="None"/> 
      <HeaderStyle CssClass="tableSeparator" HorizontalAlign="Left" /> 
      <AlternatingRowStyle CssClass="colorBlanc" /> 
      <RowStyle CssClass="colorGris" /> 
      <SelectedRowStyle BackColor="#FFCC66" Font-Bold="true" ForeColor="#659bed" /> 
      <Columns> 
       <asp:CommandField InsertVisible="False" SelectImageUrl="~/App_Themes/Standard/images/selectbtn20X20.PNG" SelectText="Select" ShowCancelButton="False" ShowSelectButton="True" ButtonType="Image" /> 
       <asp:BoundField DataField="ContactID" HeaderText="ContactID" ReadOnly="True" SortExpression="ContactID"/> 
       <asp:BoundField DataField="TimeInIVR" HeaderText="TimeInIVR" ReadOnly="True" SortExpression="TimeInIVR" /> 
       <asp:BoundField DataField="TQ" HeaderText="TQ" ReadOnly="True" SortExpression="TQ"/> 
      </Columns> 
      <EmptyDataTemplate> 
       <div class="message">Aucun résultat pour ces critères</div> 
      </EmptyDataTemplate> 
      <PagerSettings Mode="NumericFirstLast" Position="TopAndBottom"   LastPageText="&gt;&gt;" FirstPageText="&lt;&lt;" /> 
    </asp:GridView> 
    <br /> 
    <asp:Button ID="btnImprime" runat="server" Text="Version Imprimable" Visible="False" CssClass="bouton" PostBackUrl="<%# GetEnvoxPrintUrl() %>" target="_blanc" />    
    &nbsp;&nbsp;&nbsp; 
    <script language="javascript" type="text/javascript">showDetails()</script> 
</ContentTemplate> 
</asp:UpdatePanel> 

おかげ

Answer 1

はこれを試してみてください。私はgvボタンをクリックすると、部分的なポストバックが発生し、以下のjavascriptで傍受される可能性があると考えます。

<script type="text/javascript" language="javascript"> 
    Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler); 
    function BeginRequestHandler(sender, args) 
    { 
     showDetails(); // Your javascript 
    } 
</script>