Unable to assign ID to Standalone Inline Editor

SchautDollar

Hello,

I am struggling to assign an ID to an inline editor instance.

The documentation says that the first argument of "edit" will assign that value as the id for edited dataset.

Standalone editing - Not required. Standalone editing cannot use multiple form sources like DataTables editing, a single Editor instance refers to a single configuration set in the database, so this option is not required, however, it can still be provided to give identification information to the server. Whatever value is given here will be passed to the server as the id parameter. Use null if you want to provide the other parameters (show and options) and do not require a value to be given.

Error:

Uncaught Could not find an element with data-editor-id or id of:

Current Version:

DataTables 1.10.18, Editor 1.9.0

Editor Code:

editorCalendarOverview = new $.fn.dataTable.Editor({
        ajax: {
            url: "/editable/ScheduledJobGeneration",
            type: "POST"
        },
        formOptions: {
            main: {
                onBackground: false
            }
        },
        serverSide: true,
        fields: [
            {
                label:"Route",
                name:"scheduled_job_generation.route_id",
                type:"select2",
                opts:{
                    "allowClear": true,
                    "placeholder": ""
            },
                options: $.map(routesData, function (obj) {
                    obj.value = obj.id;
                    obj.label = obj.text;
                    return obj;
                })
            }, {
                label:"Include Subscriptions",
                name:"scheduled_job_generation.include_subscriptions",
                type:"select2",
                options:[
                    {label:"Include", value: "1"},
                    {label:"Ignore", value: "0" }
                ],
                def:1
            }, {
                label:"Subscriptions",
                name:"scheduled_job_generation.subscriptions",
                type:"select2",
                opts:{"multiple": true},
                separator:",",
                options: $.map(subscriptionsData, function (obj) {
                    obj.value = obj.id;
                    obj.label = obj.text;
                    return obj;
                })
            }, {
                label:"Include Rack Cards",
                name:"scheduled_job_generation.include_rack_cards",
                type:"select2", options:[
                    {label:"Include", value: "1"},
                    {label:"Ignore", value: "0" }
                ],
                def:1
            }, {
                label:"Rack Cards",
                name:"scheduled_job_generation.rack_cards",
                type:"select2",
                opts:{"multiple": true},
                separator:",",
                options: $.map(rackCardsData, function (obj) {
                    obj.value = obj.id;
                    obj.label = obj.text;
                    return obj;
                })
            }, {
                label:"Drop Points",
                name:"scheduled_job_generation.drop_points",
                type:"select2",
                opts:{"multiple": true},
                separator:",",
                options: $.map(dropPointsData, function (obj) {
                    obj.value = obj.id;
                    obj.label = obj.text;
                    return obj;
                })
            }, {
                label:"Date",
                name:"scheduled_job_generation.date",
                type:"datetime",
                def:function () { return new Date(); },
                format:"D MMM YYYY"
            }, {
                label:"Type",
                name:"scheduled_job_generation.type",
                type:"select2",
                options:[
                    {label:"One Time", value: "one_time"},
                    {label:"Weekly", value: "weekly"},
                    {label:"Biweekly", value: "biweekly"},
                    {label:"Monthly", value: "monthly"},
                    {label:"Sundays", value: "sundays"},
                    {label:"Mondays", value: "mondays"},
                    {label:"Tuesdays", value: "tuesdays"},
                    {label:"Wednesdays", value: "wednesdays"},
                    {label:"Thursdays", value: "thursdays"},
                    {label:"Fridays", value: "fridays"},
                    {label:"Saturdays", value: "saturdays"}
                ],
                def:"one_time"
            }, {
                label:"Assign Subscription Count To Default Count",
                name:"scheduled_job_generation.assign_subscription_count_to_default_count",
                type:"select2",
                options:[
                    {label:"Yes", value: "1"},
                    {label:"No", value: "0" }
                ],
                def:1
            }, {
                label:"End Date",
                name:"scheduled_job_generation.end_date",
                type:"datetime",
                format:"D MMM YYYY"
            }
        ]
    });

Edit Code:

// Edit
    $('.edit-sjg').on( 'click', function (e) {
        editorCalendarOverview
            .edit("row_" + $("#editSJGModal").attr('data-sjg-id'))
            .set('scheduled_job_generation.date',$(".edit-sjg[data-editor-field='date']").attr('data-editor-value'))
            .set('scheduled_job_generation.subscriptions',$(".edit-sjg[data-editor-field='subscriptions']").attr('data-editor-value'))
            .set('scheduled_job_generation.rack_cards',$(".edit-sjg[data-editor-field='rack_cards']").attr('data-editor-value'))
            .set('scheduled_job_generation.drop_points',$(".edit-sjg[data-editor-field='drop_points']").attr('data-editor-value'))
            .set('scheduled_job_generation.assign_subscription_count_to_default_count',$(".edit-sjg[data-editor-field='assign_subscription_count_to_default_count']").attr('data-editor-value'))
            .set('scheduled_job_generation.type',$(".edit-sjg[data-editor-field='type']").attr('data-editor-value'))
            //.set('scheduled_job_generation.' + $(this).attr('data-editor-field'),$(this).attr('data-editor-value'))
            .inline( this,'scheduled_job_generation.' + $(this).attr('data-editor-field'), {
            buttons: {
                label: "Save",
                fn: function () { this.submit(); }
            }
        } );
    } );

allan

Do you have an element on the page which has an id of "row_" + $("#editSJGModal").attr('data-sjg-id')?

The intention of using the standalone Editor with an id is that you can control how the items are displayed without using DataTables, but still edit them using Editor - see this example.

Each item in the grid has an id that can be used for editing.

Allan

SchautDollar

I do not. I was hesitant from doing that since I have several elements on the page that need this functionality.

My concern is mostly the possibility of "conflicts". Would this cause any issues?

For example, if Datatables grabs the element for Class1, will that cause issues if Class2 has an object with the same "row_"? Do I just need to reset the ID after every interaction to avoid those conflicts?

To give you some context, the page is a calendar with different types of events. Routes, ScheduledRoutes, Overrides, etc. The goal is to have one page to modify all those items on the calendar to simplify the workflow.

In regards to the collection editor, I was hoping to keep everything inline since I have the items showing as modals with some additional "action" buttons.

allan

Possibly... I'm not quite able to picture the page - is it something like this (but with a calendar rather than a table)?

Certainly the id needs to be unique on the page, otherwise Editor (and the browser) won't know which element to update when used.

Allan

SchautDollar

No, it is not. I can give you a link to the page if that would help. It's behind a login, so I'd have to PM you.

Here is a screenshot:

The "Schedule" button creates new events (Scheduled Routes). It displays a datatable editor for a new instance and I listen to it for when it creates the new item. Once created, I just refresh the calendar.

You can click on the calendar events and the idea is to display a modal of that event information and allow inline editing of most of their information. For example. There will also be some "action" buttons like "Delete Route" (requires confirmation and deletes hundreds of items) or "Generate Route Now" (generates the data for a route based off event information) or "View Route".

I already have a working version that requires bulk code to edit everything. This is Version 2 of the interface and I'm working towards making it less data intensive and more responsive.

The end goal is to have Datatables do the editing and formatting of display data for consistency.

allan

Yes please, if you could drop me a PM with the details that would be great. Click "allan" above and then the "Send message" button.

Allan