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

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

samsamtestsamsamtest Posts: 28Questions: 5Answers: 1

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

Kund Regards
Sam

This question has accepted answers - jump to:

«1

Answers

  • allanallan Posts: 47,749Questions: 1Answers: 6,824 Site admin

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

    Thanks,
    Allan

  • samsamtestsamsamtest Posts: 28Questions: 5Answers: 1

    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. ?

  • allanallan Posts: 47,749Questions: 1Answers: 6,824 Site admin

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

    Allan

  • samsamtestsamsamtest Posts: 28Questions: 5Answers: 1

    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

  • samsamtestsamsamtest Posts: 28Questions: 5Answers: 1
    edited July 4

    API = Rest API :smile:

  • allanallan Posts: 47,749Questions: 1Answers: 6,824 Site admin

    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

  • samsamtestsamsamtest Posts: 28Questions: 5Answers: 1
    edited July 4

    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

  • allanallan Posts: 47,749Questions: 1Answers: 6,824 Site admin
    Answer ✓

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

    Allan

  • samsamtestsamsamtest Posts: 28Questions: 5Answers: 1

    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

  • allanallan Posts: 47,749Questions: 1Answers: 6,824 Site admin

    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

  • samsamtestsamsamtest Posts: 28Questions: 5Answers: 1
    Answer ✓

    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

  • allanallan Posts: 47,749Questions: 1Answers: 6,824 Site admin
    Answer ✓

    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

  • samsamtestsamsamtest Posts: 28Questions: 5Answers: 1
    edited July 9

    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"
                }
            },
    
  • allanallan Posts: 47,749Questions: 1Answers: 6,824 Site admin

    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

  • samsamtestsamsamtest Posts: 28Questions: 5Answers: 1

    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" }
    
                        ],
                                },
    
  • samsamtestsamsamtest Posts: 28Questions: 5Answers: 1

    I am getting now a 405 instead

  • allanallan Posts: 47,749Questions: 1Answers: 6,824 Site admin

    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

  • samsamtestsamsamtest Posts: 28Questions: 5Answers: 1

    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"
                }
            },
    
  • allanallan Posts: 47,749Questions: 1Answers: 6,824 Site admin

    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

  • samsamtestsamsamtest Posts: 28Questions: 5Answers: 1

    thanks,
    I am still getting 405 error..

  • samsamtestsamsamtest Posts: 28Questions: 5Answers: 1
    edited July 11

    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

  • allanallan Posts: 47,749Questions: 1Answers: 6,824 Site admin

    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

  • samsamtestsamsamtest Posts: 28Questions: 5Answers: 1

    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);
    
  • samsamtestsamsamtest Posts: 28Questions: 5Answers: 1
    edited July 12

    I am basically trying to change etc but still no luck

  • allanallan Posts: 47,749Questions: 1Answers: 6,824 Site admin

    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

  • samsamtestsamsamtest Posts: 28Questions: 5Answers: 1

    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 ?

  • samsamtestsamsamtest Posts: 28Questions: 5Answers: 1
    edited July 12

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

  • samsamtestsamsamtest Posts: 28Questions: 5Answers: 1
    edited July 12

    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)

  • allanallan Posts: 47,749Questions: 1Answers: 6,824 Site admin
    edited July 13

    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

  • samsamtestsamsamtest Posts: 28Questions: 5Answers: 1

    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,.

Sign In or Register to comment.