2017-04-06 83 views
-2

场景:我正在创建一个事件注册模块,其中用户将从预订日历中选择一个日期,填写一些输入字段并支付预订日期。 其中一个要求是,每个日期只能有一个预订。 这是两个人想要在同一时间预订同一日期的情况。因此,我们需要向稍后预订的用户预订预订日期为的消息。请稍后再回来发送一个Ajax呼叫之前加载/卸载

为了达到这个目的,我在用户选择日期时在数据库中创建一个临时条目。针对该条目,我可以将消息显示给后来的其他用户。

逻辑上,该条目具有如果第一用户将被删除:

  1. 选择一些其它的日期。
  2. 关闭浏览器或从页面导航离开

所以,这将是供谁想要预订同一日期,第二用户。

问题:我可以在用户更改所选日期后删除条目。我无法实现第二个。我写了一个函数,它将删除该行并在未加载jQuery事件前调用该函数。显然,该功能不适用于jQuery。

window.onbeforeunload = function(){ 
    deleteTempEntry(); //This sends an ajax call to delete the entry. Not working. 

    alert("The second alert"); // even this alert doesn't work. 

    // I actually intend to use confirm box to make sure to not to delete the entry if the user does not leave the page. 
    confirm("Your current progress will be removed. Are you sure?"); 

    //Calling this return function shows the warning message but none of the other code works. 
    //return 'Are you sure you want to leave?'; 
}; 

我试过了,绑定/上/纯JS,但没有一个似乎工作。

如解释here,由于安全原因,我无法用onbeforeunload/unload事件做很多事情。 任何解决方法?

谢谢。

+0

怎么样打开一个新窗口?然后在那里显示消息,并且弹出窗口上的卸载应该触发'deleteTempEntry()' –

+0

因此,当用户关闭标签页/浏览器时,前端没有太多可以做的事情。所以你将不得不在后端维护一个超时功能,以便删除不完整的注册。 – MegaMind

回答

0

您可以让客户端每隔30秒钟向服务器发送一次“心跳”,并使用上次发送的心跳的时间戳以及对预订日期的引用更新数据库中的记录。然后运行一个每分钟运行一次的cronjob,它会检查所有这些记录,如果其中一个结束,我们可以说超过120秒,然后删除该记录。

+0

它是有道理的。但我们实际上已经给了一个用户20分钟的时间来完成表单并完成交易。之后,会话将过期。结合这一要求,应用您所建议的方法不幸会造成问题。 –

+0

您可以延长超时时间。这个概率是唯一可靠的解决方案,您需要这个解决方案,因为它是您系统的重要组成部分。 –

1

尝试console.log并返回您的onbeforeunload方法。也许用户在你的ajax通过之前离开页面。

ref:https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload 自2011年5月25日起,HTML5规范规定,在此事件期间,可能会忽略对window.alert(),window.confirm()和window.prompt()方法的调用。有关更多详细信息,请参阅HTML5规范。

+0

我明白这一点。这就是为什么我计划使用确认方法,以确保ajax请求。但是确认(),alertI(),它们不起作用。 –

+0

@Symbolwdd - 我不知道这个,但是,尝试在beforeunload函数中发送ajax,并从ajax的响应返回null。再次,不确定,只是想给出一个想法。因为beforeunload提示会在此方法返回一个值时触发。 –

+0

谢谢你的文档。看起来onbeforeunload不在桌面上了。 在这种情况下,我将不得不转而使用cron作业。 –

1

您可以发布与异步数据:假这样的:

$(window).unload(function() { 
      $.ajax({ 
       type: 'POST', 
       async: false, 
       url: 'your url', 
       data: { } 
      }); 
     }); 
+0

你能解释一下它的工作原理吗? –

+0

同步请求将导致浏览器变得无法响应,直到请求完成。 –

+0

这是一个正在进行的同步调用,所以它会阻止进一步的代码执行,直到请求完成。 –