PawelMu
Posts: 0
Joined: Sun Jul 06, 2014 5:04 pm

ToDo app (from tutorial pt2) behaves like it is only in offline mode. How to bring in to online mode?

Hi,
I did the ToDo from pt. 2 tutorial. It acts like it is only in offline mode.

  1. on loading the App in browser for testing i see no entries. Only when i make first entry, the list updates and i see all previously inputed entries.

  2. I don't see the entries from the App to appear in the DB and vice versa. No entries that i put manually into DB appear in the App.

  3. Moreover, the footer is inactive. I understand it should indicate the curtest status of the app (on/off-line).

    Originally i assumed I'm doing something wrong, so i deleted the App and did it again step by step with the tutorial. I was careful to do exact tutorial steps. Behavior is still the same.

    Can you please help?

    thanks,

Illya Stepanov
Posts: 0
Joined: Mon Mar 18, 2013 8:48 am

ToDo app (from tutorial pt2) behaves like it is only in offline mode. How to bring in to online mode?

Hi Pawel,

It's better to start from first tutorial part (http://devcenter.appery.io/tutorials/...) - this tutorials only shows the basic functionality process.

  1. Are you sure that you're calling the List service on the Page Load event? Like it's described here: http://devcenter.appery.io/tutorials/...

  2. After you've made any changes in the your DB they will not be displayed in your app automatically - you'll need to refresh the page, so the event occurs again and shows the content.

  3. No - there is no such functionality in this tutorial.

Barbara Dornseif
Posts: 0
Joined: Fri Jun 27, 2014 7:45 pm

ToDo app (from tutorial pt2) behaves like it is only in offline mode. How to bring in to online mode?

Hello Illya and Pawel,

I am having the same issue as Pawel - no footer online/offline status (independent of actual status in browser(wifi on/off) or iPhone (airplane mode on/off); initial list is blank (but appears when a task is added; and changes to list (deletes and adds) are not reflected in the database. Yes, I refreshed the DB... several times :-)

Prior to writing, I checked the debugging tips and learned how to look at the localStorage resources via the Chrome dev tool (Thank You!). The variables for the 4 list items I added were logged locally. So the entries were being captured and reflected as offline items.

My hypothesis is that the lack of an online/offline status is reflected in the _isOnline variable needed in the sync and child functions to have the DB and local storage sync as intended.

I tested your #1 suggestion - I had a list service engaged after tutorial #1, but deleted it to have my events list match the "how to" pictures - I assumed, like other events that were static from the basic App, it was no longer needed. If some are still needed, the "how to" should show or make mention of this fact. :-)

After adding it back in, I now see the full list of DB logged tasks. Unfortunately, my local items now appeared as "undefined" at the bottom of the list.

When I clicked the single item to see if details would be shown - it deleted - as did all the elements in the {tasks} object in localStorage per the Dev tool view.

Also, since adding back this service, I can no longer delete or add tasks in offline mode. At all.

I believe this is because the _isonline variable stays at "1" after the initial load and does not update to "0" as would be suggested given the Event handler for "offline" running the JS function call to onOffline().

I will continue to work on how to go around this - but suggestions are welcome :-)

as to #3 - the footer is most certainly in the tutorial as well as the Javascript in the tutorial. I cannot see how the JS will properly operate if the footer is not set and thus available for the .getItem

