Refresh Dependent Inline Editor Select List

andrew beever

This seems very straight forward but I'm afraid I'm struggling.

I have a table with inline editing. The editable fields are both type:select.

The 'Product Name' field options are dependent on the 'Category' field.

What I would like to happen is that when change the selection in 'Categories' field, the revised 'Product Name' list options are updated at that point and shown in the table. The Ajax call is all working and I get the options I want back from the database.

Currently the correct options for 'Product Name' are not displayed until 'Category' field is blurred and the changes submitted.

Thanks in anticipation!

JS

(function ($) {
  $(document).ready(function () {
    var editorUnmapped = new $.fn.dataTable.Editor({
      ajax: "/api/unmapped_items",
      table: "#unmapped_items",
      fields: [
        {
          label: "Category:",
          name: "unmapped_items.category_id",
          type: "select",
        },

        {
          label: "Product Name:",
          name: "unmapped_items.product_name_id",
          type: "select",
        },
      ],
    });

    //Update Description List
    editorUnmapped.dependent(
      "unmapped_items.category_id",
      async function (val) {
        try {
          const res = await fetch("/api/update-product-name/" + val, {
            method: "GET",
          });
          const data = await res.json();
          console.log(data);


          let output1 = data.map((key) => {
            if (
              key.hasOwnProperty("id") &&
              key.hasOwnProperty("product_name")
            ) {
              key.value = key.id;
              key.label = key.product_name;
              delete key.id;
              delete key.product_name;
            }
            return key;
          });
          console.log(output1);

          let newProdName = {};
          newProdName.value = 0;
          newProdName.label = "(New)";
          output1.push(newProdName);

          console.log(output1);

          editorUnmapped
            .field("unmapped_items.product_name_id")
            .update(output1)
            ;
            $("#unmapped_items").DataTable().draw();
          
            return data;
          } catch (err) {
          console.log(err);
        }
      }
    );

    //Update Description List
    $("#unmapped_items").on(
      "click",
      "tbody td:not(:first-child)",
      function (e) {
        editorUnmapped.inline(this, {
          onBlur: "submit",
        });
      }
    );

    var tableUnmapped = $("#unmapped_items").DataTable({
      ajax: "/api/unmapped_items",
      type: "POST",
      columns: [
        {
          data: "unmapped_items.item_code",
        },
        {
          data: "unmapped_items.item_desc",
        },
        {
          data: "unmapped_items.item_qty",
          visible: false,
        },
        {
          editField: "unmapped_items.category_id",
          data: "categories.category",
        },
        {
          editField: "unmapped_items.manufacturer_id",
          data: "manufacturers.manufacturer",
          visible: false,
        },
        {
          editField: "unmapped_items.frequency_id",
          data: "frequencies.frequency",
          visible: false,
        },
        {
          editField: "unmapped_items.product_name_id",
          data: "product_names.product_name",
        },
      ],

      select: {
        style: "os",
        selector: "td:first-child",
      },
      language: {
        zeroRecords: "No Unmapped Items",
      },
    });

    new $.fn.dataTable.Buttons(tableUnmapped, [
      { extend: "create", editor: editorUnmapped },
      { extend: "edit", editor: editorUnmapped },
      { extend: "remove", editor: editorUnmapped },
    ]);

    tableUnmapped
      .buttons()
      .container()
      .appendTo($(".col-md-6:eq(0)", tableUnmapped.table().container()));
  });
})(jQuery);

***NODE****

router.all("/api/unmapped_items", async function (req, res) {
  let editor = new Editor(db, "unmapped_items", "id")
    .fields(
      new Field("unmapped_items.item_code"),
      new Field("unmapped_items.item_desc"),
      new Field("unmapped_items.item_qty"),
      new Field("unmapped_items.category_id").options(
        new Options()
          .table("categories")
          .value("id")
          .label("category")
          .order("sort_order")
      ),
      new Field("unmapped_items.manufacturer_id").options(
        new Options()
          .table("manufacturers")
          .value("id")
          .label("manufacturer")
          .order("sort_order")
      ),
      new Field("unmapped_items.frequency_id").options(
        new Options()
          .table("frequencies")
          .value("id")
          .label("frequency")
          .order("sort_order")
      ),
      new Field("unmapped_items.product_name_id").options(
        new Options()
          .table("product_names")
          .value("id")
          .label("product_name")
          .order("product_name")
      ),
      new Field("categories.category"),
      new Field("manufacturers.manufacturer"),
      new Field("frequencies.frequency"),
      new Field("product_names.product_name")
    )
    .leftJoin(
      "product_names",
      "product_names.id",
      "=",
      "unmapped_items.product_name_id"
    )
    .leftJoin("categories", "categories.id", "=", "unmapped_items.category_id")
    .leftJoin(
      "manufacturers",
      "manufacturers.id",
      "=",
      "unmapped_items.manufacturer_id"
    )
    .leftJoin(
      "frequencies",
      "frequencies.id",
      "=",
      "unmapped_items.frequency_id"
    );

  await editor.process(req.body);
  res.json(editor.data());
});

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

It might be because you've defined the dependent() function as async - I suspect that would prevent the update you're expecting. Could you remove that and if that resolves the issue, please,

Colin

andrew beever

Hi Colin,
thanks for this. Unfortunately not. I think I'll scrap this and try and find an alternative approach.