Using API call that I have instead fot a database using Generator ?

samsamtest

Using API call that I have instead fot a database using Generator ?
Is that posible...

Kund Regards
Sam

allan

I'm afraid I don't understand what you are looking for here. Could you elaborate a bit please?

Thanks,
Allan

samsamtest

OO sorry, If now I want to use a Post (API )call and get the data to a datable that I have created on Generator. Is that easy to do. ?

allan

POST rather than GET? Yes, you can send a POST request as show in this example.

Allan

samsamtest

HI,
I have been successful to get data to my tables from database mssql.

But I don't understand how I can add a Get and**** Post API call so it can show on the table to.
Is it posible to get an example how I can do that ?

Thanks,
Kind Regards
Sam

samsamtest

API = Rest API

allan

DataTables will do a GET by default and Editor a POST by defailt. If you want to use different verbs, this example shows how it can be done.

Allan

samsamtest

Hi, okay thanks.
I don't understand where should I add the** Rest URL** where ?
I have used the generator to create the file.

Kinde Regards
Sam

allan

You need to modify the table.{name}.js file that Generator created. ajax has the full reference documentation for the Editor Ajax options.

Allan

samsamtest

HI thanks,
I have tried to change that file.
The problem is that it still get the data from the db..
Is some ready code example that I can check ?
Thanks.
Kind Regards
Sam

allan

I gave an example link above. Can you show me your code or even better, give me a link to the page showing the issue so I can help debug it?

Allan

samsamtest

Hi Thanks,
I was able to solve it.
I hade to add a Content-Length

$('#example').DataTable( {
                    "dom": "Bfrtip",
               "ajax" : {
               "url" : "http:????/api",
               "dataSrc" : "",
               "Content-Length" : "9119989"
            },

It works now :-)

I have another question. Edit buttons docent work I am geting this error:
dataTables.editor.min.js:10 Uncaught Unable to find row identifier For more information, please refer to https://datatables.net/tn/14

This is the code am I missing something ?

$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        ajax: {
            create: {
                type: 'POST',
                url:  'http:????/api'
            },
            edit: {
                type: 'POST',
                url:  'http:????/api'
            },
            remove: {
                type: 'DELETE',
                url:  '../php/rest/remove.php?id=_id_'
            }
        },

Kind Regards
Sam

allan

If you don't have a DT_RowId property in your JSON data source you need to use the idSrc option to tell Editor which property to find the id in. This example shows that.

Allan

samsamtest

Wow thanks, it works now :-)
I am now getting a 400 problem.
But hopefully I will solve it.
I guess I need to add the JSON parameter in edit something like this ore am I wrong ?

        ajax: {
            create: {
                type: 'POST',
                url:  "http://a/CustomerSvc/REST/AddCustomer/demo",
                       "dataSrc" : "CustomerNo",
       "Content-Length" : "9119989"
            },
            edit: {
                type : 'POST',
                url :  "http://a/CustomerSvc/REST/UpdateCustomer/demo",
                 dataType: 'JSON',
                dataSrc : "",

                columns: [

            { "data": "CustomerNo" },
            { "data": "Name" },
            { "data": "Street" },
            { "data": "ZipCity" },
            { "data": "CountryId" },
            { "data": "Phone" },
            { "data": "SellerId" },
            { "data": "OpenAmount" }
        ],

            },


            remove: {
                type: 'DELETE',
                url:  '../php/rest/remove.php?id=_id_',
                       "dataSrc" : "",
       "Content-Length" : "9119989"
            }
        },

allan

A 400 return indicates a bad request. Perhaps it isn't sending something that the server is expecting? What does the server-side need?

Allan

samsamtest

Hi, hanks for the help. When I want to post I need to send something like this.
How can I add this to the code ?

// Request (2) (POST http://a/CustomerSvc/REST/UpdateCustomer/demo)

jQuery.ajax({
    url: "http://a//CustomerSvc/REST/UpdateCustomer/demo",
    type: "POST",
    headers: {
        "Content-Type": "application/json; charset=utf-8",
    },
    contentType: "application/json",
    data: JSON.stringify({
        "Street": "Teststettnane",
        "CustomerNo": "1008079",
        "Phone": "4",
        "OpenAmount": "0",
        "ZipCity": "3",
        "Name": "Doe",
        "CountryId": "SE",
        "SellerId": "2"
    })
})
.done(function(data, textStatus, jqXHR) {
    console.log("HTTP Request Succeeded: " + jqXHR.status);
    console.log(data);
})
.fail(function(jqXHR, textStatus, errorThrown) {
    console.log("HTTP Request Failed");
})
.always(function() {
    /* ... */
});

