Question

Hi I develop a mobile app that has 5 html pages in one file.

In page 2 I have a listview of expenses of a building.

In page 3 I have a function in order to pay the selected expense from page 2.
At the end of the above function I include the below code

$.mobile.changePage('#page2', 'slideup', true, true);

I want when the app returns to page 2 from page 3 not to display the paid expense.

I want if I understand well a page refresh for page 2 or a listview refresh.

I try to add reloadPage at changepage command with no luck.

How can I do this?

here is the function i use to create the listview

function getItemPayments(buildingcode) {

        var list = $('#recentflatsPayments'),
            items = [];


        $.mobile.notesdb.transaction(function(t) {
            t.executeSql('SELECT DISTINCT buildingaddress, buildingcode FROM expense WHERE buildingcode = ?',[buildingcode], function(t, resultbuilding) {
                var myrow;
                myrow = resultbuilding.rows.item(0);
                $('#displayPayments h2').text(myrow.buildingaddress);
            });
        });

        $.mobile.notesdb.transaction(function(t) {
            t.executeSql('SELECT barcode, buildingcode, buildingaddress, description, entryseason, period, amount FROM expense WHERE buildingcode = ?',[buildingcode], function(t, resultexpense) {
                var i,
                    len = resultexpense.rows.length,
                      myrowpaidlen = 0,
                      myrowpaid = 0,
                      row;
                if (len > 0 ) {
                    for (i = 0; i < len; i += 1) {
                        dummypaid(i);
                    }

                    function dummypaid(i){
                        var row = resultexpense.rows.item(i);
                        t.executeSql('SELECT * FROM expensepayments WHERE Barcode = ?',
                        [row.barcode], 
                        function(t, resultpaid) {
                            var myrowpaidlen = resultpaid.rows.length;
                            if (myrowpaidlen > 0){
                                var myrowpaid = resultpaid.rows.item(0);
                                if (row.amount > myrowpaid.Amount){
                                    items.push('<li><a href="#displayexpense" data-description="' + row.description + '" data-buildingcode = "' + row.buildingcode + '" data-barcode="' + row.barcode + '" data-amount="' + row.amount + '" data-buildingaddress="' + row.buildingaddress + '">' + row.description + '</a></li>');
                                }
                            } else {
                                items.push('<li><a href="#displayexpense" data-description="' + row.description + '" data-buildingcode = "' + row.buildingcode + '" data-barcode="' + row.barcode + '" data-amount="' + row.amount + '" data-buildingaddress="' + row.buildingaddress + '">' + row.description + '</a></li>');
                            }
                            if (i+1 == len){
                                items.push('<li><a href="#displayexpense" data-description="other" data-buildingcode = "' + row.buildingcode + '" data-barcode="0" data-amount="0" data-buildingaddress="' + row.buildingaddress + '">Other</a></li>');
                            }
                            list.html(items.join('\n'));
                            list.listview('refresh');
                            $('a', list).click(function(e) {
                                getItem1Payments($(this).attr('data-description'), $(this).attr('data-buildingcode'), $(this).attr('data-barcode'), $(this).attr('data-amount'), $(this).attr('data-buildingaddress'));
                            });
                            $('#entriesflatPayments').show();

                        });
                    }
                } else {
                    $('#entriesflatPayments').hide();
                }
            })
        });
//  });       
}

Answer 1

Just add the code to hide/show your listview expenses on the pagebeforeload event of page2, like this:

$('#page2').bind('pagebeforeload',function(event){
   if (expenses_paid) { //use your own logic here
      //hide list view
   } else {
      //show expenses list view
   }
});