Javascript detect two forms open in the same browser

Question

Now I'm doing some Laravel project. can we prevent multiple open the same forms in the browser? the case is like this:

• Let say that I open form call "Data form 1". this page is still open
• then, when I open another tab and open the same form "Data Form 1" again

do I able to prevent the second tab for this. Or write a pop-up warning message for close tab action using javascript? maybe on the pop-up warning message when the user press close tab will run this code window.close()

Please help. I don't have any clue about this.

Answer 1

Although I can't understand why you need this.

But if you want to make both tabs to be synced , you have two options:

1- not a good option : write a js script on the client-side to pull/fetch updated data from the server in an interval.

2- better option : use push service, so if any data changed, the server will push updated data to all open channels. this way is kinda tricky and hard to implement because you have to handle a lot to make sure you push updated data to the right token-id.

And if you want to prevent opening the same tab. you have to write js script, so on opening the tab, it asks the server if it's okay to be opened, and after that ping the server every 3 seconds to lock the page for 5 seconds. So if the second tab tries and asks the server if it's okay, the server rejects the request and you can close the tab by javascript. if the user closes the first tab, after a maximum of 5seconds user can open another tab and get data from the server.

Answer 2

I can understand why you need this as it's a quite common case, especially if records can be edited by different users, unfortunately, I'm afraid that you cannot do it with simple JS. Instead, you should create a DB table for storing states ie locked_records :

It's important to understand that one record may be edited by many users and/or by one user but using a quite different devices in the same time.

SQL

CREATE TABLE `locked_records` (
 `uid` int(10) unsigned NOT NULL AUTO_INCREMENT,
 `tstamp` int(10) unsigned NOT NULL DEFAULT '0',
 `userid` int(10) unsigned NOT NULL DEFAULT '0',
 `username` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT '',
 `record_table` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT '',
 `record_uid` int(11) NOT NULL DEFAULT '0',
 PRIMARY KEY (`uid`),
 KEY `event` (`userid`,`tstamp`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci

So when the user starts editing the record, you can insert a row to your locked_records with the current timestamp, table name, record uid and user's id and name.

Next, when somebody will try to edit it again you need to check if the record is locked in DB and show some warning like:

User X started editing this post at 12:14PM

And when user X finally saves the form you just remove the lock record.

Note that disabling editing of locked record may be tricky, ie when someone will open record and will go to eat dinner. In such case, you should handle it by giving the user link to manual unlocking the record (after clicking it, you just remove lock record), or just display the info:

Contact with admin and ask him to unlock record Y

Of course, you may use some AJAX to check in background to check if record is still locked with some time interval (similar like StackOverflow checks for post and comments updates)