I did try this to, but it dose not work, still the same error.

                            edit: {
                                type : 'POST',
                                url :  "http://a//CustomerSvc/REST/UpdateCustomer/demo",
                                 dataType: 'JSON',

                               fields: [
                        { label: "CustomerNo:", name: "CustomerNo" },
                        { label: "Name:",  name: "Name" },
                        { label: "Street:", name: "Street" },
                        { label: "ZipCity:", name: "ZipCity" },
                        { label: "CountryId:", name: "CountryId" },
                        { label: "Phone:", name: "Phone" },
                        { label: "CountryId:", name: "CountryId" },
                        { label: "SellerId:", name: "SellerId" },
                        { label: "OpenAmount:", name: "OpenAmount" }

                    ],
                            },

samsamtest

I am getting now a 405 instead

allan

I had to look that one up - couldn't rember a 405! Its "The method specificed is not allow". So your server isn't expecting a POST to .../demo (or whichever action URL it is that is triggering that error).

Allan

samsamtest

Hi Allen, Thanks for helping me.

I have tried all day yesterday to fix this bit getting error still. I paused in the edit and went to create a post signal and get back information that I sent. Bit I either get 405 ore 400 error..

These first codes are done on a API program that I ca test that it works.

The code after are the ones that I have done and getting the errors..

** Code for send a update field from edit button. **
// Request (2) (POST http://a/CustomerSvc/REST/UpdateCustomer/demo)

jQuery.ajax({
    url: "http://a//CustomerSvc/REST/UpdateCustomer/demo",
    type: "POST",
    headers: {
        "Content-Type": "application/json; charset=utf-8",
    },
    contentType: "application/json",
    data: JSON.stringify({
        "Street": "Teststettnane",
        "CustomerNo": "1008079",
        "Phone": "4",
        "OpenAmount": "0",
        "ZipCity": "3",
        "Name": "Doe",
        "CountryId": "SE",
        "SellerId": "2"
    })
})
.done(function(data, textStatus, jqXHR) {
    console.log("HTTP Request Succeeded: " + jqXHR.status);
    console.log(data);
})
.fail(function(jqXHR, textStatus, errorThrown) {
    console.log("HTTP Request Failed");
})
.always(function() {
    /* ... */
});

** // This is when I want send values and get certain data back.
Request (POST http://adress/v2/BPOrderSvc/REST/GetOrderList/demo)
**

jQuery.ajax({
    url: "http://adress/v2/BPOrderSvc/REST/GetOrderList/demo",
    type: "POST",
    headers: {
        "Content-Type": "application/json; charset=utf-8",
    },
    contentType: "application/json",
    data: JSON.stringify({
        "WithRows": true,
        "Index": 1,
        "Range": "000000;ZZZZZZZ",
        "IndexCount": 0,
        "OGRFilter": "LVF!=9",
        "Filter": ""
    })
})
.done(function(data, textStatus, jqXHR) {
    console.log("HTTP Request Succeeded: " + jqXHR.status);
    console.log(data);
})
.fail(function(jqXHR, textStatus, errorThrown) {
    console.log("HTTP Request Failed");
})
.always(function() {
    /* ... */
});

---

This is when I try to add it to datatbles and get an error to send a body post request.

        var table = $('#p3').DataTable( {
            "dom": "Bfrtip",

           ajax: {
            url: "http://Adress/v2/BPOrderSvc/REST/GetOrderList/demo",
            type: "POST",


                    "fileds": function ( d ) {
                   d.WithRows = "true";
                   d.Index = "1";
                   d.Range = "000000;ZZZZZZZ";
                   d.myKey = "0";
                   d.OGRFilter = "LVF!=9";
                   d.Filter = "";



     },
        },

            columns: [

                { "data": "CustomerNo" },
                { "data": "Name" }
            ],
            select: true,
            lengthChange: false,
            buttons: [
                { extend: 'create', editor: editor },
                { extend: 'edit',   editor: editor },
                { extend: 'remove', editor: editor }
            ]
        } );
    } );

    }(jQuery)); 

