I'm trying to get notification click events from notifications in Chrome (Windows 10). When the service activates, it will automatically show a notification message with two buttons on it. Clicking either button should cause the notification click handler to fire, but it doesn't.
Here's a simple example.
CLIENT.JS:
self.addEventListener('install', function (event) {
console.log(">>> installing client service worker");
self.skipWaiting();
});
self.addEventListener('activate', function (event) {
console.log('>>> client service activated');
showNotificationMessage("xxx", "yyy", "123");
});
self.addEventListener('notificationclick', function (event) {
console.log('>>> On notification click: ', event.notification.tag);
});
function showNotificationMessage(messageTitle, bodyMessage, data) {
registration.showNotification(messageTitle, {
actions: [{ action: "a", title: "action a" }, { action: "b", title: "action b", }],
body: bodyMessage,
requireInteraction: true,
renotify: true,
tag: 'test',
data: data
}).then(console.log('>>> notification was successful')).catch(function (error) {
console.log(">>> showNotification error: " + error);
});
}
CLIENT.HTML
<!DOCTYPE html>
<html>
<head>
<script>
if ('serviceWorker' in navigator) {
// Register service worker
navigator.serviceWorker.register('Client.js').then(function (reg) {
console.log("SW registration succeeded. Scope is " + reg.scope);
}).catch(function (err) {
console.error("SW registration failed with error " + err);
});
}
</script>
</head>
<body>
When this page loads, a notification should be displayed from the service worker. Clicking the action buttons should cause a notification click event in the service worker, but it doesn't.
</body>
</html>
Related
I have fullcalendar calendar that does not show unless I use turbolinks. But I would like not to use turbolink. Is there another way of loading the calendar.
My calendar.js looks like:
var initialize_calendar;
initialize_calendar = function() {
$('.calendar').each(function(){
var calendar = $(this);
calendar.fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
lang: "en",
selectable: true,
selectHelper: true,
editable: true,
eventLimit: true,
events: '/events.json',
select: function(start, end) {
$.getScript('/events/new', function() {
$('#event_date_range').val(moment(start).format("MM/DD/YYYY HH:mm") + ' - ' + moment(end).format("MM/DD/YYYY HH:mm"));
date_range_picker();
$('.start_hidden').val(moment(start).format('YYYY-MM-DD HH:mm'));
$('.end_hidden').val(moment(end).format('YYYY-MM-DD HH:mm'));
});
calendar.fullCalendar('unselect');
},
eventDrop: function(event, delta, revertFunc) {
event_data = {
event: {
id: event.id,
start: event.start.format(),
end: event.end.format()
}
};
// noinspection Annotator
$.ajax({
url: event.update_url,
data: event_data,
type: 'PATCH'
});
},
eventClick: function(event, jsEvent, view) {
// noinspection Annotator
$.getScript(event.show_url, function() {
$('#event_date_range').val(moment(event.start).format("MM/DD/YYYY HH:mm") + ' - ' + moment(event.end).format("MM/DD/YYYY HH:mm"));
date_range_picker();
$('.start_hidden').val(moment(event.start).format('YYYY-MM-DD HH:mm'));
$('.end_hidden').val(moment(event.end).format('YYYY-MM-DD HH:mm'));
});
}
});
})
};
(I remove the following at the bottom because i am removing turbolinks from the app: $(document).on('turbolinks:load', initialize_calendar);
)
In my index.html.erb, i have :
<div class="homepage_box_top_dashboard">
<div class='calendar' id="calendar"></div>
</div>
Any help please?
You still need to have something trigger your initialize_calendar() function to fire.
This was getting triggered by TurboLinks. Now you need something else to trigger it.
In plain speak:
$(document).on('turbolinks:load', initialize_calendar);
means: "when the turbolinks:load event fires, call initialize_calendar"
Right now you are just telling the browser that initialize_calendar exists, but you're never turning it on.
You should be able to use this:
// Jquery
$(document).on('ready', initialize_calendar());
-or-
// JQuery shorthand
$(document).ready(initialize_calendar());
which means "when the document:ready event fires, call initialize_calendar"
-or-
// pure Javascript
document.addEventListener('DOMContentLoaded', function() {
initialize_calendar();
});
which means "when the DOMContentLoaded event fires, call initialize_calendar"
You always have to tell JavaScript when to do something. It doesn't have to be when the page loads.
For example, you could assign this action to a button:
$('#initialize_calendar_button').on('click', initialize_calendar);
Hope that helps.
I have checked all the solutions for the same questions. But still can't solve the issue. I'm using visual studio and cordova application.
Added the phonegap-plugin-push and corresponding code has been added. Using the ngCordova $cordovapushV5. Getting PushNotification of undefined error, i've checked in physical device and tried android version 5.1 and 6.2.1.
Added script files in below order.
<script src="scripts/angular.js"></script>
<script src="scripts/ng-cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
app.run(function ($http, $cordovaPushV5) {
var options = {
android: {
senderID: "xxxxxx"
},
ios: {
alert: "true",
badge: "true",
sound: "true"
},
windows: {}
};
// initialize
$cordovaPushV5.initialize(options).then(function () {
// start listening for new notifications
$cordovaPushV5.onNotification();
// start listening for errors
$cordovaPushV5.onError();
// register to get registrationId
$cordovaPushV5.register().then(function (registrationId) {
// save `registrationId` somewhere;
})
});
// triggered every time notification received
$rootScope.$on('$cordovaPushV5:notificationReceived', function (event, data) {
// data.message,
// data.title,
// data.count,
// data.sound,
// data.image,
// data.additionalData
alert(data.message);
});
// triggered every time error occurs
$rootScope.$on('$cordovaPushV5:errorOcurred', function (event, e) {
// e.message
alert(e.message)
});
});
This code has been working fine, but now it's working intermittently in chrome. Does anyone know what might be causing this. If so what can I do to increase stability in chrome
This function opens a pop up modal with the project form react component.
editProject: function(i) {
$('#agency_projects').trigger(
"projects:open",
[this.state.projects[i].showUrl, true]
);
},
getInitialState: function() {
return {
...
/* TODO Refactor to prevent props in initialState */
projectId: this.props.projectId,
projectUrl: this.props.projectUrl,
}
},
The initial state has the project id, and url stored which is used to submit an ajax request to pull in the project.
componentDidMount: function() {
if(this.props.projectUrl) {
$.getJSON(this.state.projectUrl)
.done(function(data) {
if(!this.isMounted()) {
return;
}
this.setState({
title: data.title,
externalUrl: data.externalUrl,
client: data.client,
description: data.description,
content: data.content,
});
}.bind(this))
.fail(function(jqXHR, status, err) {
console.error(jqXHR, status, err);
});
}
},
The form renders as suspected, but the data is only pulled every now and again.
I have a hyper link at the footer of the page which open a form in the jquery Dialog we call it as M1.Than i enter all the information and click on "create " which creates a user. while creating a new user i show small modal( "we call it as M2") saying " Please wait ..some message"
Now my problem is iam not able to display the ("M2")modal saying " Please wait ..some message" while i keeep on creating a new user everytime when i stay on("M1").
first time it is coming ("M1") and next time it doesnot display again .How ever when closing iam destroying and removing the dialog. (It is due to other issue)
here is Code.
<div id="m2" style="visibility:hidden">
<img src="spinningwheel" border="0" align="middle" hspace="20" vspace="5"/> Creating USER...
</div>
$(document).ready(function() {
displaydialog();
});
function displaydialog(){
$('#m2').dialog({
autoOpen: false,
height: 100,
width: 250,
modal: true,
close: function() {
$(this).dialog('destroy');
$(this).remove();
}
});
}
$("#btncreate").click(function (){
$("#m2").removeAttr('style');
displaydialog();
$("#m2").dialog('open');
//get a json request based on data if suceess
if(success){
$("#m2").dialog('close');
}else{
$("#m2").dialog('close');
}
});
#Derby,
$(document).ready(function() {
displaydialog();
});
function displaydialog(){
$('#m2').dialog({
autoOpen: false,
height: 100,
width: 250,
modal: true,
/* close: function() { // No need to Destroy the dialog
$(this).dialog('destroy');
$(this).remove();
}*/
});
}
$("#btncreate").click(function (){
// $("#m2").removeAttr('style');
// displaydialog();
$("#m2").dialog('open');
//get a json request based on data if suceess
// if you are using ajax post, try to close this box as part of response handler ( success/error).
jQuery.ajax({
data : {somekey : somevalue},
datatype: 'json',
error : function(jqXHR, textStatus, errorThrown) {
$("#m2").dialog('close');
},
success : function(data, textStatus, jqXHR) {
$("#m2").dialog('close');
},
type : 'GET',
url : 'dummyURL'
});
/* if(success){
$("#m2").dialog('close');
}else{
$("#m2").dialog('close');
} */
});
You don't have to destroy and create M2 dialog everytime. just call displaydialog() once on document ready, and then just use open and close on the dialog. You are not seeing the dialog because, dialog(close) would be called just after calling your ajax get request ( in case you are using async : true). So, close M2 dialog on success/error from the ajax request.
If you re using ajax to retrieve the new data, the browser will renderize the web again (not loading, renderize it) so you wont have anymore the dom ready. Try to call displaydialog and then open it. It will work. Anyway, there's a better way to do that, i think your problem is logic. But that solution will work.
I'm having some trouble properly using the close dialog event for the columns chooser plugin/widget of jqGrid. Here's what I have - I start with the jqGrid initialization with the column chooser attached at the end, like so
ticketsTable = tableWrap.jqGrid({
url: ... ,
datatype: ... ,
...
loadComplete: function(d) {
...
}
})
.navGrid('#ticketsList_footer', {edit:false, add:false, del:false, cloneToTop:true})
.navButtonAdd('#ticketsList_toppager', {
caption: "Columns",
title: "Reorder Columns",
id: "colButton",
onClickButton: function(){ ticketsTable.jqGrid('columnChooser'); }
});
Then, in the loadComplete function (above) I find the dialog and attach an alert to its close event, like so.
$('#colButton').click(function(e){
setTimeout(function(){
log($( ".ui-dialog" ).length);
$( ".ui-dialog" ).bind( "dialogclose", function(event, ui) {
log('close dialog event captured!');
});
}, 500);
});
For some reason the alert only comes up when I close the dialog via the "x" button in the corner. When I click "ok" or "cancel" there's no alert. What am I missing?
BTW, the reason I'm doing this is that I need to update table's size (setGridWidth) after the dialog closes to adjust for added/removed columns. Maybe there is a more elegant way to do that?
You can use the following code
tableWrap.jqGrid (
'navButtonAdd',
'#pager',
{
caption: "", buttonicon: "ui-icon-calculator", title: "choose columns",
onClickButton: function() {
tableWrap.jqGrid('columnChooser', {
done: function(perm) {
if (perm) {
tableWrap.jqGrid("remapColumns", perm, true);
alert("The column chooser closed with 'OK' button");
} else {
alert("The column chooser closed with 'Cancel' button");
}
}
}
);
}
});
See the demo