使用AJAX导航离开页面的确认窗口

我有一个关于从当前正在处理的页面导航离开的问题。因此，我的总体结构是这样的，使用AJAX导航离开页面的确认窗口

我有一个主网页componentmanagement.php具有与功能，如装载机，

<li> 
          <a onclick="component('MONITOR')" style="cursor: pointer;"> 
           <i class="fa fa-exchange"></i> <span>Component Monitor</span> 
          </a> 
         </li> 
         <li> 
          <a onclick="component('LIST')" style="cursor: pointer;"> 
           <i class="fa fa-power-off" style="color: #D90005;"></i> <span>List Component</span> 
          </a> 
         </li> 

      <aside class="right-side"> 
       <!-- Content Header (Page header) --> 

       <!-- Main content --> 
       <section class="content" id="maincontent"></section><!-- /.content --> 

      </aside><!-- /.right-side -->

和装载功能是这样的，

function component(param) { 
            var job = $("#job").val(); 
            var subjob = $("#subjob").val(); 
            switch (param) { 
             case "MONITOR": 
              $.ajax({ 
               type: 'POST', 
               url: "divpages/monitorcomponent.php", 
               beforeSend: function (xhr) { 
                $('#maincontent').html(); 
               }, 
               success: function (response, textStatus, jqXHR) { 
                $('#maincontent').html(response); 
               } 
              }); 
              break; // END OF CASE 

             case "LIST": 
              $.ajax({ 
               type: 'POST', 
               url: "divpages/listcomponent.php", 
               data: {job:job, subjob:subjob}, 
               beforeSend: function (xhr) { 
                $('#maincontent').html(); 
               }, 
               success: function (response, textStatus, jqXHR) { 
                $('#maincontent').html(response); 
               } 
              }); 
              break; // END OF CASE }}

我的问题是如何在离开页面之前实现确认这种结构。我可以编程它，如果即时通讯使用href。请帮我解决这个问题。可以说我现在在MONITOR上，但是当用户不小心点击了注销或者点击关闭浏览器时，确认应该会出现..

在此先感谢您的帮助。

来源

2015-10-12 Konz Mama

的[如何显示“您确定要离开这个页面了吗？”可能的复制当提交更改？]（http://stackoverflow.com/questions/1119289/how-to-show-the-are-you-sure-you-want-to-navigate-away-from-this-page-when- ch） – Kesavan

所以基本上你想知道如何用你的ajax驱动的网页做到这一点？这很简单，只需在事件处理程序中添加一个“confirm（）”即可。 – adeneo

谢谢@adeneo。你可以把它作为答案发布，所以我可以接受它作为答案？ –

由于您的网站似乎是AJAX驱动，该页面是不是真的卸载，因此正onunload将无法正常工作，您需要手动弹出一个确认对话框，询问用户是否他/她想离开等

喜欢的东西

function component(param) { 
    if (confirm("Are you sure you want to leave this magnificent page ?")) { 
     var job = $("#job").val(); 
     var subjob = $("#subjob").val(); 
     switch (param) { 
      case "MONITOR": 
       $.ajax({ 
        type: 'POST', 
        url: "divpages/monitorcomponent.php", 
        beforeSend: function (xhr) { 
         $('#maincontent').html(); 
        }, 
        success: function (response, textStatus, jqXHR) { 
         $('#maincontent').html(response); 
        } 
       }); 
       break; // END OF CASE 

      case "LIST": 
       $.ajax({ 
        type: 'POST', 
        url: "divpages/listcomponent.php", 
        data: { 
         job: job, 
         subjob: subjob 
        }, 
        beforeSend: function (xhr) { 
         $('#maincontent').html(); 
        }, 
        success: function (response, textStatus, jqXHR) { 
         $('#maincontent').html(response); 
        } 
       }); 
       break; // END OF CASE }} 
     } 
    } 
}

来源

2015-10-12 03:25:39 adeneo

您可以使用window.onbeforeunload事件来实现如下所示。

window.onbeforeunload = function() { 
    return 'You are leaving the page!'; 
};

来源

2015-10-12 02:46:58 Kesavan

尝试了这个，但没有工作，我只是在交换机之前添加你的代码，它不工作，.. –

把它放在你的函数之外来注册它的全局。 – Kesavan

使用AJAX导航离开页面的确认窗口

回答

相关问题