jQuery UI Widgets Forums Grid JSON data from external REST service

This topic contains 4 replies, has 4 voices, and was last updated by  technonaga 11 years, 11 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • JSON data from external REST service #1854

    larsm
    Member

    Hi, I’m currently testing out your Widgets, and has come across an issue, I need some advise.

    I’ve been looking at your JSON sample for the datagrid, with a local JSON file as DataSource. If I replace the local JSON-file in the URL with a link to a live REST service with JSON response format, I get nothing in the datagrid.

    I guess this is because I’m rendering the datagrid before the data is back, and I will be able to fix this by loading data first, and either locally store it as JSON and then link it, alternatively create an array.

    I’m sure there is a more clever way of doing this directly between the url-property on the Grid and the live JSON feed.

    Below is some working code, with the local url that works, and the remote one that doesn’t (it works in a browser, with the same JSON)

    Thanks
    LarsM

    ……..

    $(document).ready(function () {

    var url = “json.txt”; //working
    var url = “http://myservice/jsontest/service1”; //not working

    var source =
    {
    datatype: “json”,
    datafields: [
    { name: ‘Id’ },
    { name: ‘StringValue’ },
    ],
    id: ‘Id’,
    url: url
    };
    $(“#jqxgrid”).jqxGrid(
    {
    source: source,
    sortable:true,
    columns: [
    { text: ‘Key’, datafield: ‘Id’, width: 50 },
    { text: ‘Value’, datafield: ‘StringValue’, width: 250 }
    ]
    });
    });

    JSON data from external REST service #1855

    rafi
    Participant

    According to me, the problem is that the data is not in the same domain as your web page is and you are trying to make a cross-domain call. For security reasons, modern browsers do not allow access across domains. This means, that both the web page and the JSON file it tries to load, must be located on the same server.

    JSON data from external REST service #1868

    support
    Participant

    Hi LarsM and rafi,

    Basically, after the data is loaded into the Grid, it automatically renders the data records. However, If you are trying to request data from a different domain, the Grid will not be populated with data. This is due to the browser’s same-origin policy. The same-origin policy prevents a script loaded from one domain from getting or manipulating properties of a document from another domain. That is, the domain of the requested URL must be the same as the domain of the current Web page. This means that the browser isolates content from different origins to guard them against manipulation. In order to load JSON data located on another domain, we should use JSONP. Binding using JSONP will be supported in the next version and I will also post a link to an example in this thread when the feature is implemented.

    Please feel free to write us, if you have any additional questions.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    JSON data from external REST service #1869

    larsm
    Member

    Of course – thanks for clarifying.

    I did get it to work across domain using JSONP and a local Array (see code below), but it didn’t strike me that the built in method was having this issue.

    Looking forward to the new JSONP support…

    /LM

    $(document).ready(function ()
    {
    var url = ‘http://my-service/jsontest/service1?callback=?’;
    $.getJSON(url, null, function (jsondata)
    {
    var data = new Array();
    for (var i = 0; i < jsondata.length – 1; i++)
    {
    var row = {};
    row["Id"] = jsondata[i].Id;
    row["StringValue"] = jsondata[i].StringValue;
    data[i] = row;
    }

    var source =
    {
    data: data,
    datatype: "array"
    };

    $("#jqxgrid").jqxGrid(
    {
    source: source,
    sortable: true,
    columns:
    [
    { text: 'Key', datafield: 'Id', width: 50 },
    { text: 'Value', datafield: 'StringValue', width: 250 }
    ]
    });
    });
    });


    technonaga
    Member

    Hi Larsm,

    I have developed the service code with jqxgrid . Please, Try this code , It will be surely useful to you.

    $(document).ready(function () {
    //URL to the service
    url = “http://192.168.0.10/HTML5Service/loginservice.svc/getContacts”,

    //Initializing the source property
    source = {
    datatype: “json”,
    datafields: [
    { name: ‘RespondentId’ },
    { name: ‘ParentRespondentId’ },
    { name: ‘101’ },
    { name: ‘102’},
    { name: ‘1’},
    { name: ‘1780’},
    { name: ‘1780_AnswerID’},
    { name: ‘1945’},
    { name: ‘1945_AnswerID’},
    { name: ‘17892’},
    { name: ‘17891’},
    { name: ‘17890’},
    { name: ‘1777’},
    { name: ‘3207’},
    { name: ‘RecordRights’},
    { name: ‘DeleteMsg’}
    ]
    };

    //Getting the source data with ajax GET request
    var getValue;
    $.ajax({
    type: ‘POST’,
    dataType: ‘json’,
    async: false,
    url: ‘http://192.168.0.10/HTML5Service/loginservice.svc/getContacts‘,
    data:'{}’,
    cache: false,
    contentType: ‘application/json; charset=utf-8’,
    success: function (data) {
    alert(data.getContactsResult);
    source.localdata = data.getContactsResult;

    },
    error: function (err) {
    alert(‘Error’);
    }
    });

    //Preparing the data for use
    var dataAdapter = new $.jqx.dataAdapter(source);

    $(“#jqxgrid”).jqxGrid({
    source: dataAdapter,
    width:300,
    height:300,
    theme: ”,
    columns: [
    { text: ‘RespondentId’, datafield: ‘RespondentId’, width: 50 },
    { text: ‘ParentRespondentId’, datafield: ‘ParentRespondentId’, width: 50 },
    { text: ‘Contact Type’, datafield: ‘101’, width: 50 },
    { text: ‘Contact Status’,datafield:’102′, width: 50},
    { text: ‘Address’, datafield:’1′, width:50},
    { text: ‘Email’, datafield:’1780′, width:100},
    { text: ‘EmailAns’, datafield:’1780_AnswerID’, width:100},
    { text: ‘EConty’, datafield:’17891′, width:100},
    { text: ‘EContys’, datafield:’17890′, width:100},
    { text: ‘EFirst’, datafield:’1777′, width:100},
    { text: ‘ELast’, datafield:’3207′, width:100}
    ]
    });

    });

    Happy Coding !!!

    Regards,
    Naga

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.