Loading a single record in an editor, on the page rather than a popup

Oudalally

Hello.

I'm trying to implement what I think should be a simple solution, but I'm running into so many issues trying to understand how to make it work.

My use case is this - I have a settings page, and I want to use the editor component to edit a single record, without a table.
Essentially, I want the page to display the edit form, always showing a particular record, rather than using JS and PHP back end stuff to process an HTML form. Given that I have paid for the vastly superior plugin, I can't see any sensible reason not to use it.

I know it should be simple to implement this, but for the life of me, I can't work out how. The examples on the documentation show how to use an editor on the page, but they use a table to select the record being edited. I don't need to do this, as I'm loading the record by its ID using Ajax.

In my HTML page, I have created a div, which includes a span tag with the id "row_1", as this is necessary for the script to load the editor correctly.

In a seperate JS file, I have a function which is called on page load

`

var editor;

function loadSettingsEditor() {

editor = new DataTable.Editor({
    ajax: "controllers/default-bookings-dt-provider.php",
    drawType: "none",
    fields: [
        {
            "label": "Campervan/Tent:",
            "name": "campervan_tent"
        },
        {
            "label": "Motor Home:",
            "name": "motorhome"
        },
        {
            "label": "Caravan:",
            "name": "caravan"
        },
        {
            "label": "Minimum Nights:",
            "name": "min_nights"
        }
    ]
});


$.ajax({
    url: 'controllers/default-bookings-dt-provider.php',
    data: {
        id: 1
    },
    dataType: 'json',
    success: function (json) {
        console.log("----------------------------------");
        let data = json.data.filter((item, index) => item.id == 1)[0];
        console.debug(data);

        editor
            .title('Edit Settings')
            .buttons('Save')
            .edit(1)
            .val('campervan_tent', data.campervan_tent)
            .val('motorhome', data.motorhome)
            .val('caravan', data.caravan)
            .val('min_nights', data.min_nights);
    }
});
}`

When I load the page, the editor pops up, and editing works perfectly well.

What I can't work out is how I can simply make the editor load into a div on the page, so it appears as a simple form within the page, rather than as a modal popup.

I'd really appreciate some help as I'm just lost here.
I know it should be simple enough, but for the life of me I just can't see how to do it.

Many thanks

kthorngren

Sounds like you are asking about Standalone Editing. See these examples.

Kevin

Oudalally

That's not quite what I'm after.
With the stand alone editng, the data is rendered, and an option is presented which pops up the editor component.

What I want is for the page to load, with the editor component pre-loaded into the page, and the record already populated, allowing it to be updated and saved.

kthorngren

What I want is for the page to load, with the editor component pre-loaded into the page, and the record already populated, allowing it to be updated and saved.

Sorry maybe I still don't understand but it sounds the same thing this example is doing with inline editing.

Kevin

Oudalally

In that example, the form is created in HTML, and clicking on an element is triggering the editor.

What I want to achive is that instead of the editor form loading in a popup window, or an individual editor element being loaded when you click on a field of an HTML form, I want to create a page which has no form on it.

When the page loads, an Ajax request loads some data from the database, and the editor form which normally loads into a popup is instead loaded into a div on the page.

I'm trying to find a way to avoid using any html form elements in the page at all.

I've been looking at using the display controller to display the form directly into the page, but without using a table to select the record to edit. Instead, the data is coming directly from the ajax request I'm running.

I have just found another post (https://datatables.net/forums/discussion/11680/display-controllers-using-a-div) which might be enough to get this working, however it is for an older version of datatables so I'm not sure it will apply in this case.

I'll have another play and see if it does the trick.

kthorngren

Here's another idea. Make your record updates, however you want, without involving Editor. Have a submit button or whatever you want to trigger the update and when clicked get the updated data and use the edit() API with the second parameter as false so the form doesn't open. Something similar to the third example in the docs except use null as the first parameter.

Is this what you are looking for?

Kevin

Oudalally

That would still require me to create a form in HTML, and while hooking the edit api would be less manual work than building a php class to process the submission, it still involves manually creating a form.

At the moment, when I navigate to the settings page, the edit form opens, loads the record with the id of 1, and lets me edit it. This is exactly the right behaviour, except I want the form to load as part of the page rather than in a modal popup.

I am fairly sure that can be achieved using the display controller, but I'm not sure how to configure it to do that.

Oudalally

If I can't find a way to do this, I'll simply grab the data from the table, display it in divs, and include a button to edit it, though I'd rather avoid that if I can

kthorngren

I think I understand now. Here are a couple threads that might help:
https://datatables.net/forums/discussion/11680/display-controllers-using-a-div
https://datatables.net/forums/discussion/26759/render-the-editor-in-a-specific-div
https://mail.datatables.net/forums/discussion/59900/use-custom-form-without-popup

The last one refers to this blog which I think is doing something similar to what you are asking.

Kevin

Oudalally

YES!!! Thank you, that's exactly what I was after. I did look through those posts before, but I didn't spot the link on the third one (the blog post) which linked to the full example code on the Editor page, and I couldn't find it again when I searched for it.

This is the link that helped - https://editor.datatables.net/plug-ins/display-controller/editor.onPage

I added the OnPageDisplay function to my JS which is creating the editor, created a div with the ID editor-form-container, and added the following line to my 'new DataTable.Editor' section:

display: onPageDisplay( $('#editor-form-container') )

That's working perfectly now.

Thank you for your help, that's going to save me MANY hours of additional work!!