Consume WCF crossdomain using JSONP to store in datagrid and view data dojo?

Question

I can't find this anywhere and i don't know why the cross domain REST request is not solved by dojo. anyways here is the problem:

I am implementing dojo data-grid, and i am trying to get the data for the grid from a WCF that is not in my domain, so i crossdomain problem is raised and i am trying to over come this problem by using JSONP.

but i am a newbie in dojo so i am probably doing something wrong. here is my code:

require([
         "dojo/store/JsonRest",
         "dojo/store/Memory",
         "dojo/store/Cache",
         "dojox/grid/DataGrid",
         "dojo/data/ObjectStore",
         "dojo/query",
         "dijit/form/Button",
         "dojo/domReady!",
         "dojo/request/script","dojo/dom-construct"
     ],function(script, domConstruct){

  //make the request just as before
  script.get("http://localhost:8060/ListService.svc/LoadLists?uid=c4446476-15e6-e111-9ecb-b7c5971d170a", {
    jsonp: "callback",
    query: {q: "#dojo"}
   }).then(function(data){
        test = data;         
    }).then(function(){
     console.log(results);
    });
 }, function (JsonRest, Memory, Cache, DataGrid, ObjectStore ,query) {

         grid = new DataGrid({
             store: dataStore = test,

             structure: [
                 { name: "Blog Id", field: "id", width: "50px", },
                 { name: "Name", field: "listtype", width: "200px",classes:"Name" },
                 { name: "Phone Number", field: "longlevel", width: "200px",classes:"test" }
             ]
         }, "gridTest"); // make sure you have a target HTML element with this id

         grid.startup();

         dojo.query("body").addClass("claro");

         grid.canSort = function () { return false; };


     });

the error i am getting is query is not a function. any ideas how to implement this correctly.

Answer 1

Simple mistake just put the data grid command inside the first then with the data returning

require([
         "dojo/store/JsonRest",
         "dojo/store/Memory",
         "dojo/store/Cache",
         "dojox/grid/DataGrid",
         "dojo/data/ObjectStore",
         "dojo/query",
         "dijit/form/Button",
         "dojo/domReady!",
         "dojo/request/script","dojo/dom-construct"
     ],function(script, domConstruct){

  //make the request just as before
  script.get("http://localhost:8060/ListService.svc/LoadLists?uid=c4446476-15e6-e111-9ecb-b7c5971d170a", {
    jsonp: "callback",
    query: {q: "#dojo"}
   }).then(function(data){
       function (JsonRest, Memory, Cache, DataGrid, ObjectStore ,query) {

         grid = new DataGrid({
             store: dataStore = test,

             structure: [
                 { name: "Blog Id", field: "id", width: "50px", },
                 { name: "Name", field: "listtype", width: "200px",classes:"Name" },
                 { name: "Phone Number", field: "longlevel", width: "200px",classes:"test" }
             ]
         }, "gridTest"); // make sure you have a target HTML element with this id

         grid.startup();

         dojo.query("body").addClass("claro");

         grid.canSort = function () { return false; };


     })        
    }).then(function(){
     console.log(results);
    });
 };

If you still find a problem probably because the grid is created before the request is returning from the wcf.

if that happened please use the Deferred in dojo 1.8 which make you in control of you processes sequence.

so you will be able to call the request give it some time and then put the data in the grid to be viewed.