Select2 editField

system.bonn@gmail.com

Im still on laravel, laravel-datatables and datatables with datatables Editor.

How do I set which field the select2 field should update? I have a relation from table 'pos' to 'facility'. 'pos' has a field 'facility_id' which points to 'facility.id'.

Pos.php:

public function facility() {
    return $this->belongsTo('App\Facility');
}

Facility.php

public function pos() {
    return $this->hasMany('App\Pos');
}

So, the select2 should show all entries of 'facilities' for the user to chose from and update the field 'facility_id' in 'pos' according to the user's choice.

So, the list of choices for select2 should come from 'facilities'. This is almost working as I wrote in my previrous post. But the select control should update the field 'facility_id'.

I tried setting editField to

        [ 'data' => 'facility.name', 'title' => 'Einrichtung', 'editField' => 'pos.facility_id'],

"dataTables.editor.js:21 Uncaught Unable to automatically determine field from source. Please specify the field name."

How do i do that? Or do you have some real documentation?

THX & cu,
ada

allan

Hi Ada,

That error message should link to this page which explains in detail what that error means and how to address it.

Basically that error will occur when DataTables is told to show a property in a column, but you want to edit the value of another property for that field (very common in linked tables).

Regards,
Allan

system.bonn@gmail.com

Hi Allan,

as i wrote, I tried setting the editfield Parameter. I can't get it to work. As I asked in my other question: please, do you have a wirking example of two joined tables with a select box?

TIA,
ada

allan

Can you show me your DataTables and Editor Javascript code please? It looks like you might be generating the JS from PHP, so the rendered JS would be useful.

Thanks,
Allan

allan

Regarding your question about an example - yes you can see one here. That is both inline editing and the main editing view.

Allan

system.bonn@gmail.com

Hi!

Thank you for your answer.
As I said, I am using 'https://yajrabox.com/docs/laravel-datatables/master'. I don't see any generated Javascript for the Datatable in the site's source code.

I managed to get it partially working. But it is still far from looking good.

This is the JS code:

` $(document).ready(function() {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': 'i0TAzLcqerk5fjTgBLXrvSjt5vN25MUB6ewrkmT2'
}
});

        var editor = new $.fn.dataTable.Editor({
            ajax: "/pos",
            table: "#pos",
            display: "bootstrap",
            template: '#dlgEditor',

            fields:
            [
                {
                  label: "Einrichtung",
                  name:  "facility_id",
                  type:  "select2",
                  opts: {
                    ajax: {
                        url: '/api/facilities/search',
                        dataType: 'json',
                        initialValue: true
                    },
                    allowClear:         false,
                    language:           "de",
                    minimumInputLength: 0                        
                  }
                },
                { label: "Name",         name: "name" },
                { label: "Beschreibung", name: "description" },
                {
                  label: "Status d. Kasse",
                  name:  "state",
                  type:  "select",
                  def:   "locked",
                  options: [
                    { label: "Offen",       value: "open" },
                    { label: "Geschlossen", value: "closed" },
                    { label: "Gesperrt",    value: "locked" },
                  ],
                  placeholder: "Status wählen"
                },
                { 
                  label: "Angemeldeter Benutzer",
                  name:  "active_user_id",
                  type:  "readonly",
                  attr:  { disabled:true } 
                },
                { 
                  label: "Stand aktuell (€)",
                  name:  "balance_in_hand",
                  def:   "0.00",
                  attr:  { type: 'number', lang: 'de' }
                },
                { label: "Stand bei Nutzerwechsel (€)",
                  name:  "balance_start",
                  def:   "0.00",
                  attr:  { type: 'number', lang: 'de' }
                }
            ]
        });

        $('#pos').on('click', 'tbody td:not(:first-child):not(:nth-child(2))', function (e) {
            editor.inline(this);
        });

        (function(window,$){window.LaravelDataTables=window.LaravelDataTables||{};window.LaravelDataTables["pos"]=$("#pos").DataTable({"serverSide":true,"processing":true,"ajax":{"url":"","type":"GET","data":function(data) {
        for (var i = 0, len = data.columns.length; i < len; i++) {
            if (!data.columns[i].search.value) delete data.columns[i].search;
            if (data.columns[i].searchable === true) delete data.columns[i].searchable;
            if (data.columns[i].orderable === true) delete data.columns[i].orderable;
            if (data.columns[i].data === data.columns[i].name) delete data.columns[i].name;
        }
        delete data.search.regex;}},"columns":[{"name":0,"data":null,"defaultContent":"","className":"select-checkbox","title":"","orderable":false,"searchable":false},{"name":"id","data":"id","title":"Id","orderable":true,"searchable":true},{"name":"name","data":"name","title":"Name","orderable":true,"searchable":true},{"name":"description","data":"description","title":"Beschreibung","orderable":true,"searchable":true},{"name":"facility.name","data":"facility.name","editField":"facility_id","title":"Einrichtung","orderable":true,"searchable":true},{"name":"active_user_id","data":"active_user_id","title":"Angemeldeter Nutzer","orderable":true,"searchable":true},{"name":"balance_start","data":"balance_start","title":"Stand bei<br \/>Nutzerwechsel (\u20ac)","render":$.fn.dataTable.render.number(".", ",", 2),"orderable":true,"searchable":true},{"name":"balance_in_hand","data":"balance_in_hand","title":"Stand aktuell (\u20ac)","render":$.fn.dataTable.render.number(".", ",", 2),"orderable":true,"searchable":true},{"name":"state","data":"state","render":function(data,type,full,meta){return function($data)
          {
            switch (data)
            {
                case "open":   return "Offen";       break;
                case "closed": return "Geschlossen"; break;
                case "locked": return "Gesperrt";    break;
                default:       return "Gesperrt";    break;
            }
          };},"title":"Status d. Kasse","orderable":true,"searchable":true}],"dom":"Bfrtip","order":[1,"asc"],"select":{"style":"os","selector":"td:first-child"},"buttons":[{"extend":"create","editor":editor,"formButtons":["Datensatz anlegen",{"text":"Abbrechen","action":function () { this.close(); }}]},{"extend":"edit","editor":editor,"formButtons":["Speichern",{"text":"Abbrechen","action":function () { this.close(); }}]},{"extend":"remove","editor":editor,"formButtons":["L\u00f6schen",{"text":"Abbrechen","action":function () { this.close(); }}]},["export","print"]],"language":{"url":"\/json\/de.datatables.json"},"initComplete":function() {
                        this.api().columns().every(function() {
                            var column = this;
                            var input = document.createElement("input");
                            input.setAttribute("class", "form-control form-control-sm");
                            $(input).appendTo($(column.footer()).empty()).on('change', function() {
                                column.search($(this).val(), false, false, true).draw();
                            });
                        });
                    }});})(window,jQuery);

    })

TIA & cu,
ada

system.bonn@gmail.com

Oh! i think, I've got it rollin'

Just a little problem is left. I activated the "submit on blur" functionality because otherwise the inline-editing wouldnt make sense at all.

Now, there's an ugly behaviour when I cklick on another inline edit field. The select2-box gets updated, but then the message "please wait" appears and stays. Forever.

Any Idea?

TIA & cu,
ada

allan

I'm afraid I don't know off the top of my head what would be causing that. Can you give me a link to a page showing that problem so I can take a look please?

Allan

system.bonn@gmail.com

Thank you for your reply!

I have fund out, it seems to have to with the issue described here: https://datatables.net/forums/discussion/31895/editor-uncaught-typeerror-cannot-read-property-contents-of-undefined

system.bonn@gmail.com

I found it. It is: LaravelDataTables["id"]