Question

我试图在用户编辑任何值时显示弹出消息，我想给出弹出提示。我正在关注this网站寻求帮助。只有当我试图移动到其他页面时才会调用它。 ii有一个ajax标签页，我想显示弹出窗口，当一些oe移动到另一个标签页以及离开页面。我试过这个：

我的脚本看起来像这样：

<script type="text/javascript">
function PanelClick(sender, e) {
    ConfirmExit();
}

function ActiveTabChanged(sender, e) {
    ConfirmExit();

}

<script type="text/javascript" language="javascript">
var isDirty = false;
window.onbeforeunload = ConfirmExit;

function InputChanged(control)
   {
      isDirty = true;
   }
function ConfirmExit()
{
   if(isDirty == true){
         return "You have attempted to leave this page. If you have made any changes to the fields without clicking the Save button, your changes will be lost. Are you sure you want to exit this page?";
      }
}

任何形式的帮助或建议都表示赞赏。

我的设计看起来像这样：

<div>
    <ajaxToolkit:TabContainer runat="server" ID="Tabs" Height="150px" OnClientActiveTabChanged="ActiveTabChanged">
        <ajaxToolkit:TabPanel runat="Server" ID="Panel1" HeaderText="Tab One">
            <ContentTemplate>
                <br />PAGE ONE -  Sample HTML Content for Tab
                <asp:TextBox runat="server" ID="txt1"/>
                <asp:TextBox runat="server" ID="TextBox1"/>
            </ContentTemplate>
        </ajaxToolkit:TabPanel>
        <ajaxToolkit:TabPanel runat="Server" ID="Panel2" HeaderText="Tab Two" >
            <ContentTemplate>
                PAGE TWO - Sample HTML Content for Tab
                <asp:TextBox runat="server" ID="TextBox2"/>
                <asp:TextBox runat="server" ID="TextBox3"/>
            </ContentTemplate>
        </ajaxToolkit:TabPanel>

        <ajaxToolkit:TabPanel runat="Server" ID="Panel3" OnClientClick="PanelClick" HeaderText="Tab Three">
            <ContentTemplate>
                <BR /><BR />PAGE THREE - Sample HTML Content for Tab
                <asp:TextBox runat="server" ID="TextBox4"/>
                <asp:TextBox runat="server" ID="TextBox5"/>
            </ContentTemplate>
        </ajaxToolkit:TabPanel>
    </ajaxToolkit:TabContainer>
<br />
</div>

Answer 1

试试这个：

<script>
  var tabs = document.querySelectorAll('.ajax__tab_outer');
  for(var t = 0; t < tabs.length; ++t){ 
    tabs[t].addEventListener('click', ConfirmExit); 
  }
</script>

而不是window.onbeforeunload = ConfirmExit; 使用window.addEventListener('beforeunload', ConfirmExit);

或使用jquery进行跨浏览：

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
  $('.ajax__tab_outer').on('click', ConfirmExit);
  $(window).on('beforeunload', ConfirmExit);
</script>

编辑值然后选项卡更改或离开页面显示消息

1 个答案: