Databases
StackOverflow2013
Postsdbo
POJavascript class variables scope
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJavascript class variables scope
    primarykey
    data
    text
    <p>I'm kinda struggling with Javascript variable scopes in combination with a jQuery JSON call. Unforutnatly, I can't post this script on jsFiddle, because it needs some data.</p> <p>I'm trying to dynamicly load data and output it on the user's screen. I've now only created the method that loads the data for the first time. Later on I'd like to make an update method which updates the data in the table rows.</p> <p>But now I'm having a problem with the variable scope. When $.pcw.outstandingInvoices.init() has been called, I get the following error:</p> <pre><code>ypeError: can't convert undefined to object this.outstandingInvoicesArray[key] = entry; </code></pre> <p>My code:</p> <pre><code>-- Post is getting to long, so removed the first code i've used. -- </code></pre> <p>Could anyone tell me what I'm doing wrong so I can fix it?</p> <p>Thanks in advance!</p> <p>--- UPDATE --- I've edited the things you guys told me, but still I'm getting errors... Could anyone tell me what I'm doing wrong?</p> <p>My new code and errors:</p> <pre><code>-- Post is getting to long, so removed the first update of the code. -- </code></pre> <p>Errors:</p> <pre><code>Initializing outstandingInvoices class. Loading outstanding invoices from server. TypeError: context.outstandingInvoicesObject is undefined if (context.outstandingInvoicesObject.length == 0) { TypeError: can't convert undefined to object self.outstandingInvoicesObject[key] = entry; </code></pre> <p>-- UPDATE 2 -- Just edited my code and now I'm not gettting errors, but the data in outstandingInvoicesObject is not properly saved, so the method addOutstandingInvoicesTable can't find any invoices. I've been analyzing the console and it seems the there is somethin wrong with order of execution of the methods...</p> <p>The code:</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.'); jQuery.getJSON('/ajax/outgoing-invoices/find-outstanding.json', function (data) { var i = 0; jQuery.each(data, function (key, entry) { context.outstandingInvoicesObject[key] = entry; ++i; }); console.log('Loaded ' + i + ' invoices'); }).error(function () { console.error('Error while loading outstanding invoices.'); }); }; context.removeLoader = function () { console.log('Removing loader'); jQuery('table#invoices-outstanding tr.ajax-loader').fadeOut(); }; context.addOutstandingInvoicesToTable = function() { console.log('Outputing invoices to table'); 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('&lt;tr/&gt;', { id: 'outgoing-invoice-' + key, class: rowClass }).append( jQuery('&lt;td/&gt;', { class: 'id', text: key }) ).append( jQuery('&lt;td/&gt;', { class: 'debtor-name', text: entry.debtor_name }) ).append( jQuery('&lt;td/&gt;', { class: 'amount', text: entry.amount }) ).append( jQuery('&lt;td/&gt;', { class: 'date', text: entry.created_timestamp }) ).append( jQuery('&lt;td/&gt;', { class: 'status', text: entry.status }) ).append( jQuery('&lt;td/&gt;', { class: 'creator', text: entry.creator }) ) ); }); } } // When document is ready (function() { var invoices = new $.pcw.outstandingInvoices(); invoices.init(); })(); </code></pre> <p>The console output:</p> <pre><code>Initializing outstandingInvoices class. Loading outstanding invoices from server. GET /ajax/outgoing-invoices/find-outstanding.json 200 OK 509ms Removing loader Outputing invoices to table No outstanding invoices found Loaded 29 invoices </code></pre> <p>Thanks</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USIvo van Beek
    1. USIvo van Beek
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POJavascript class variables scope
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POJavascript class variables scope
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POJavascript class variables scope
      1. This table or related slice is empty.
      1. VTUpMod
    1. COCan you add some data samples as JSON string?
      singulars
      1. POJavascript class variables scope
      1. USChris
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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