Develop Reference

Cordova run function in background

Before opening this question, I researched here and what I had was not what I needed.
I'm using the plugins:
cordova plugin add cordova-plugin-network-information
cordova plugin add cordova-plugin-background-mode
Reading the doc I arrived at this montage:
document.addEventListener("online", onOnline, false);
function onOnline() {
let networkState = navigator.connection.type
if (networkState == "wifi") {
document.addEventListener('deviceready', function () {
cordova.plugins.backgroundMode.enable();
cordova.plugins.backgroundMode.isScreenOff(function() {
setInterval(function(){
alert('Alert executed in the background')
cordova.plugins.backgroundMode.setDefaults({
title: 'Title',
text: 'Text',
icon: 'www/img/res/mipmap-xxxhdpi/ico.png',
color: 'F14F4D',
resume: true,
hidden: false,
bigText: true
})
}, 5000);
});
}, false);
}
}
But the result is nothing, there is no error, nor does the alert run when the app is closed.
I need the alert to run with the app closed and the icon appears at the top of the phone bar, symbolizing that something is running.
Thanks.

Try to switch the order you registering to the events.
document.addEventListener('deviceready', function () {
cordova.plugins.backgroundMode.enable();
cordova.plugins.backgroundMode.isScreenOff(function() {
});
document.addEventListener("online", onOnline, false);
}, false);
function onOnline() {
let networkState = navigator.connection.type
if (networkState == "wifi") {
setInterval(function(){
alert('Alert executed in the background')
cordova.plugins.backgroundMode.setDefaults({
title: 'Title',
text: 'Text',
icon: 'www/img/res/mipmap-xxxhdpi/ico.png',
color: 'F14F4D',
resume: true,
hidden: false,
bigText: true
})
}, 5000);
}
}

Automatic refresh of a windows

