updating progress between services does not refresh components on page

[Ram]

Dear Appery,

i'm struggling with this for over a week now and just cant figure this out, your help would be highly appreciated (as always)!!!

its an iPhone PhoneGap based app, during the login process the app execute some tasks based on services calls, since this could take some time there's a login progress page that indicates the user of the app login progress:

the images are invisible and at the end of each service call the image should be visible to the user, something like this:

precode
// get user credit
UserCredit.execute({});
Appery('img_credit').fadeIn(500,function(){
// Get User History file
GetHistory.execute({});
Appery('img_history').fadeIn(500,function(){
//Get User sounds file
GetSoundFiles.execute({});
Appery('img_sound').fadeIn();
});
});
/code/pre

the above doesnt make the images visible...

i also have on the same page a service that build a list of all the user's contacts, in its mapping JS i have this code:

precode
var new_value = parseInt(localStorage.getItem('counter'));
var counter = new_value + 1
localStorage.setItem('counter', counter);
var n = localStorage.getItem('NumberOfContacts');
var n = Math.round((100 * (counter / n))) + '.0%';
Appery('lbl_percentage').text(n);
Appery('lbl_percentage').refresh();
/code/pre

as before, the 'lbl_percentage' doesnt update (same code works on a different page and update the 'lbl_percentage' as the list populated)

can you pls pls pls help me figure this out???

[Kateryna Grynko]

Hi Ram,

Will take a look.

[Ram]

THANK YOU!

[Maryna Brodina]

Hello!
1) "the images are invisible and at the end of each service call the image should be visible" - it doesn't seems correct to invoke service on complete fadeIn function. It would be better to show image on success of corresponding service.
2) Check lbl_percentage label name, try this code preAppery('lbl_percentage').text("20.0%");/pre on button click (add test button to see if the Label is updated)

[Ram]

Dear Maryna,

thank you for your reply!

i did as you suggested and moved all image fadein into each service success event, and also i added your line of code in the beginning of the code for that page,

pls have a look at this

at the end you can see that some of the images and the label did change but did not refreshed in between services success calls:

[Maryna Brodina]

) not all images are visible - please check if you invoke all corresponding services, if they are completed successfully. Have you added correct code in all services to show images (also check correct image name).
2) data is returned so fast that you can't see changes in label, just the last value. You can add alert in the beginning of code in mapping to see that it changes. If you need animation we would suggest to do it another way. For example on service success set label value changing on timeout because mapping procedure is really fast and you just don't see changes.

[Ram]

i checked then checked again, at each success event for each service i call there's the correct code with the correct image name, i re copied and checked this all over once again, i think i feel comfortable enough to say that this is not the problem.

i did as you suggested and removed the code from the mapping JS unto the success event for GetContacts service and wrapped it in a timer:

precode
Appery('img_contacts').fadeIn();

var myVar=setInterval(function(){myTimer()},500);

function myTimer()
{
var new_value = parseInt(localStorage.getItem('counter'));
var counter = new_value + 1;
var n = localStorage.getItem('NumberOfContacts');

Code: Select all

     if (counter == n) { 
clearInterval(myVar); 
return ; 

}

localStorage.setItem('counter', counter);
var n = Math.round((100 * (counter / n))) + '.0%';
Appery('lbl_percentage').text(n);
Appery('lbl_percentage').refresh();
}
/code/pre

and finally i added two alerts, one before calling the GetContacts service and one after:

precode
alert('addressbook page show BEFORE GetContacts.execute');
GetContacts.execute({});
alert('addressbook page show AFTER GetContacts.execute');
/code/pre

there was no success and also the images/label didnt refresh after the second alert...

[Maryna Brodina]

Hello! For label animation try the following code preAppery('img_contacts').fadeIn();
var myVar=setInterval(function(){myTimer()},200);
var count = 0; maxCount = 20;
function myTimer() {
count++;
var n = Math.round((100 * (count / maxCount))) + '.0%';
Appery('lbl_percentage').text(n);
if (count == maxCount) {
clearInterval(myVar);
}
}/pre2) Add alert or console.log on service success event to ensure service has been invoked.

[Ram]

Dear Maryna,

i managed to make it work without the use of timeouts and timers by setting the animation in the success event and calling the next service in the complete event, its working quite well now!

thank you for your support, as always i appreciate it very much!!!