Inline editing code confusions

Inline editing code confusions

AransajaAransaja Posts: 8Questions: 4Answers: 0

I'm trying to apply the inline editing into my project. But I'm still don't understand where to put the Server script and Ajax load. And what about the coding part

        $('#PlanningTable').DataTable({
            dom: "Tfrtip",
            ajax: "../php/staff.php",

do I have to edit anything?

uncaught exception: DataTables Editor - remote hosting of code not allowed. Please see http://editor.datatables.net for details on how to purchase an Editor license
TypeError: $.fn.dataTable.Editor is not a constructor

@model IEnumerable<SchneiderDMS.Models.ProductionOrder>

@{
    ViewBag.Title = "Index";
    //SchneiderDMS.Resources.Resources.ProductionOrders;
}
<!DOCTYPE html>
<html>

<head>
    <title>Selecting Lines</title>
    <link href="~/Content/DataTables-1.10.0/css/jquery.dataTables.css" rel="stylesheet" />
    <link href="~/Content/DataTables-1.10.0/css/dataTables.tableTools.css" rel="stylesheet" />
    <script src="~/Scripts/DataTables-1.10.0/jquery.dataTables.js"></script>
    <script src="~/Scripts/DataTables-1.10.0/dataTables.tableTools.js"></script>
    <script src="~/media/js/dataTables.editor.min.js"></script>
    <link href="~/media/css/dataTables.editor.min.css" rel="stylesheet" />
</head>

    <body>
        <h2>@SchneiderDMS.Resources.Resources.ProductionOrders</h2>

        <p>
            @Html.ActionLink("Create New", "Create")
        </p>
        <table id="PlanningTable" class="display" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>@Html.DisplayNameFor(model => model.Priority)</th>
                    <th>@Html.DisplayNameFor(model => model.ProductionOrderNumber)</th>
                    <th>@Html.DisplayNameFor(model => model.SalesOrder.Product.ProductGroup.Name)</th>
                    <th>@Html.DisplayNameFor(model => model.SalesOrder.Product.ProductName)</th>
                    <th>@Html.DisplayNameFor(model => model.Quantity)</th>
                    <th>@Html.DisplayNameFor(model => model.Line.Name)</th>
                    <th>@Html.DisplayNameFor(model => model.ProductionOrderStatu.Name)</th>
                    <th>@Html.DisplayNameFor(model => model.SalesOrder.SalesOrderNumber)</th>
                    <th>@Html.DisplayNameFor(model => model.SalesOrder.ItemNumber)</th>
                    <th>@Html.DisplayNameFor(model => model.SalesOrder.SalesOrderType1.Name)</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model)
                {
                    <tr>
                        <td>@item.Priority</td>
                        <td>@item.ProductionOrderNumber</td>
                        <td>@item.SalesOrder.Product.ProductGroup.Name</td>
                        <td>@item.SalesOrder.Product.ProductName</td>
                        <td>@item.Quantity</td>
                        <td>@item.Line.Name</td>
                        <td>@item.ProductionOrderStatu.Name</td>
                        <td>@item.SalesOrder.SalesOrderNumber</td>
                        <td>@item.SalesOrder.ItemNumber</td>
                        <td>@item.SalesOrder.SalesOrderType1.Name</td>
                    </tr>
                }
            </tbody>
        </table>
    </body>
</html>
    var editor; // use a global for the submit and return data rendering in the examples

    $(document).ready(function () {
        editor = new $.fn.dataTable.Editor({
            table: "#PlanningTable",
            fields: [{
                label: "Priority:",
                name: "Priority"
            }, {
                label: "Line Name:",
                name: "LineName"
            }, 
            ]
        });

        // Activate an inline edit on click of a table cell
        $('#PlanningTable').on('click', 'tbody td:not(:first-child)', function (e) {
            editor.inline(this);
        });

        $('#PlanningTable').DataTable({
            dom: "Tfrtip",
            ajax: "../php/staff.php",
            columns: [
                { data: null, defaultContent: '', orderable: false },
                { data: "Priority" },
                { data: "ProductionOrderNo" },
                { data: "ProductGroup" },
                { data: "ProductName" },
                { data: "Quantity" },
                { data: "LineName" },
                { data: "OrderStatus" },
                { data: "SalesOrderNo" },
                { data: "ItemNo" },
                { data: "TypeOfOrder" },
            ],
            order: [1, 'asc'],
            tableTools: {
                sRowSelect: "os",
                sRowSelector: 'td:first-child',
                aButtons: [
                    { sExtends: "editor_create", editor: editor },
                    { sExtends: "editor_edit", editor: editor },
                    { sExtends: "editor_remove", editor: editor }
                ]
            }
        });
    });

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 63,364Questions: 1Answers: 10,449 Site admin

    Hi,

    The error you report suggests that the Editor script from editor.datatables.net is being used rather than the trial script. Are you able to confirm if that is the case? I'd suggest using the trial version of Editor which resolve that error.

    Regards,
    Allan

  • AransajaAransaja Posts: 8Questions: 4Answers: 0

    It didn't helped I got more errors now

    The connection to ws://localhost:46238/45d522ca86a34e5fa9665bc43d0fdc41/arterySignalR/connect?transport=webSockets&connectionToken=AQAAANCMnd8BFdERjHoAwE%2FCl%2BsBAAAA7%2BfYoR3rlECQUM8i1HLrcgAAAAACAAAAAAAQZgAAAAEAACAAAACxq%2FRJlhR8Fu2Li979YkyuksCU8DOxWYV3VzpuzP%2BE%2BgAAAAAOgAAAAAIAACAAAAAwqkI9vfSaBshtBexAcqQUXzVBlG%2FFOizmmPzklKid3zAAAAC6V8e9AWAMl72Q49trV3cfxYAQQb5HPXQykiwXu8GSd%2Fwkn%2BK2I%2BLMriC7Z%2F4haahAAAAAjwrc%2B9OScF3UpfkaINqeh2ejRrBd8C7LeDzcQrBr4YxJbR4GcNa7eg3%2FvLzBeReaOc%2BlItRsaXfBxUku9YOUbQ%3D%3D&requestUrl=http%3A%2F%2Flocalhost%3A49547%2FProductionOrders%2FIndex&browserName=Firefox&tid=0 was interrupted while the page was loading. browserLink:62
    no element found abort:1
    uncaught exception: DataTables Editor - remote hosting of code not allowed. Please see http://editor.datatables.net for details on how to purchase an Editor license
    TypeError: $.fn.dataTable.Editor is not a constructor Index:308
    Use of getPreventDefault() is deprecated. Use defaultPrevented instead.

  • allanallan Posts: 63,364Questions: 1Answers: 10,449 Site admin

    The error still suggests that the code from this site is being used, rather than the trial code. Can you link me to the page so I can take a look?

    Allan

  • AransajaAransaja Posts: 8Questions: 4Answers: 0

    Hey Allan I don't have the link to the page yet

  • AransajaAransaja Posts: 8Questions: 4Answers: 0

    I'm a newbie

  • allanallan Posts: 63,364Questions: 1Answers: 10,449 Site admin
    Answer ✓

    I'm afraid that without a link so I can debug the problem there isn't much further help that I can offer as I don't know what is going wrong.

    Allan

  • yhangel.07yhangel.07 Posts: 2Questions: 1Answers: 0
    edited January 2015

    i have the same confusion, should i edit the line
    ajax: "../php/staff.php",

    what should i put here?
    my table isn't showing up

    and where should i place the AJAX load and AJAX DATA??

  • allanallan Posts: 63,364Questions: 1Answers: 10,449 Site admin

    @yhangel.07 - You would change the ajax address to whatever the URL is for where you want DataTables (and also possibly Editor) to make the Ajax request to get the data.

    Allan

  • DivayshreeDivayshree Posts: 1Questions: 0Answers: 0

    Hi Allan,

    I was trying to implement the Inline editing code into the Datatable by downloading dataTables.editor.js and dataTables.editor.css into my local, but still I am not able to make a editor call, getting undefined error. Please suggest!!
    editor = new $.fn.dataTable.Editor( {});

    <link href="<c:url value='/resources/css/dataTables.editor.css' />" rel='stylesheet'>
    ">

  • allanallan Posts: 63,364Questions: 1Answers: 10,449 Site admin

    That error suggests that the Editor file has not been included, or possibly you have included multiple versions of jQuery.

    If you can give me a link to the page so I can check it, I would be able to confirm which.

    Allan

This discussion has been closed.