UpdatePanelをJavaScriptから擬似的なボタンクリックで呼び出す時
ASP.NET AJAXのUpdatePanelを使っていて。
UpdatePanelの更新を、JavaScriptから擬似的なボタンクリックで呼び出そうとしてこんなコードを書いたわけですが(´Д`)
<%@ Page Language="C#" AutoEventWireup="true" %> <!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> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <script runat="server"> protected void OnBtnUpdateClick(object sender, EventArgs e) { this.lblTime.Text = DateTime.Now.ToString(); } </script> <script> function updatePanel() { var button = $get("btnUpdate"); button.click(); } </script> <asp:Button ID="btnUpdate" runat="server" Text="UpdatePanel更新" OnClick="OnBtnUpdateClick" /><br /> <asp:Button ID="btnUpdate2" runat="server" Text="間接的に更新1" OnClientClick="updatePanel(); return false;" /><br /> <a href="javascript:updatePanel();">間接的に更新2</a><br /> <asp:UpdatePanel ID="mpeUpdatePanel" runat="server"> <ContentTemplate> <asp:Label ID="lblTime" runat="server" Text=""></asp:Label><br /> </div> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="btnUpdate" EventName="Click" /> </Triggers> </asp:UpdatePanel> </form> </body> </html>
[UpdatePanel更新]ボタンを、UpdatePanel更新のトリガーとして設定して。
[間接的に更新1]ボタン及び[間接的に更新2]のリンクをクリックすると、JavaScriptのupdatePanel()内から[UpdatePanel更新]ボタンのクリックを疑似ることによりUpdatePanelを更新しようとしているわけですが。
これ、IEでは良いんですが、FirefoxだとUpdatePanel内だけでなく、画面全体のリロードが発生してしまいました(´Д`;)
で、Firefoxの場合はbutton.dispatchEvent()してやれば良いようなので、こんな風に修正しまスタ。
function updatePanel() { var button = $get("btnUpdate"); if ( document.createEvent ) { // Firefox var e = document.createEvent("MouseEvents"); e.initEvent("click", true, true); button.dispatchEvent(e); } else { // IE button.click(); } }
にJavaScriptで処理した値を仕込んでからUpdatePanelの更新というのをやりたかったのですよ(´ω`)