0

I'm trying to achieve sth like a facebook notifications '(1)' in the tab title. Below is a simplified code of my future's site message box - what I want to do is to use AJAX to check if the new message was added (new tr), but without refreshing the site, and then show expected number in tab title. Here is my code so far - but I have to refresh the site after adding a new table row...

<body>
    <div id="container">
        <div id="tab">
            <table id="tabl">
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Message</th>
                </tr>
                <tr>
                    <td>1</td>
                    <td>John</td>
                    <td>Hey! What's up!</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Kylie</td>
                    <td>Are you there Kylie?</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Peter</td>
                    <td>Please, buy me a milk</td>
                </tr>                    
            </table>
        </div>
    </div>
    <script>
        var count = document.getElementById('tabl').rows.length - 1;
        var x = new XMLHttpRequest();
        var i = 0;
        x.onreadystatechange = function() {
            if (x.readyState == 4 && x.status == 200) {
                document.title = '(' + count + ')' + ' ' + document.title;
            }
        };
        x.open('GET', 'http://localhost/php13/notif.php', true);
        x.send();
    </script>
</body>

How to achieve that without refreshing the site ?

Piter
  • 61
  • 1
  • 1
  • 8

4 Answers4

1

This is because for all practical purposes the count variable has a static value that is determined even before document load event or any AJAX calls happen. Your AJAX function does nothing to change the value of count, so every time that AJAX executes, you will set the document.title value to the same static value, with an ever-increasing number of count strong segments being added.

So let's say count is 4 on initial page load (as it would be in your example) and initial document.title value is Test here is how document.title value will change with each AJAX execution:

onload - Test
1st - (4) Test
2nd - (4) (4) Test
3rd - (4) (4) (4) Test
etc.

As you can see, your logic here is all wrong.

Mike Brant
  • 70,514
  • 10
  • 99
  • 103
  • so how would you achieve that so 'count' wont be static ? – Piter Aug 02 '16 at 19:55
  • @Piter Depends on how the AJAX result comes back. Youquestion says nothing about what you intendto happen in AJAX success handler. Is it supposed to update table to a (potentially) different number of rows? Does the AJAX response provide HTML DOM elements for insertion (in which case you may need to recount as you do at first) or does it provide a JSON or similar data structure that you need to use to update the DOM (in which case you might be able to derive the count from an array length or similar)? – Mike Brant Aug 02 '16 at 20:00
1

What back-end do you use? php? asp? node.js?

Anyway, I'm asuming someone actually types and sends that message, the absolutely best way to handle such a feature, is to execute it while the message is being sent. you must already know the recipient('s) of the message, so when it gets send, tell the recipient('s) to update their notifications.

I know you listed ajax, But using websockets is probably the best tech to achieve this, you don't need any constant loops to check the server for updates or any ajax polling, the server can simply just emit a message to the recipient without him having to do anything client-side, that a new message has been recieved.

user2267175
  • 595
  • 5
  • 14
0

You will need to implement one of the technologies which would allow you to send messages from server to client (browser).

It might be Websockets, Server Sent Events or something else.

Before you make a decision which technology to use you would need to think which legacy browser you want to support and check if this technology is supported. You could check it on caniuse.com.

You could also use a library like socket.io that would try to use newer technology (like Websockets) and if it's not supported by browser would fallback to the older solution.

If you write more about your backend it would be possible to give you more precise answer.

Krzysztof Atłasik
  • 21,985
  • 6
  • 54
  • 76
-2

well easiest way is to use setinterval()

<script>
setInterval(function(){ 
        var count = document.getElementById('tabl').rows.length - 1;
        var x = new XMLHttpRequest();
        var i = 0;
        x.onreadystatechange = function() {
            if (x.readyState == 4 && x.status == 200) {
                document.title = '(' + count + ')' + ' ' + document.title;
            }
        };
        x.open('GET', 'http://localhost/php13/notif.php', true);
        x.send();
}, 1000);
    </script>

It's gonna check for new messages every 1 second

Tsotne Kekelia
  • 97
  • 8