0
transaction.executeSql('SELECT * FROM Table1 ORDER BY date DESC', [],
         function(transaction, result) {
         if (result != null && result.rows != null) {
         for (var i = 0; i < result.rows.length; i++) {
         var row = result.rows.item(i);
         $('#records').append('<li date = "'+row['date']+'" data-rowid2="' + row['Id'] + '"><a href ="#">' + 'test: ' + row['column1'] + '</a></li>').trigger('change');
         }
         }
         },errorHandler);


transaction.executeSql('SELECT * FROM Table2 ORDER BY date DESC', [],
         function(transaction, result) {
         if (result != null && result.rows != null) {
         for (var i = 0; i < result.rows.length; i++) {
         var row = result.rows.item(i);
         $('#records').append('<li date = "'+row['date']+'" data-rowid="' + row['Id'] + '"><a href ="#">'+ 'Test2: ' + row['column1'] +'</a></li>').trigger('change');
         }
         $("#records").listview().listview("refresh");
         }
         },errorHandler);
         },errorHandler,nullHandler);

This is some code which selects columns from 2 different tables. The tables have two different columns called date which stores the date input. Notice the date attribute assigned to the li elements. My problem comes here:

$(document).on("pageinit", "#mypage", function(){
           $("#records").listview({
                                  autodividers: true,
                                  autodividersSelector: function (li) {
                                  var out = li.attr("date");
                                  return out;
                                  }
                                  }).listview("refresh");
           });

Now since the dates are from two different tables, two autodividers are being created even if they share the same date. For example if table1 date column had 2014-01-02 and table2 date column had 2014-01-02, two separate dividers would be created for the same date and the list elements wouldn't be shown under one. Is there a solution to this problem?

NOTE: Both the select statements append results to the same listview, they are just from different tables

EDIT: I think I have found what the issue is, but I am not sure on how to solve it. Basically, when I append those list elements, Table1 stuff takes priority and always goes first. For example if I had the list like this:

Table 1 item
Table 2 item

Then if I added another Table 1 item it will do this:

Table 1 item
Table 1 item
Table 2 item

Which is displacing the table 2 item from its original position. Is there anyway to solve this?

Mohd
  • 313
  • 1
  • 4
  • 16
  • I believe for autodividers to work the listitems must be sorted. Can you combine the query results from the 2 tables into one array of objects and then sort that array before adding the items to a listview? See this example for sorting: http://stackoverflow.com/questions/1129216/sorting-objects-in-an-array-by-a-field-value-in-javascript – ezanker Apr 26 '14 at 21:49
  • I'm a very inexperienced programmer, if that is the only way to do it, then I will just remove the autodivider feature. I would try it, but my project is due soon – Mohd Apr 26 '14 at 22:01

0 Answers0