In a web page, when a user click a link I open a new windows.
$('#visit').click(function () {
window.open(getHostName() + "/visits" , 'VisitsReport');
});
In the
$(document).ready(function () {
var initVisit = function initVisitReport() {
$("#visitReportTableResult").bootstrapTable({
url: getHostName() + "/visits",
queryParamsType: "",
responseHandler: function (res) {
return {
rows: res.content,
total: res.totalElements,
pageNumber: res.number,
pageSize: res.size
};
},
queryParams: function (params) { //todo check if we need to put search here
return {
search: params.searchText,
page: params.pageNumber - 1,
size: params.pageSize,
sort: params.sortName + "," + params.sortOrder
};
}
});
};
initVisit();
}
I feed a bootstrap table
After the windows be open, i search a way to refresh data automatically

You can use setInterval :
setInterval(function() {
$.get("url", function(result) {
$("#visitReportTableResult").bootstrapTable({
data: result
});
});
}, 10000);

Why can't I see my neon-animeted tags, moving/fading-out/etc.?

The code is working properly, but somehow it does not show any animations.
I mean using fade-out-animation, it only disappears, no matter what is the duration.
I've imported all the stuff I needed (fade-out-animation,polymer,webcomponents,neon-animation-runner-behavior)
Polymer({
is: 'test-animation',
behaviors: [Polymer.NeonAnimationRunnerBehavior,Polymer.NeonAnimationBehavior],
properties: {
opened: {
type: Boolean
},
animationConfig: {
value: function() {
return {
'entry': {
name: 'slide-from-right-animation',
node: this,
timing: {delay: 2000, duration: 6000}
},
'exit': {
name: 'fade-out-animation',
node: this,
}
}
}
}
},
listeners: {
'neon-animation-finish': '_onNeonAnimationFinish'
},
show: function() {
this.opened = true;
//this.cancelAnimation();
this.playAnimation('entry');
},
hide: function() {
this.opened = false;
// this.cancelAnimation();
this.playAnimation('exit');
},
_onNeonAnimationFinish: function() {
if (!this.opened) {
this.style.display = 'none';
}
}
});

I think you made a mistake in the imported behaviors.
You are using :
-Polymer.NeonAnimationRunnerBehavior, which is correct since your component is running an animation.
-Polymer.NeonAnimationBehavior, which is incorrect: this behavior is meant for creating an animation (fade, slide, whatever you wish). You, on the other hand, want your component to be animatable (meaning, having a Polymer.NeonAnimationBehavior applied to it). The correct behavior for that is Polymer.NeonAnimatableBehavior
So you should change:
behaviors: [Polymer.NeonAnimationRunnerBehavior,Polymer.NeonAnimationBehavior]
to :
behaviors: [Polymer.NeonAnimationRunnerBehavior,Polymer.NeonAnimatableBehavior]
Edit :
I can confirm this was indeed the problem, as I tested this solution successfully.
However, you also have some coma and semi-colon problems in the declaration of your animation. It should be as follows :
animationConfig: {
value: function() {
return {
'entry': {
name: 'slide-from-right-animation',
node: this,
timing: {
delay: 2000, duration: 6000
}
},
'exit': {
name: 'fade-out-animation',
node: this
}
};
}
}

unable to auto slide html pages using sencha

i am create simple app using sencha touch 2 + java script + html 5 which change / slide html pages automatically.
i write below code to slide html pages using DelayedTask task but the code is not working .
Main.js
Ext.create('Ext.Carousel', {
fullscreen: true,
xtype:'carousel',
cls:'carousel',
defaults: {
styleHtmlContent: true
},
config: {
ui : 'light',
},
listeners:
{
'afterrender': function(carousel) {
carousel.pageTurner = new Ext.util.DelayedTask(function() {
if (this.getActiveIndex() == this.items.length - 1) {
this.setActiveItem(0, 'slide');
}
else {
this.next();
}
this.pageTurner.delay(6000);
}, carousel);
carousel.pageTurner.delay(6000);
}
},
items: [
{
html : '<img src="resources/images/Picture1.png" width="100%" height = "100%" align="middle" /> <audio autoplay loop><source src="resources/audio/kalimba.mp3"></audio>',
style: 'backgroundImage: url(resources/images/bg.png);backgroundRepeat: repeat;backgroundPosition: center'
},
{
html : '<img src="resources/images/Picture2.png" width="100%" height = "100%" margin=0 align="middle" /> ',
style: 'backgroundImage: url(resources/images/bg.png);backgroundRepeat: repeat;backgroundPosition: center'
},
{
html : '<img src="resources/images/Picture3.png" width="100%" height = "100%" margin=0 align="middle" />',
style: 'backgroundImage: url(resources/images/bg.png);backgroundRepeat: repeat;backgroundPosition: center'
},
{
html : '<img src="resources/images/Picture3.png" width="100%" height = "100%" margin=0 align="middle" />',
style: 'backgroundImage: url(resources/images/bg.png);backgroundRepeat: repeat;backgroundPosition: center'
}
]
});
i write this code to auto side but its not working please help me..

There are quite many errors in your code. Please try this, as I've tested, it works (changes are only made to listeners):
listeners:
{
'show': function(carousel) {
carousel.pageTurner = new Ext.util.DelayedTask(function() {
if (carousel.getActiveIndex() == carousel.items.length - 2) {
carousel.setActiveItem(0, 'slide');
}
else {
carousel.next();
}
}, carousel);
carousel.pageTurner.delay(1000);
},
'activeitemchange': function(carousel){
if (carousel.getActiveIndex() == 0) {
carousel.fireEvent('show',this);
} else
carousel.pageTurner.delay(1000);
},
},
Some explanation:
afterrender event is replaced by paint event in Sencha Touch 2. In this situation, you can also use show event.
to set delay time after each cardswitch, you need to listen to activeitemchange event
Hope it helps.

I know there already an accepted answer, but here is my implementation of this (for sencha touch v2.2)
Tapping or manually sliding the image will pause the slideshow. Tapping again will resume.
Make sure you apply this to xtype: 'carousel'
{
xtype: 'carousel',
//...your config stuff here...
carouselSlideDelay: 3500,
autoSlide: true,
listeners: {
initialize: function(carousel) {
if (this.autoSlide) {
carousel.isRunning = false;
this.start(carousel);
// Add tap event.
carousel.element.on('tap', function(e, el){
if (!carousel.isRunning) {
carousel.next();
this.start(carousel);
} else {
this.stop(carousel);
}
}, this);
// Add drag event.
carousel.element.on('dragstart', function(e, el){
this.stop(carousel);
}, this);
}
}
},
start: function(carousel, delay) {
// If already running.
if (carousel.isRunning) { return; }
// Allow for overriding the default delay value.
var delay = (delay !== undefined ? delay : this.carouselSlideDelay);
carousel.isRunning = true;
carousel.timerId = setInterval(function () {
carousel.next();
if (carousel.getActiveIndex() === carousel.getMaxItemIndex()) {
carousel.setActiveItem(0);
}
}, delay);
},
stop: function(carousel) {
clearInterval(carousel.timerId);
carousel.isRunning = false;
}
}
And this was loosely based off the Sencha Touch demo here.

After chrome 43 bug. Auto carousel is not working in my app. so i did some customization
direction: 'horizontal',
delay: 10000,
start: true,
indicator:false,
listeners:
{
activate: function(homeScreenCarousel) {
var me=this;
homeScreenCarousel.pageTurner = new Ext.util.DelayedTask(function() {
if (me.getActiveIndex() == me.items.length-1) {
me.setActiveItem(0,'slide');
}
else {
me.setActiveItem(me.getActiveIndex()+1,'slide');
}
me.pageTurner.delay(8000);
}, homeScreenCarousel);
homeScreenCarousel.pageTurner.delay(8000);
},
activeitemchange:function(homeScreenCarousel){
var me=this;
homeScreenCarousel.pageTurner = new Ext.util.DelayedTask(function() {
if (me.getActiveIndex() == me.items.length - 1) {
me.setActiveItem(0, 'slide');
}
else {
me.setActiveItem(me.getActiveIndex()+1,'slide');
}
homeScreenCarousel.pageTurner.delay(8000);
}, homeScreenCarousel);
}
},

Problems with custom alert box via jqueryid dialog

I've been working on a custom alert box that has the same style as the rest of the website via jquery-ui. It was working well except that it wouldn't open more than once. As I was trying to fix that, I broke the whole thing some how, and now I get this error:
Node cannot be inserted at the specified point in the hierarchy" code: "3
Below is the code. doAlert() is a simple replacement for alert(). Later it will have more features. show_support() creates dialog box in a similar way to doAlert(), except that it works perfectly.
function doAlert(msg, title) {
var alert_box = $('body').append('<div id="alert_box" class="centered" style="padding:.5em;vertical-align:middle;display:none;"><p>' + msg + '</p></div>');
title = typeof(title) != 'undefined' ? title : 'Message';
alert_box.dialog({
modal: true,
title: title,
width: 400,
height: 150,
resizable: false,
overlay: {
opacity: 0.5,
background: 'black'
},
buttons: {
'Ok': function() {
$(this).dialog('close');
}
},
close: function() {
$(this).dialog('destroy').remove();
}
});
}
function show_support() {
var dialog = $('body').append('<div id="dialog_support" style="display:none;"></div>');
$('#dialog_support').load('/supporttracker', {action:'get_dialog'})
.dialog({
modal: true,
title: "Support",
width: 620,
height: 400,
buttons: {
"Send": function() {
if (!$('#issue_message').val()) {
doAlert('Your message cannot be blank. Please enter your message.');
return;
}
$.ajax({
type: 'POST',
url: '/supporttracker',
data: 'action=add_simple&'+$('#issue').serialize(),
success: function(msg){
doAlert('Thank you. We will get to your question/issue as soon as we can. Usualy within 24 hours.');
$('#dialog_support').dialog('close');
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
doAlert('An error accured: '+textStatus);
}
});
},
"Cancel": function() {$(this).dialog('close');}
},
close: function() {
$(this).remove();
}
});
}
Anyone have any ideas of how I messed up doAlert?

Look at the close method. doAlert seems to be doing a dialog('destroy'), then calling remove on it. show_support is simply removing the dialog from the DOM. I don't know what the dialog method returns so it may be that the DOM element isn't actually getting removed and thus reinserting it fails -- since you can't have to elements with the same id.
If it were me I'd create the dialog on page load (hidden), then simply update a message when it needs to be shown, and use open/close to reuse the element rather than recreating it.
<div id="alert_box" class="alert-dialog" style="display: none;">
<p id="alert_message">An error occurred.</p>
</div>
<script type="text/javascript">
$(function() {
$('#alert_box').dialog({
modal: true,
width: 400,
height: 150,
resizable: false,
overlay: {
opacity: 0.5,
background: 'black'
},
buttons: {
'Ok': function() {
$(this).dialog('close');
}
}
});
});
function doAlert( msg, title )
{
$('#alert_message').html(msg);
$('#alert_box').attr( 'title', title )
.dialog('open');
}
</script>