show alert in all pages whenever a button is clicked

Question

This is an basic example of my question.

I have two or more html pages, look like

page1.html

<script src='notify.js'></script>
<h2>Page 1</h2>
<button id='btn' onclick='notify();'>Click</button>

page2.html

<script src='notify.js'></script>
<h2>Page 2</h2>

and so on..

my js file is notify.js

function notify(){
alert("button clicked");
}

In page1.html, there is a button. When I click the button the alert message should show in all pages. How can I achieve this?

In page1.html, the alert message is shown successfully. But I need to show the alert message in all pages, whenever the button (in page1.html) is clicked.

This is like a notification process. I think some one can help me..

no, only one button, it is in page1.html, this is my requirement.. — Deepu Sasidharan, Nov 25 '15 at 07:02
Do you have several pages opened at the same time in different tabs of your browser? — Vincent V., Nov 25 '15 at 07:08
does page2 opens from page1 or do they open completely separately ? if one opens the other you could access the same function by referancing to the opener or by having a reference to the opened page and accessing his JS function from this referance — Mortalus, Nov 25 '15 at 07:09
@VincentV., yes and different users may use the system same time — Deepu Sasidharan, Nov 25 '15 at 07:10
and you want the alert to be displayed for all other users as well ? do you have a server-side ? a DB .. ? — Mortalus, Nov 25 '15 at 07:11
`yes and different users may use the system same time` and you want to notify all users for the action of one user?would this be bad idea? — guradio, Nov 25 '15 at 07:13
@next2u do what server-side script do you use ? do you have a DB ? — Mortalus, Nov 25 '15 at 07:15
@guradio, no I want to notify the admin only(not bother about it), I think the question is clear.. — Deepu Sasidharan, Nov 25 '15 at 07:16
@next2u,any user in any part of the world clicks the button and your Admin will be shown an alert.my understanding correct?my question: suppose the page2.html is already open ,then also the alert should be visible?or only when the Admin opens page2.html? — shreesha, Nov 25 '15 at 07:22
@shreesha, not only the page2, if admin is logged in and in any page, the alert should show(if button is clicked). — Deepu Sasidharan, Nov 25 '15 at 07:26
consider make use of signalr. You have to make use of some kind of push notification system. — lordkain, Nov 25 '15 at 08:02

score 1 · Answer 1 · answered Nov 25 '15 at 07:25

well this task requires you to set up some messaging across your pages. you can use your DB to store these messages and have a read flag attached to them.

so when a button in page1 is clicked you fire an ajax request that writes a new message to a DB table like this..

$.ajax({url: "/addAlertMessageToDB.php", success: function(result){
       alert("message written to DB");
    }});

then in every other page that you want the alert to be shown you should have a JS ajax request that using setInterval looks for any new messages

setInterval(function(){ 

    $.ajax({url: "/getLatestMessage.php", success: function(result){
            alert(result);
        }});


}, 3000);

in the example above you see an ajax request fired every 3 seconds looking for new messages in your DB.

and your server side code should query something like this ..

select id,message,readFlag from messagesTable where readFlag = false

then you should return a result that you need to alert according to the messages in the DB..

score 1 · Answer 2 · answered Nov 25 '15 at 07:59

If you have multiple tabs of your application open in a browser you cannot communicate with them that easy. It wasn't designed with this purpose in mind because tabs in browsers came after JavaScript was invented.

Possible solutions would be:

Send a message to the server via Ajax and in the other instances poll the server every x seconds to see if a message has been sent. The downside is unnecessary network usage and performance for your backend but easy to implement.
Use websockets. It was created for this purpose but it take time to understand the principles and to set it up. But this is currently the best solution for "push" for web applications.

score 0 · Answer 3 · edited May 23 '17 at 11:51

There are different approaches:

Store the message in DB and use Long Polling or Forever Frame.
Ajax call periodically and get it from DB.
Use HTML5 WebSocket.
SignalR (In case of .Net ), it uses the WebSocket transport where available and falls back to older transports where necessary.

Choose the option whatever most applicable to you. Difference between web sockets, long polling, server-sent events and forever frame - click here for details.

score -1 · Answer 4 · answered Nov 25 '15 at 07:13

as you said "notification", This is really process like messaging between pages either on same domain or cross,

If So :- Then you have to think about realtime messaging such as XMPP,websockets,sockets etc the process will be

1 listner as well as 1 publisher on each page

listner will listen to notification and react publisher will broadcast notifications(your button)

show alert in all pages whenever a button is clicked

4 Answers4