// On online
function onOnline() {
localStorage.setItem('_isOnline', 1);
$('[dsid="footer"]').text('Online');
startSynchronization();

// Start synchronization of tasks with cloud
function startSynchronization() {
var isOnline = localStorage.getItem('_isOnline');
// i believe this comes from the footer?? if not, where does it come from?
if (isOnline == 1) {
var task;
:

There does appear to be some small things amiss, but not sure if it is the above, or one of the 2 other JS code issues I also noted, that may be causing issues (sorry I am just learning JS so my debugging skills are in the relm of little-educated guesses).

1) is the use of eval() in the startSynchronization() sections for Deleting and Creating. My understanding is that newer browzers using strict mode, will kick this back (best practice security says this is a no no)- there is an error message in the Appery JS editor.

Until I can get the other issues resolved, I cannot hope to test an alternative approach as this line is directly impacting the synchronization logic and syntax. But here is what I think will work. any comments appreciated.

2) the same variable was recycled inconsistently in the create section.

// Creating
tasks = localStorage.getItem('tasksToCreate');
if (tasks) {
var tasksArr1 = eval('([' + tasks + '])'); // added "1" here differs from delete
while (tasksArr.length) { // same as delete block
task = tasksArr.shift(); // same as delete block
if (task.name) {
create_service.execute({data:{task: task.name}});
}
}
localStorage.setItem('tasksToCreate', '');
}

I changed this variable to be "tasksArrC" consistently and as stated earlier, I was successfully adding each task to the end of the localStorage object.

Any help you can offer is greatly appreciated - I will need a similar functionality for an App I am developing - which will often find itself in an offline situation and still need to capture data.

Barb

PawelMu6977332
Posts: 0
Joined: Thu Jul 10, 2014 9:40 am

ToDo app (from tutorial pt2) behaves like it is only in offline mode. How to bring in to online mode?

Hi Iilia,

Re your comments:

Of course i'e did pt 1 of the tutorial, and it works as advertised. This is the offline mode (described in pt2) which is not working.

Re 1 : i did everything exactly as prescribed in pt2 tutorial.

Re 2. : that is clear, but its not what i said is my problem. After refreshing the page i see only the records stored locally. and not the records stored in DB. It seems as if there is no connection to DB.

Re 3: You say "there is no such functionality in this tutorial". I think you are wrong. I agree with Barbaras observations. Below are some excerpts from your tutorial:

To make the text in the footer look neat, add styles:


  1. From Project view, Create New CSS.

  2. Enter name: todo_main.

  3. Paste the following:
    .status-text { font-style: normal; font-size: 60%; text-align: center; font-weight: normal; vertical-align: middle; }

  4. Open startScreen, and select the footer.

  5. On the Property panel, change the following properties:


    Name – footer.
    Class Name – status-text.

    And also some code extracts from JS:

    // Check connection
    function checkConnection() {
    if (navigator && navigator.network && navigator.network.connection && navigator.network.connection.type) {
    var networkState = navigator.network.connection.type;

    Code: Select all

     if (networkState !== Connection.NONE) { 
         onOnline(); 
     } else { 
         onOffline(); 
     } 
     // When debug only (in desktop browser) 

} else {
onOnline();
$('[dsid="footer"]').text('Browser mode');

// On offline
function onOffline() {
localStorage.setItem('_isOnline', 0);
$('[dsid="footer"]').text('Offline');
}

// On online
function onOnline() {
localStorage.setItem('_isOnline', 1);
$('[dsid="footer"]').text('Online');
startSynchronization();

Thanks for your support.

Maryna Brodina
Posts: 0
Joined: Thu Apr 05, 2012 7:27 am

ToDo app (from tutorial pt2) behaves like it is only in offline mode. How to bring in to online mode?

Hello!

Please try to invoke onOffline() and onOnline() functions on corresponding app events.

Robert Harrington
Posts: 0
Joined: Thu Aug 07, 2014 6:25 pm

ToDo app (from tutorial pt2) behaves like it is only in offline mode. How to bring in to online mode?

Hi all,
I'm wondering if anyone solved this series of issues with this tutorial yet. I am having EXACTLY the same issues listed above.

I was able to get everything working (both the status in the footer and interaction with the db) when I invoked the onDeviceReady(); function to occur on an "Add Task" button click.

However, it would be nice to get it working as intended. I'm no JS expert so I'm a little perplexed as to why the onDeviceReady(); function does not run when the preview is rendered. I switched the JS event to "load" and it causes the preview to hang for me.

Any help would be appreciated.

Thanks,
Rob

Robert Harrington
Posts: 0
Joined: Thu Aug 07, 2014 6:25 pm

ToDo app (from tutorial pt2) behaves like it is only in offline mode. How to bring in to online mode?

I worked on this further and realized two things:

  1. the Device Ready event will not work on browsers, only devices. I changed the even from "Device Ready" to "Focus". This worked in the browser with the following change described in #2. (the "Focus" event does not work on phones, you can invoke onDeviceReady() on the "Add Task" button click to see it on your phone browser.)

  2. In the startSynchronization function there is an issue:

    In the "Creating" section for this function, the tasksArr1 variable is defined, but the function goes on to use tasksArr var which is defined in the "Delete" section. Once I changed both instances to "tasksArr1" under "Creating" everything worked as intended (upon clicking to invoke the Focus event or clicking the button on my phone's browser). This bug was breaking the code for me.

    function startSynchronization() {
    var isOnline = localStorage.getItem('_isOnline');
    if (isOnline == 1) {
    var task;

    Code: Select all

     // Deleting 
     var tasks = localStorage.getItem('_tasksToDelete'); 
     if (tasks) { 
         var tasksArr = eval('([' + tasks + '])'); 
         while (tasksArr.length) { 
             task = tasksArr.shift(); 
             if (task.id) { 
                 delete_service.execute({data:{object_id: task.id}}); 
             } 
         } 
         localStorage.setItem('_tasksToDelete', ''); 
     } 
    
     // Creating 
     tasks = localStorage.getItem('_tasksToCreate'); 
     if (tasks) { 
         var tasksArr1 = eval('([' + tasks + '])'); 
         while (tasksArr.length) { 
             task = tasksArr.shift(); 
             if (task.name) { 
                 create_service.execute({data:{task: task.name}}); 
             } 
         } 
         localStorage.setItem('_tasksToCreate', ''); 
     } 

}
listServiceExecute();
}

Robert Harrington
Posts: 0
Joined: Thu Aug 07, 2014 6:25 pm

ToDo app (from tutorial pt2) behaves like it is only in offline mode. How to bring in to online mode?

Personally, I am all set. I was able to figure it out on my own. For others' benefit, you may want to check the JavaScript under "//Creating" above. It defines var as "tasksArr1" but then goes on to use "tasksArr". I found that some of the errors I was experiencing were resolved by correcting it to "tasksArr1".

Dani Mora
Posts: 0
Joined: Sun Nov 09, 2014 5:53 pm

ToDo app (from tutorial pt2) behaves like it is only in offline mode. How to bring in to online mode?

Does anybody have issues with the _echo variable? when in offline mode the list shows old records. Looks like the _echo variable is never cleaned or updated.

Return to “Issues”