I am trying to show loading spinner while loading checkboxes using below code in jquery mobile 1.3.2 on Android native app, but it is not working, can any one help me what the issue is and how to make it work
Here is my code:
function onChangeCarrera(idCarrera,idEvento){
$.mobile.loading('show', {
text: 'Cargando Corredores',
textVisible: true,
theme: 'a',
html: ""});
cargaCorredores(idCarrera,idEvento);
resetMontoTotal();
$.mobile.loading('hide');
}
function cargaCorredores(idCarrera,idEvento){
var dom = jsel(json);
var carrera = dom.select('//Eventos/*[#id='+idEvento+']/carreras/*[#nroCarrera='+idCarrera+']');
//Muestra Label
$("#lblCorredores").text("Selección de corredores");
var html;
for (var x=1; x<=TipoApuesta.patas; x++){
html='<fieldset id="carrera"+x+"_fieldset" data-type="horizontal" data-role="controlgroup"><legend>'+eval("TipoApuesta.p"+x+"Nombre")+'</legend>';
$.each(carrera.corredores, function(i, corredor) {
html+='<input type="checkbox" onclick="resetMontoTotal();" value="'+corredor.nroCorredor+'" name="checkbox_'+idCarrera+'_'+idEvento+'_'+corredor.nroCorredor+'" id="checkbox_'+idCarrera+'_'+idEvento+'_'+corredor.nroCorredor+'" class="corredores'+x+'" /><label for="checkbox_'+idCarrera+'_'+idEvento+'_'+corredor.nroCorredor+'">'+corredor.nroCorredor+'</label>';
});
$("#carreras"+x).html(html+'</fieldset');
$("#carreras"+x).trigger("create");
}
if (TipoApuesta.patas<4){
for (var j=4; j>TipoApuesta.patas; j--){
$("#carreras"+j).html('');
$("#carreras"+j).trigger("create");
}
}
}
I'm using a json preloaded with the page to make a checkboxes.
Many thanks!
I read somewhere about needing to use interval variables. I had the same issue and this resolved it, although it's a little "hacky" to me.
var interval = setInterval(function () {
$.mobile.loading('show', {
text: 'Resuming...',
textVisible: true,
theme: 'a',
html: ""
});
clearInterval(interval);
}, 1);
I had to use a different variable name for interval on each of my app's pages.
Related
I have been stucked in this for a while. It is confirm that this.progressBarValue is changed to true. But the progress bar is not displaying. Can someone help me with this thanks in advance.
some-component.html
<div class="progressBar">
<mat-progress-bar class="fileProgress" mode="indeterminate" *ngIf="progressBarValue">
</mat-progress-bar>
</div>
some-component.ts
confirmConversion() {
this.progressBarValue = true;
console.log(this.progressBarValue)
var filepath = this.filePath;
var fileextension = this.settingsExtension;
new Promise((resolve, reject) => {
window.ConvertMedia(filepath, fileextension, resolve, reject);
}).then((message) => {
console.log(message);
});}
It is working(Progress bar is displayed) if I don't call that Cordova API. I also tried this using some methods given below but it didn't worked.
this.zone.run(() => this.progressBarValue = true)
console.log(this.progressBarValue)
this.changeDetector.detectChanges() & this.changeDetector.markForCheck()
Note: ProgressBar is displayed if I update this.progressBar = true inside
.then((message) => {console.log(message);});
I would try to add *ngIf to container - div like that:
<div class="progressBar" *ngIf="progressBarValue">
<mat-progress-bar class="fileProgress" mode="indeterminate">
</mat-progress-bar>
</div>
If default value for progressBarValue is false mat-progress-bar could not load properly.
Write if it helps or still nothing ;)
Also you can add to your html code
eg. :
<span> {{progressBarValue}} </span>
to keep track of value and be sure if it's even changing
I'm trying to implement font scaling in Steroids+Angular1.3.15 (AppGyver) hybrid app. I decided to use $localStorage to store current font size. It all works great on android devices but not on iOS.. Actually in iOS it works for the newly opened WebViews but not the ones that are already displayed.
Links for font scaling:
<a class="font-size font-small" data-remote="true" ng-class="{current: fontSize == 'rem-base-small'}" ng-click="setFontSize('rem-base-small')">A</a>
<a class="font-size font-medium" data-remote="true" ng-class="{current: fontSize == 'rem-base-medium'}" ng-click="setFontSize('rem-base-medium')">A</a>
<a class="font-size font-large" data-remote="true" ng-class="{current: fontSize == 'rem-base-large'}" ng-click="setFontSize('rem-base-large')">A</a>
and in my controller:
$scope.fontSize = $localStorage.fontSize || 'rem-base-medium'
$scope.setFontSize = function(size) {
$localStorage.fontSize = size
$scope.fontSize = size
}
I use myfontsize directive on <html> tag to update UI. My directive looks like so:
var sharedStuff = angular.module('sharedStuff', ['ngStorage'])
sharedStuff.directive('myfontsize', function($localStorage) {
function link(scope, element, attrs) {
var format,
timeoutId;
function updateClass() {
element.removeClass('rem-base-large')
element.removeClass('rem-base-medium')
element.removeClass('rem-base-small')
$localStorage.fontSize = $localStorage.fontSize || "rem-base-medium"
element.addClass($localStorage.fontSize)
}
scope.$watch(attrs.myCurrentTime, function(value) {
format = value;
updateClass();
});
element.on('$destroy', function() {
clearInterval(timeoutId);
});
// start the UI update process; save the timeoutId for canceling
timeoutId = setInterval(function() {
updateClass(); // update DOM
}, 1000);
}
return {
link: link
};
})
If somebody could shed some light on why it works on android but it doesn't on iOS, I would be much obliged. Alternatively if you have better solution to achieve my goal and don't mind sharing, please do :)
I copied my code from the following link. It's a workaround for Passing Data From an InAppBrowser back to the app.
blogs.telerik.com/appbuilder/posts/13-12-23/cross-window-communication-with-cordova's-inappbrowser
The problem is that after each executescript() the Keyboard disappears.
This issue status here is "won't fix". So I'm wondering if there is an alternative solution. I only see a reference to KitKat users, but that would only represent a limited amount.
https://issues.apache.org/jira/browse/CB-5449
Suggestions?
setName: function() {
var win = window.open( "http://jsfiddle.net/tj_vantoll/K2yqc/show", "_blank",
"EnableViewPortScale=yes" );
win.addEventListener( "loadstop", function() {
win.executeScript({ code: "localStorage.setItem( 'name', '' );" });
var loop = setInterval(function() {
win.executeScript(
{
code: "localStorage.getItem( 'name' )"
},
function( values ) {
var name = values[ 0 ];
if ( name ) {
clearInterval( loop );
win.close();
$( "h1" ).html( "Welcome " + name + "!" );
}
}
);
});
});
}
Depending on your use case, it might be a feasible workaround to check if the keyboard is currently visible and avoid calling executeScript in that case.
Try using the com.ionic.keyboard plugin to get cordova.plugins.Keyboard.isVisible and use that in your setInterval function.
I'm using Phonegap Build to develop an application for iOS and Android.
I'd like to determine the locale (e.g. 'en-US') for the device, though I'd settle for the current language setting, or even the app store my app was installed from (it's been a long day).
Following the instructions here for the Globalization plugin I think I have everything right, but nothing seems to work on either the iPhone 6 or Samsung Galaxy Nexus I'm using for testing.
The relevant part of my config.xml looks like this:
<gap:plugin name="org.apache.cordova.globalization" />
My function for getting locale from the plugin looks like this:
var getPhoneGapLocaleName = function() {
var loc = 'unknown';
if (navigator.globalization !== undefined) {
navigator.globalization.getLocaleName(
function (locale) {
if (locale !== undefined) {
loc = locale.value;
}
},
function () {
// nothing
}
);
}
return loc;
};
Note: on both devices navigator.globalization.getLocaleName is present and appears correct, evaluating to a function resembling what I'd expect based on the documentation.
The problem here was that the variable 'loc' was declared outside the scope of the success or failure callbacks, which of course happen after a few brief moments.
I fixed this by changing the function thus:
var refreshPhoneGapLocaleName = function() {
if (navigator.globalization !== undefined) {
navigator.globalization.getLocaleName(
function (locale) {
if (locale !== undefined) {
localStorage['pg.locale'] = locale.value;
}
},
function () {
// nothing
}
);
}
};
Now calling it in onDeviceReady in order to refresh the values when the app starts.
A few moments later (not immediately) the following function can be used to retrieve the locale value:
var getLocale = function() {
return localStorage['pg.locale']();
};
The greatest thing about StackOverflow is how often it helps one to resolve one's own silly mistakes. :)
Although previous answers are returning the desired result, and giving an option to retrieve the current phonegap locale name, they did not explain the topic starter why his function did not work, and how to adjust his function to work in the way he intended (i.e. not using localStorage and not showing the locale in the console but giving the answer in real-time as a result)
I am posting this answer since I was looking for a quick function to get the device locale, and this post was my first result. While the opening post gave me everything I needed, I would like to answer this question for future visitors with the same purpose I had. Sorry for posting to a topic this old, but I hope I can help others with my answer.
The reason the function of topic starter does not work is the following: the plugin returns the locale in an asynchronous way. Therefore, the loc =locale.value line is only executed after the function's return statement. To fix this, we can write a wrapper function to simplify the plugins output as follows. Keep in mind that we need to use this function asynchronously, since the plugin result is also asynchronous.
The function:
var getPhoneGapLocaleName = function ( callback ) {
var unknownLocation = 'unknown'; //Default value
if ( navigator.globalization !== undefined ) {
navigator.globalization.getLocaleName(
function ( locale ) {
if ( locale !== undefined ) {
callback( locale.value );
} else {
callback( unknownLocation );
}
},
function () {
callback( unknownLocation );
}
);
} else {
callback( unknownLocation );
}
};
Use the function like this:
getPhoneGapLocaleName( function( loc ){ console.log( 'The locale was set as follows: ' + loc ); } );
Try this code
When the browser is set to the en_US locale, this should display a popup dialog with the text language: English:
navigator.globalization.getPreferredLanguage(
function (language) {alert('language: ' + language.value + '\n');},
function () {alert('Error getting language\n');}
);
Full Example
<!DOCTYPE HTML>
<html>
<head>
<title>getPreferredLanguage Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
function checkLanguage() {
navigator.globalization.getPreferredLanguage(
function (language) {alert('language: ' + language.value + '\n');},
function () {alert('Error getting language\n');}
);
}
</script>
</head>
<body>
<button onclick="checkLanguage()">Click for language</button>
</body>
</html>
Good day folks.
I am stuck with a strange problem and after lots of googling I couldn't find the solution/answer
I am creating and Sencha +cordova app for android.
It simply display 10 images in loop.
my code works fine on Chrome browser in desktop.
It fails On android 4.4.2 device when I install as APK.
Please help to fix the code for android.
init: function () {
this.callParent(arguments);
//console.log('init');
if(Ext.os.name == 'Android')
baseurl = baseAndroidUrl;
else
baseurl = baseDesktopUrl;
//alert('baseurl ' + baseurl);
}
var baseurl;
var baseAndroidUrl = 'file:///android_asset/www/resources/resources/images/';
var baseDesktopUrl = '/resources/resources/images/';
var imageArray =
['page00.jpg',
'page01.jpg',
'page02.jpg',
'page03.jpg',
'page04.jpg',
'page05.jpg',
'page06.jpg',
'page07.jpg',
'page08.jpg',
'page09.jpg',
'page10.jpg'];
var counter = 0;
-----------------------------------------------
onPrePageCommand: function () {
console.log('onPrePageCommand');
if( counter === 0 )
return ;
counter--;
// Folloing dynamic updation doesn't work in android , works perfectly on desktop
Ext.getCmp('pageID').setSrc(baseurl+imageArray[counter]);
//Ext.getCmp('pageID ').doLayout();
},
onNextPageCommand: function () {
console.log('onNextPageCommand');
if( counter === imageArray.length-1 )
return ;
counter++;
Ext.getCmp('pageID').setSrc(baseurl+imageArray[counter]);
},
------------------------------------------
//initial view : work perfect for both Desktop browser and APK
{
xtype: 'image',
src:'resources/images/Page00.jpg',
id:'pageID',
mode:'image'
height:'100%',
width:'100%'
}
--------------------------------------------
Try to use a Framework for that like http://wowslider.com/ this worked great for me the last time. You can also scroll the images with your fingers (swipe them).