1

what i have: page title is updating dynamically when new data is retrieving from ajax call; if tab with this page is visited - title is set to default value; if i open the second tab with this page, title of this tab is set to default (i must fix this)

what i need: page title must be the same for all tabs with this page. i mean, page title must be updated synchronously for all tabs.

My current implementation:

var prevData;
var newRequestsCounter = 0
var getRequests = function(){
          $.ajax({
              async: true,
              type: "GET",
              url: "/get_requests/",
              success: function(data){
                  // retrieve and parse data. i skip this part
                  // newRequestsCounter is updating here
                  var visible = vis();
                  if (visible){
                      newRequestsCounter = 0
                      document.title = 'Default title'
                  } else {
                     if (newRequestsCounter == 0) {
                         document.title = 'Default title'
                     } else {
                         document.title =  'Dynamic title'
                     }
                  }

                  setTimeout(getRequests, 2000)
              }
          });
};

I tried with intercom.js, but it doesn't work properly. For some reason intercom.on gets different data each time. For example: first call - default title, second call - dynamic title. I checked with debug, wrong data comes after executing this line setTimeout(getRequests, 2000).

var intercom = Intercom.getInstance();

intercom.on('notice', function(data) {
    document.title = data.title;
});
var prevData;
var newRequestsCounter = 0
var getRequests = function(){
          $.ajax({
              async: true,
              type: "GET",
              url: "/get_requests/",
              success: function(data){
                  // retrieve and parse data. i skip this part
                  // newRequestsCounter is updating here
                  var visible = vis();
                  if (visible){
                      newRequestsCounter = 0
                      intercom.emit('notice', {title: 'Default title'});
                  } else {
                     if (newRequestsCounter == 0) {
                         intercom.emit('notice', {title: 'Default title'});
                     } else {
                         intercom.emit('notice', {title: 'Dynamic title'});
                     }
                  }

                  setTimeout(getRequests, 2000)
              }
          });
};

In general, i don't quite understand if it possible to achieve required functionality in scope of single ajax callback. I tried the next code. In this case variable "counter" from localStorage is incremented every time i open new tab. It means if i expect "3" in title for two tabs, i get "6" with two tabs instead.

var intercom = Intercom.getInstance();

intercom.on('notice', function(data) {
    document.title = data.title;
});

if (localStorage.getItem("counter") === null){
    localStorage.setItem("counter", 0);
}
var getRequests = function(){
          $.ajax({
              async: true,
              type: "GET",
              url: "/get_requests/",
              success: function(data){
                  // skip part with retrieving and parsing data

                        var counter = localStorage.getItem("counter")
                        localStorage.setItem("counter", ++counter);
                  var visible = vis(); 
                  if (visible){
                      localStorage.setItem("counter", 0);
                      intercom.emit('notice', {title: 'Default'});
                  } else {
                     if (localStorage.getItem("counter") == 0 || localStorage.getItem("counter") === null) {
                         intercom.emit('notice', {title: 'Default'});
                     } else {
                         intercom.emit('notice', {title: '(' + localStorage.getItem("counter") + ') requests'});
                     }
                  }
                  setTimeout(getRequests, 2000)
              }
          });
};
getRequests();
ivan_ochc
  • 392
  • 5
  • 22

2 Answers2

0

The part I am not understanding in your code is where you are opening a new browser tab. But, if that happening somewhere and you want to set the title of that new tab as its opening you can do this:

var newTab = window.open('/page')
newTab.title = 'New Title';
Rob
  • 11,185
  • 10
  • 36
  • 54
  • User is opening a new browser tab, not JS. – ivan_ochc Oct 19 '16 at 14:19
  • If thats the case set a cookie document.cookie="UseTitle=MyTitle" all pages within the domain can read regardless of tab – Rob Oct 19 '16 at 14:27
  • i'm not shure where should I set cookie, read cookie and assign cookie value to page titles for all tabs? I can read required cookie, but how can i set value of this cookie to titles of open tabs? – ivan_ochc Oct 19 '16 at 14:42
  • What you can do is add a little snippet of code in the head of your page to check the cookie on a interval `setInterval(getCookieFunc,1000)` and if `cookie != document.title` change it. You would set the cookie whenever you want. Maybe in the success callback of ajax request. So then any other tabs open are checking for title changes every second or whatever you set to. – Rob Oct 19 '16 at 18:25
  • I set cookie inside success callback of ajax request and add additional setInterval where i set a new title. But I still got the problem I discribed in my question: if i open several new tabs getCookie each time gets different values, for example first time - default title, second titme - dynamic title. – ivan_ochc Oct 20 '16 at 08:17
  • Sounds to me like you might be running the ajax call whenever a new tab opens? You should only run it if the title is Default I think? – Rob Oct 20 '16 at 15:54
  • Yes, you are right. Script generates a table with data and count new data and set this value to the title. I do it in a single ajax callback. – ivan_ochc Oct 20 '16 at 16:14
  • Add more details to my question. – ivan_ochc Oct 21 '16 at 09:10
0

are you using some kind of long polling? Maybe you can synchronise those polling calls with the browser's time. e.g. poll everytime the browser's time's seconds are even numbers. then each tab should send its request at the same time and get (almost) at the same time an answer to update there title

Woncker
  • 151
  • 6
  • Just simple polling. I think the problem is in counting new requests. Script counts them again and again for every new tab. But i don't know how to seperate counting part in script – ivan_ochc Oct 21 '16 at 10:24