jQuery UI Widgets Forums Grid Cross Domain Requests

This topic contains 6 replies, has 2 voices, and was last updated by  Benji6996 7 years, 2 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • Cross Domain Requests #21567

    Benji6996
    Participant

    I have a grid that fetches its data from a different subdomain on my server (same top level domain).

    E.g. My site is beta.example.com, and my data comes from api.example.com…

    In jQuery, in order to send cookies and credentials etc you need to add the following to an $.ajax call:

    xhrFields: {
    withCredentials: true // Make sure cross domain requests are allowed
    }

    Is there an equivalent for the jqWidgets data adapter/grid? If not, can this be added into the next release?

    Thanks in advance

    Update

    I am not looking for JSONP as this does not send the credentials that I need it to. I must be able to access the cookies from beta.example.com on api.example.com.

    • This topic was modified 7 years, 2 months ago by  Benji6996.
    • This topic was modified 7 years, 2 months ago by  Benji6996.
    • This topic was modified 7 years, 2 months ago by  Benji6996.
    Cross Domain Requests #21575

    Peter Stoev
    Keymaster

    Hi,

    We do not have such setting built-in the jqxDataAdapter, but you may use the jQuery’s Ajax function with it by setting the jqxDataAdapter’s loadServerData callback function. For more information about it and how to implement it, see: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxdataadapter/jquery-data-adapter.htm

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com/

    Cross Domain Requests #21636

    Benji6996
    Participant

    This looks like the perfect solution, thank you!

    I have tried to implement this myself but have run into trouble. Am I missing something?

    Here is my code:

    // Prepare the response data
    var source = {
    datatype: "json",
    datafields: [
    { name: 'reference', map: 'Shipment_Reference' },
    { name: 'date', map: 'Shipment_Date', type: 'date' },
    { name: 'so_reference', map: 'Main_SO_Reference' },
    { name: 'goods_description', map: 'Goods_Description' },
    { name: 'total', map: 'Base_Total', type: 'float' },
    { name: 'buyer_details', map: 'Buyer_Address' },
    { name: 'buyer_reference', map: 'Buyer_Reference' },
    { name: 'terms_of_delivery', map: 'Terms_Of_Delivery' },
    { name: 'bol_date', map: 'Bill_Of_Lading_Date', type: 'date' },
    { name: 'bol_number', map: 'Bill_Of_Lading_Number' }
    ]
    };
    // Get the shipments
    var settings = {
    loadServerData: function(serverdata,source,callback){
    MN.ajax({
    url: '//api.domain.net/documents/?'+query,
    dataType: source.datatype,
    success: function(data){
    console.log(data);
    // Send the data to the data adapter
    callback({ records: data });
    },
    error: function(msg){
    console.log('error');
    }
    });
    }
    };
    // Initialize the data adapter
    var dataAdapter = new $.jqx.dataAdapter(source,settings);
    Cross Domain Requests #21640

    Peter Stoev
    Keymaster

    Hi,

    1. I suppose that the issue here is that “records” is expected to be Array and data is JSON. By default the jqxDataAdapter internally parses the JSON to Array, but as you override the built-in behavior, now you will have to do that manually.

    2. Another solution which I can suggest you is to use jqxDataAdapter and pass your custom query as part of the default data passed to the server i.e you may add “formatdata” callback function to your source object and the result of that function will be passed to the server as data. Your “url” parameter of the source object in that case will be ‘//api.domain.net/documents/’;

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com/

    Cross Domain Requests #21641

    Benji6996
    Participant

    If ‘records’ is meant to be an array, how does it know which fields to map to which values.

    Consider this result structure:

    [{"Shipment_Reference":"","Shipment_Date":"","Buyer_Address":"","Buyer_Reference":"","Main_SO_Reference":"","Base_Total":"","Terms_of_Delivery":"","Bill_Of_Lading_Date":,"Bill_Of_Lading_Number":"","Goods_Description":""}]

    Whereas, in array format it will just be indexed like so and it cannot be multidimensional:

    ["0":"","1":"","2":"","3":"","4":"","5":"","6":"","7":"","8":"","9":""]

    How should I structure my result?

    Update

    Furthermore, ‘data.results’ is actually an array or results. My callback now looks like this:

    callback({ records: data.results, totalrecords: data.rows });
    • This reply was modified 7 years, 2 months ago by  Benji6996.
    • This reply was modified 7 years, 2 months ago by  Benji6996.
    Cross Domain Requests #21648

    Peter Stoev
    Keymaster

    Hi,

    Could you send us a sample based on the provided code which we will be able to test locally? You can send it to support@jqwidgets.com.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com/

    Cross Domain Requests #21650

    Benji6996
    Participant

    Just sent through, thanks Peter 🙂

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

You must be logged in to reply to this topic.