编辑值，然后选项卡更改或留下页面显示消息

Edit value then tab change or leave page show message

本文关键字：消息 显示 然后 选项 编辑      更新时间：2023-09-26

我试图显示弹出消息时，用户编辑任何值，我想给弹出提示。我跟随这个网站的帮助。它只在我试图移动到另一个页面时调用。我有ajax标签页，我想显示弹出时，一些人移动到另一个标签以及离开页面。我试过了:

我的脚本是这样的:

<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>

试试这个:

<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>
相关文章：