Datatables Editor: load form data depending on selected value from drop-down

matissg

In my form I would have drop-down with options, e.,g., v1, v2, v3 When particular option is selected (e.g., v1), I would need to reload values in my form. Basically, we are talking about versions of data, which on drop-down select are loaded for user to edit. All form fields stay - no changes.

How do I implement this, please? So far I've been looking at dependent() functionality. I'd be happy for any hint, where should I be looking at. Thank you!

rf1234

It would really surprise me if that was possible at all. I think it actually means to navigate to a different record in the underlying data table upon dropdown selection. But lets see what @allan comments are. I'd be interested in this too.

allan

You are absolutely correct, dependent() is the way to do this. On the client-side you might simply have:

editor.dependent( 'myFieldName', '/url/to/server/script' );

The key is what the script on the server is doing. It needs to query the database to get the values that should be shown and then return them in a JSON format (described in the dependent() documentation).

Do you have such a server-side script at the moment?

Allan

rf1234

wasn't aware of this. Very good to know

matissg

@allan Thank you, I assumed it could be the way to go as basically I'm sending request to the server and getting back JSON with new values.

No, I don't have any server-side script at the moment. I would need to implement one in my Rails 5 app. I think I would need to pass appropriate params, so Rails can find requested data and then I build JSON and send back to client-side.

allan

That sounds like the perfect plan to me! Let us know how you get on with it and if you have any questions. The dependent() documentation is fairly long as its quite a capable, but also complex method...

Allan

matissg

@allan I've done some experiment with dependent() feature where I would like to populate countries and then on country name change, I would get values from server and present appropriate cities to User. In my JS I have this:

$(document).ready(function() {
  editor = new $.fn.dataTable.Editor({
  // more code...
 {
      type: "select",
      label: "Country:",
      name: "countries[].id",
      id: "country_select",
      optionsPair: {
        label: 'name',
        value: 'id'
      },
      "opts": {
        "placeholder": "Select Country...",
        "allowClear": true
      }
    },{
      type: "select",
      label: "City:",
      name: "cities[].id",
    }, {
      type: "select",
      label: "District:",
      name: "districts[].id",
    }
  // more code...
  });

  editor.dependent('countries[].id', function(val, data, callback) {
    var countryId = $('#country_select').val();
    $.ajax({
      url: '/common/countries/' + countryId + '/cities',
      dataType: 'json',
      success: function(json) {
        callback(json);
      }
    });
  });

// more code, including Table

});

In my server response (/common/countries/1/cities) I get back this JSON:

{
    "options": {
        "cities[].id": [{
            "id": 1,
            "name": "Berlin"
        }, {
            "id": 2,
            "name": "Frankfurt"
        }, {
            "id": 3,
            "name": "Dortmund"
        }]
    }
}

According to this post, it seems that I'm doing it right so far.

At the moment I'm a bit stuck since:
1) I don't see my cities populate in this form:

<div class="row">
  <div class="col-sm-12">
    <form class="form-horizontal" role="form" action="">
      <div class="form-group col-sm-12">
        <div data-editor-template="name"></div>
        <div data-editor-template="ptype"></div>
        <div data-editor-template="countries[].id"></div>
        <div data-editor-template="cities[].id"></div>
        <div data-editor-template="districts[].id"></div>
        <div data-editor-template="address"></div>
        <div data-editor-template="code"></div>
        <div data-editor-template="light"></div>
      </div>
    </form>
  </div>
</div>

I see my country value & name presented in view, however, no cities are populated in my form.
2) script is triggered when Datatables is opened and even when there is no records; I would need this script to run only when I open my new/edit form and select country.

I'll be happy for any hint where I should be looking at to complete this. Thank you.

allan

The code you are using looks like what I would expect (although obviously not the result from what you describe). Could you give me a link to the page so I can take a look please?

Thanks,
Allan

matissg

@allan I've created demo page for this, so I'll send you direct message with link + description what I've done so far.