I am developing a CRUD app where i navigate from the page that display tables of my data to some forms to add or edit those data. i wanna, for example, when i add some data and navigate to the table page to show the new row added.
what i am using now is a refresh button that fetch again the data and insert it in the observable array.
here how i navigate to the tab when click submit:
$.ajax({
url: url +'/customer',
type: "POST",
data: JSON.stringify(dataObj),
contentType: 'application/json',
success: function (response) {
console.log(response);
},
error: function(error){
console.log("Something went wrong", error);
}
}).then(function () {
oj.Router.rootInstance.go("customers");
return true;
})
and this is the refresh action that i use now:
self.customerData = function (){
tempArray = [];
$.getJSON(url + "/customer").
then(function(tasks){
$.each(tasks, function (){
tempArray.push({
customerId: this._id,
name: this.name,
address: this.address,
email: this.email,
phone: this.phone,
area: this.area,
empNum: this.empNum,
sector: this.sector,
website: this.website,
facebook: this.facebook,
linkedin: this.linkedin,
activity: this.activity.name,
country: this.country.name
});
});
var auxTab =[];
for (var i =0; i<tempArray.length; i++)
{
var obj ={};
obj.customerId = i;
obj.name = tempArray[i].name;
obj.address = tempArray[i].address;
obj.email= tempArray[i].email;
obj.phone = tempArray[i].phone;
obj.area = tempArray[i].area;
obj.empNum = tempArray[i].empNum;
obj.website = tempArray[i].website;
obj.facebook = tempArray[i].facebook;
obj.linkedin = tempArray[i].linkedin;
obj.activity = tempArray[i].activity;
obj.country = tempArray[i].country;
if (tempArray[i].sector === 'true')
{
obj.sector = 'Public';
}
else
{
obj.sector = 'Private';
}
auxTab[i] = obj;
}
self.customerArray(auxTab);
});
};
self.refreshClick = function(event){
self.customerData();
return true;
}
i expect the row will be automatically shown when i navigate to the customer tab tab but it doesn't.
Why not simply call the customerData() method inside connected() function? This function is automatically invoked(if you have defined it) from the viewModel when a new html page is rendered.
Place this inside your ViewModel which has table data:
self.connected = function(){
self.customerData();
};
For more details, see the docs.
Note: The connected function is used in version 6 and beyond. Before that the function was called bindingsApplied.