StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The following should fix your problems. You weren't declaring oustandingInvoicesObject the way you were intending. It had to be off 'this' or 'context' in your case.</p> <p>Also, you declared oustandingInvoicesObject as an Array instead of an Object. You can't add properties to an Array like you would an Object.</p> <p>Let me know how it goes.</p> <pre><code>$.pcw.outstandingInvoices = function () { var context = this; context.outstandingInvoicesObject = {}; context.init = function () { console.log('Initializing outstandingInvoices class.'); context.loadData(); context.removeLoader(); context.addOutstandingInvoicesToTable(); }; context.loadData = function () { console.log('Loading outstanding invoices from server.'); var self = this; jQuery.getJSON('/ajax/outgoing-invoices/find-outstanding.json', function (data) { jQuery.each(data, function (key, entry) { self.outstandingInvoicesObject[key] = entry; }); }).error(function () { console.error('Error while loading outstanding invoices.'); }); }; context.removeLoader = function () { jQuery('table#invoices-outstanding tr.ajax-loader').fadeOut(); }; context.addOutstandingInvoicesToTable = function() { if (context.outstandingInvoicesObject.length == 0) { console.log('No outstanding invoices found'); } jQuery.each(context.outstandingInvoicesObject, function (key, entry) { // This is a new outstanding invoice var rowClass = 'info'; switch(entry.status) { case 'Created': case 'Sent': case 'Paid': // The invoices with Paid statuses aren't show here, because we only show the oustanding invoices on this page. rowClass = 'success'; break; case 'First reminder': case 'Second reminder': case 'Partially paid': rowClass = 'warning'; break; case 'Third reminder': case 'Collection agency': case 'Judicial proceedings': rowClass = 'error'; break; } jQuery('table#invoices-outstanding tbody').append( outstandingInvoice = jQuery('<tr/>', { id: 'outgoing-invoice-' + key, class: rowClass }).append( jQuery('<td/>', { class: 'id', text: key }) ).append( jQuery('<td/>', { class: 'debtor-name', text: entry.debtor_name }) ).append( jQuery('<td/>', { class: 'amount', text: entry.amount }) ).append( jQuery('<td/>', { class: 'date', text: entry.created_timestamp }) ).append( jQuery('<td/>', { class: 'status', text: entry.status }) ).append( jQuery('<td/>', { class: 'creator', text: entry.creator }) ) ); }); }; }; // When document is ready (function(){ var invoices = new $.pcw.outstandingInvoices(); invoices.init(); })(); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload