Mvvm grid json demo problem with ajax

[delebashParticipant]

I am running the gridwithjson mvvm example in this fiddle but it is not working. I suspect it has something to do with ajax not completing. If someone could check and let me know what I am doing wrong or show me how to make sure data has populated the mvvm model before it tries to bind, it would be much appreciated.

Thanks,
Dan

[Peter StoevKeymaster]

Hi Dan,

Cross browser Ajax requests to our server will not work. You can read more about Cross-domain communications here: http://www.ibm.com/developerworks/library/wa-aj-jsonp1/. That is the reason you do not see data. Host the sample data on your own server and you will be able to make Ajax requests.

Best Regards.
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[delebashParticipant]

Thanks, yep wasn’t thinking about CORS just because I was loading a text file versus calling a .asp or php page but its the same result. Thanks for catching that.

[delebashParticipant]

One more question, it does run fine on my own server but it I add a debugger statement after var model = new GridModel(); it fails.

$(document).ready(function () {

var url = “beverages.txt”;

var GridModel = function () {
this.items = ko.observableArray();
var me = this;
$.ajax({
datatype: ‘json’,
url: “beverages.txt”
}).done(function (data) {
var jsonData = $.parseJSON(data);
me.items(jsonData);
});
};

var model = new GridModel();
debugger;
// prepare the data
var source =
{
datatype: “observablearray”,
datafields: [
{ name: ‘name’ },
{ name: ‘type’ },
{ name: ‘calories’, type: ‘int’ },
{ name: ‘totalfat’ },
{ name: ‘protein’ },
],
id: ‘id’,
localdata: model.items
};

var dataAdapter = new $.jqx.dataAdapter(source);

$(“#grid”).jqxGrid(
{
width: 670,
source: dataAdapter,
theme: ‘classic’,
columns: [
{ text: ‘Name’, datafield: ‘name’, width: 250 },
{ text: ‘Beverage Type’, datafield: ‘type’, width: 250 },
{ text: ‘Calories’, datafield: ‘calories’, width: 180 },
{ text: ‘Total Fat’, datafield: ‘totalfat’, width: 120 },
{ text: ‘Protein’, datafield: ‘protein’, minwidth: 120 }
]
});

ko.applyBindings(model);
});

[Author]

Posts