Interesting issue with SQL - can't save from two tabs at once

I’m using a tabbed interface. Tab 1 has some basic data, Tab 2 has some more detailed data.

I’m using a db insert like this:

$scope.insert = function(date_in, basic_data1, basic_date2, detail1, detail2, detail3) {
  tx.executeSql("INSERT OR REPLACE INTO 'stats' (date, age, gender, val1, val2, val3) VALUES (?,?,?,?,?,?)", [date_in, basic_data1, basic_date2, detail1, detail2, detail3);
    $log.log("ERROR: " + e.message);

This works to insert the data from the tab you are on. Here is the ng-click:

ng-click="insert(currentDate, userage, usergender, user_detail1, user_detail2, user_detail3)" 

And the form elements:

<label class="item item-input">
        <i class="icon ion-clock"></i> 
        <span class="input-label smalltext"> Age</span>
        <input type="number" ng-model="userage">

I’m looking at the webSQL DB in the Chrome dev console. The insert works, and it overwrites like it should. But it only saves the portion of the DB from the tab you are on.

E.g. If I save from Tab 1 the date, age and gender save. If I save from Tab 2 the date and detail1, 2 and 3 save. This overwrites the other part of the data with “undefined”, even thought going back to the other tab shows that the data is still in the fields.

The reason the date works is there is a date picker on both tabs bound to the same model - currentDate.

How can I get the data from both tabs to be handled by my function every time?

No ideas?

This must be an angular model issue but the Angular docs aren’t helping me. :frowning:

When posting multiply parameters in a ng-click I’ve always structured them like this


That could be why you only save a portion, also what maybe happening is 2 ansychronous calls and you have no deferred object for SQLLite. You thought of structuring the SQLLite into factories, thus making inserting and updating more cleaner.

There is only one call to the database - the idea is that it inserts all the data from both tabs at once.

And if your method of using ng-click gives the same results.

The frustrating thing is I originally built this app in jQuery Mobile and was storing the data in LocalStorage and it worked fine. I think it may be to do with ngIf. It seems odd to me that Ionic works like this as it means I may have to have two DB tables when I only really need one. I’d have thought that Angular was supposed to stop issues like this arising.

What I could do is create extra objects that store the parameters before the SQL insert but that’s again, kind of besides the point.

I’d recommend handling SQLLite side of the app into a service and config (factory)

Like this -

I’m guessing that’s not the problem though, So you have data on 2 tabs which you’re wanting to submit with one ng-click function, or are you inserting the data from tab 1 with the insert function - which only has the date, age and gender and tab 2 which only has the date, user_detail1, user_detail2, user_detail3.

I’d put console log on each of the variables when the function is being called to see what variables are being populated when tab 2 data is submitted

I have 2 tabs and in order to make my SQL easy I have one table with date, age, gender, user_details…

I want to submit ALL the data from either tab 1 or tab 2.

This is because:

a. It means users can fill in tab1, then go fill in tab 2 (or vice versa), press save and its all done. They don’t have to save on each tav.

b. It means I have one table, one insert/update function and one select function.

Currently I’m working with two tables instead, one for each tab. Users have to press Save on each tab though and this isn’t how I’d like it.

I’ve put console logs on. The data from the “other” tab doesn’t get sent by the ng-click.

I reckon this is because the other tab is hidden therefore so is the data.

So when you go to tab2 from tab1 pass the date age gender as stateParams and then in second tab grab them stateParams to use in the second tab.

Think that’ll solve it!

But if your wanting to do it vice versa define the parameters as rootScope values

So this is because of ng-if it seems.

I posted on Stackoverflow and got given this plunker:

Its using a $ = {} object but although it works in the plunker it doesn’t work for me. My console logs show that the data from one tab isn’t seen by the controller when on the other tab.

And I don’t know how to use stateParams (docs on it are very sparse imho) and I’d rather not use things I don’t understand. Using $ makes sense to me, but alas it doesn’t work.

Is this something specific to Ionic and not Angular?

Try using ng-show / ng-hide. As I think the scope variables are visible - with an ng-if the scope variables from within the “ng-if’ed” div aren’t declared.

I could be taking baloney.

I defined $ variable in the main module, one step up from the tab controllers, and it’s working now.

I need to read more Angular!