This when I try to set up the edit button and get an error.

    editor = new $.fn.dataTable.Editor( {
                       idSrc : "CustomerNo",

        ajax: {
            create: {
                type: 'POST',
                url:  "http://Adress/CustomerSvc/REST/AddCustomer/demo",
                       "dataSrc" : "CustomerNo",
       "Content-Length" : "9119989"
            },
            edit: {
               "type" : "POST",
               "url" :  "http://Adress/GIS/CustomerSvc/REST/UpdateCustomer/demo",
               "contentType": "application/json",
               "column": [

     { "data": "CustomerNo" },
     { "data": "Name" },
     { "data": "Street" },
     { "data": "ZipCity" },
     { "data": "CountryId" },
     { "data": "Phone" },
     { "data": "SellerId" },
     { "data": "OpenAmount" }
 ],            },


            remove: {
                type: 'DELETE',
                url:  '../php/rest/remove.php?id=_id_',
                       "dataSrc" : "",
       "Content-Length" : "9119989"
            }
        },

allan

Okay - so your jQuery Ajax calls have a few differences. For example it uses:

    headers: {
        "Content-Type": "application/json; charset=utf-8",
    },
    contentType: "application/json",
    data: JSON.stringify({

In Editor the equivilent would be:

    headers: {
        "Content-Type": "application/json; charset=utf-8",
    },
    contentType: "application/json",
    data: function ( d ) {
      return JSON.stringify(d);
    }

Note the use of ajax.data as a function. That is to allow Editor to add its properties to the object rather than just having a static object.

Allan

samsamtest

thanks,
I am still getting 405 error..

samsamtest

Hi the api dosent support
f(isset($_SERVER['HTTP_ORIGIN'])){
header("Access-Control-Allow-Origin: " . $_SERVER['HTTP_ORIGIN'] . "");

    // add any additional headers you need to support here
        header('Access-Control-Allow-Headers: Origin, Content-Type');
    }

Can I disable this from the DataTables or do I need to add it the API

allan

I'm afraid I don't understand. That's PHP code - I'm not clear on how that effects the API.

The key here is to figure out the difference between your working jQuery call and your not working DataTables configuration. Can you show me the two now that you've updated it?

Allan

samsamtest

Hi okay,
**So this is my code for datable:
**

/*
 * Editor client script for DB table example
 * Created by http://editor.datatables.net/generator
 */

(function($){

$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
                       idSrc : "CustomerNo",

        ajax: {
            create: {
                type: 'POST',
                url:  ""
            },
            edit: {
               "type" : "POST",
               "url" :  ""  
              },


            remove: {
                type: 'DELETE',
                url:  ''
                                  }
        },
        table: '#p3',
        fields: [
            {
                "label": "CustomerNo:",
                "name": "CustomerNo"
            },
            {
                "label": "Name:",
                "name": "Name"
            }
        ]
    } );

    var table = $('#p3').DataTable( {
        "dom": "Bfrtip",

       ajax: {
        data: { "Filter": "LEF==0", "index" : 1, "IndexCount":0, "Range":"", "OGRFilter": "","WithRows": false},     
        dataType: "json",
       "url": "http://IPadress/v2/BPOrderSvc/REST/GetOrderListByFile/demo",
       "dataSrc" : "",
       "Content-Length" : "9119989",
       "type": "POST",
       headers: {
                "Content-Type": "application/json; charset=utf-8",
            },
            contentType: "application/json",
            headers: {
    "Content-Type": "application/json; charset=utf-8",
},
contentType: "application/json",
data: function ( d ) {
  return JSON.stringify(d);
}




    },
        columns: [

            { "data": "OrderNo" },
            { "data": "OurReferenceName" }
        ],
        select: true,
        lengthChange: false,
        buttons: [
            { extend: 'create', editor: editor },
            { extend: 'edit',   editor: editor },
            { extend: 'remove', editor: editor }
        ]
    } );
} );

}(jQuery)); 

**And this is the working code:
**
<?php

// get cURL resource
$ch = curl_init();

// set url
curl_setopt($ch, CURLOPT_URL, 'http://APiadress/v2/BPOrderSvc/REST/GetOrderListByFile/demo');

// set method
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'POST');

// return the transfer as a string
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

// set headers
curl_setopt($ch, CURLOPT_HTTPHEADER, [
  'Content-Type: application/json',
]);

// json body
$json_array = [
  'WithRows' => true,
  'Index' => 1,
  'Range' => '',
  'IndexCount' => 0,
  'OGRFilter' => '',
  'Filter' => 'LEF==0'
]; 
$body = json_encode($json_array);

// set body
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, $body);

// send the request and save response to $response
$response = curl_exec($ch);

// stop if fails
if (!$response) {
  die('Error: "' . curl_error($ch) . '" - Code: ' . curl_errno($ch));
}

echo 'HTTP Status Code: ' . curl_getinfo($ch, CURLINFO_HTTP_CODE) . PHP_EOL;
echo 'Response Body: ' . $response . PHP_EOL;

// close curl resource to free up system resources 
curl_close($ch);

samsamtest

I am basically trying to change etc but still no luck

allan

I don't see the header information or anything else configured in the ajax configuration. You have it for the DataTable Ajax configuration, but not Editor. You'd need to add it to each of the create/edit/remove options as well since Editor's Ajax call is separate from DataTables'.

Allan

samsamtest

Hi sorry I don't under stand, In this case I am not going to use the edit delete and update.. If I don't fill that in dose it mean that the post won't function ?

samsamtest

Maybe I should use curl instead ? what do you think ?

samsamtest

ON Firefox I get this error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http:/my/adress/v2/BPOrderSvc/REST/GetOrderListByFile/demo. (Reason: CORS preflight channel did not succeed)

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://my/adress/v2/BPOrderSvc/REST/GetOrderListByFile/demo. (Reason: CORS request did not succeed)

allan

In your Editor configuration it should contain:

edit: {
    url: "...."
    type: "POST",
    headers: {
        "Content-Type": "application/json; charset=utf-8",
    },
    contentType: "application/json",

    data: function(d) {
        return JSON.stringify(d);
    }
},

Likewise for create.

Allan

samsamtest

Hi so after some testing I now that the API docent accept Client Side.
what do I add if the signal needs to go server side and where do I and the "crossDomain": true, and "processData": false,.