Javascript: Object context overwritten?

Javascript: Object context overwritten?

I understand there is some sort of context mix up in the following
Javascript code I have.
Could someone explain my why I have this problem and how to solve the issue?
I have a class called Model which seems to work just fine. In this class
is a method called update(). This will perform an AJAX call to the backend
and parse the returned JSON. That's where things get tricky. The correct
query is sent to the backend and the correct JSON is sent back. However,
during parsing, there is some kind of collision or context issue between
both models.
I call the update function through another object called View. This View
object has a list of models (instances of Model). The view will then call
each update function of each view. This works great until the returned
data is parsed.
In the following code, everything is good until the line where there's the
comment "/!\ HERE /!\".
this.update = function(dbi) {
console.log('Updating model ' + this.name + '.');
var modelObj = this; // This is used to have a reference to 'this' Model
while in other contexts.
if (this.columns.length == 0) {
/* Let's build all the columns */
$("[id^='" + this.ref + "']").each(function() {
var colName = $(this).attr('id').split('-')[1];
if (modelObj.columns.indexOf(colName) == -1) {
modelObj.columns.push(colName);
}
});
}
/* Let's build the bindings. */
var allBindings = {};
for (placeholder in this.bindings) {
allBindings[placeholder] = this.bindings[placeholder].val();
}
$.post(path + 'inc/fetch.php', {
dbi : dbi,
table : this.table,
columns : btoa(this.columns),
limit : this.limit,
offset : this.offset,
distinct : this.distinct,
where : btoa(this.where),
bindings : btoa(JSON.stringify(allBindings))
}, function(data) {
if (!data.valid) {
$("#userError>p>span.userMessage").html(data.msg);
$("#userError").dialog({
width : 500,
buttons : {
'Dismiss' : function() {
$(this).dialog("close");
}
}
});
} else {
/* The data returned by the backend is simply JSON data with the
key-value pair. There is one key per row returned. */
var numRows = 0; // /!\ HERE /!\ Starting here, displaying the data
variable will always display the first of two objects.
for ( var rowID in data) {
if (rowID == 'valid')
continue;
numRows++;
for (column in data[rowID]) {
console.log('[' + modelObj.str() + '] setting #' + modelObj.ref +
'-' + column + ' to [' + data[rowID][column] + ']');
var el = $('#' + modelObj.ref + '-' + column);
var val = data[rowID][column];
switch (el[0].nodeName) {
case "SELECT":
el.html('<option val="' + val + "'>" + val + "</option>");
break;
case "TD":
el.text(val);
break;
case "INPUT":
el.val(val);
break;
default:
console.log('Dont know how to display "' + val + '"!');
}
}
}
if (numRows < modelObj.columns.length) {
for ( var cNo in modelObj.columns) {
var column = modelObj.columns[cNo];
console.log("col = " + column);
console.log('data');
console.log(data);
console.log('columns');
console.log(modelObj.columns);
console.log('[0] of ' + '#' + modelObj.ref)
var par = $('#' + modelObj.ref).nodeName;
var el = $('#' + modelObj.ref + '-' + column);
var val = data[0][column];
switch (par) {
case "SELECT":
el.html('<option val="' + val + "'>" + val + "</option>");
break;
case "TABLE":
var limit = $('#' + modelObj.ref + ">tr").length - 1; // The
first line (tr) is the header.
for ( var missingRow in limit) {
if (data.hasOwnProperty(missingRow) == 0 ||
data[missingRow].hasOwnProperty(column) == 0) {
console.log('[' + modelObj.str() + '] setting #' +
modelObj.ref + '-' + column + ' to [N/A]')
$('#' + modelObj.ref + '-' + column + '-' +
missingRow).text('N/A');
}
}
break;
case "INPUT":
el.val(val);
break;
default:
console.log('Dont know how to display "' + val + '"!');
}
}
}
}
}, "json");
};
Any thought is helpful. Thanks in advance.