darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-02-05 19:03:30 -05:00
Code Issues Packages Projects Releases Wiki Activity
Files
8f8cdabfffaca679ea030aa8beb2a6269fa30869
notifications-admin/app/assets/javascripts/updateContent.js

44 lines
1013 B
JavaScript
Raw Normal View History

Make job page poll for updates This is a first go at having the job page update without refreshing. The approach I’ve taken is to do all the rendering of HTML on the server side, rather than use a Javascipt templating engine like mustache. This ensures that we don’t have to maintain two sets of templates. So the approach is to split the job page into partials. These partials can then: - be included in the job page to render the whole page - be rendered indivudually and then returned as a blob of HTML inside a JSON response Then I’ve added a Javascript module which looks for areas of the page that should be reloaded. For each area of the page it will poll a URL and re-render that section of the page when it gets new HTML. It implements some throttling so that API calls will never happen more frequently than 0.67 times/second.
2016-03-02 17:36:20 +00:00
(function(GOVUK, Modules) {
"use strict";
GOVUK.timeCache = {};
GOVUK.resultCache = {};
Allow custom interval on AJAX sections of page Some pages with AJAX should update quickly, because the data is likely to be changing quickly, and be finished changing sooner. Other pages we want to have tick over a bit slower. This commit adds an optional ‘interval’ parameter to the updateContent modules, which sets how often the page should ping the server for an update. It then sets the interval for the dashboard page to be 10 seconds, rather than the default 1.5 seconds.
2016-03-23 08:54:48 +00:00
let getter = function(resource, interval, render) {
Make job page poll for updates This is a first go at having the job page update without refreshing. The approach I’ve taken is to do all the rendering of HTML on the server side, rather than use a Javascipt templating engine like mustache. This ensures that we don’t have to maintain two sets of templates. So the approach is to split the job page into partials. These partials can then: - be included in the job page to render the whole page - be rendered indivudually and then returned as a blob of HTML inside a JSON response Then I’ve added a Javascript module which looks for areas of the page that should be reloaded. For each area of the page it will poll a URL and re-render that section of the page when it gets new HTML. It implements some throttling so that API calls will never happen more frequently than 0.67 times/second.
2016-03-02 17:36:20 +00:00
if (
GOVUK.resultCache[resource] &&
(Date.now() < GOVUK.timeCache[resource])
) {
render(GOVUK.resultCache[resource]);
} else {
GOVUK.timeCache[resource] = Date.now() + interval;
$.get(
resource,
response => render(GOVUK.resultCache[resource] = response)
);
}
};
Allow custom interval on AJAX sections of page Some pages with AJAX should update quickly, because the data is likely to be changing quickly, and be finished changing sooner. Other pages we want to have tick over a bit slower. This commit adds an optional ‘interval’ parameter to the updateContent modules, which sets how often the page should ping the server for an update. It then sets the interval for the dashboard page to be 10 seconds, rather than the default 1.5 seconds.
2016-03-23 08:54:48 +00:00
let poller = (resource, key, component, interval) => () => getter(
resource, interval, response => component.html(response[key])
Make job page poll for updates This is a first go at having the job page update without refreshing. The approach I’ve taken is to do all the rendering of HTML on the server side, rather than use a Javascipt templating engine like mustache. This ensures that we don’t have to maintain two sets of templates. So the approach is to split the job page into partials. These partials can then: - be included in the job page to render the whole page - be rendered indivudually and then returned as a blob of HTML inside a JSON response Then I’ve added a Javascript module which looks for areas of the page that should be reloaded. For each area of the page it will poll a URL and re-render that section of the page when it gets new HTML. It implements some throttling so that API calls will never happen more frequently than 0.67 times/second.
2016-03-02 17:36:20 +00:00
);
Modules.UpdateContent = function() {
this.start = function(component) {
const $component = $(component);
Allow custom interval on AJAX sections of page Some pages with AJAX should update quickly, because the data is likely to be changing quickly, and be finished changing sooner. Other pages we want to have tick over a bit slower. This commit adds an optional ‘interval’ parameter to the updateContent modules, which sets how often the page should ping the server for an update. It then sets the interval for the dashboard page to be 10 seconds, rather than the default 1.5 seconds.
2016-03-23 08:54:48 +00:00
interval = ($(component).data("interval-seconds") * 1000) || 1500;
Make job page poll for updates This is a first go at having the job page update without refreshing. The approach I’ve taken is to do all the rendering of HTML on the server side, rather than use a Javascipt templating engine like mustache. This ensures that we don’t have to maintain two sets of templates. So the approach is to split the job page into partials. These partials can then: - be included in the job page to render the whole page - be rendered indivudually and then returned as a blob of HTML inside a JSON response Then I’ve added a Javascript module which looks for areas of the page that should be reloaded. For each area of the page it will poll a URL and re-render that section of the page when it gets new HTML. It implements some throttling so that API calls will never happen more frequently than 0.67 times/second.
2016-03-02 17:36:20 +00:00
setInterval(
Allow custom interval on AJAX sections of page Some pages with AJAX should update quickly, because the data is likely to be changing quickly, and be finished changing sooner. Other pages we want to have tick over a bit slower. This commit adds an optional ‘interval’ parameter to the updateContent modules, which sets how often the page should ping the server for an update. It then sets the interval for the dashboard page to be 10 seconds, rather than the default 1.5 seconds.
2016-03-23 08:54:48 +00:00
poller($component.data('resource'), $component.data('key'), $component, interval),
Make job page poll for updates This is a first go at having the job page update without refreshing. The approach I’ve taken is to do all the rendering of HTML on the server side, rather than use a Javascipt templating engine like mustache. This ensures that we don’t have to maintain two sets of templates. So the approach is to split the job page into partials. These partials can then: - be included in the job page to render the whole page - be rendered indivudually and then returned as a blob of HTML inside a JSON response Then I’ve added a Javascript module which looks for areas of the page that should be reloaded. For each area of the page it will poll a URL and re-render that section of the page when it gets new HTML. It implements some throttling so that API calls will never happen more frequently than 0.67 times/second.
2016-03-02 17:36:20 +00:00
interval / 5
);
};
};
})(window.GOVUK, window.GOVUK.Modules);
Reference in New Issue Copy Permalink