Editor Datatables: Bootstrap modal window not populating dynamic select options

Editor Datatables: Bootstrap modal window not populating dynamic select options

matissgmatissg Posts: 42Questions: 9Answers: 0

I'm trying to implement Bootstrap for this kind of form with nested JSON data source where select drop-down is present with standalone collection editor.

At the moment I can see modal window is opened, however there are no values in drop-down select. When I manually add some test options for select field, those are populated. I suspect this is happening, because Bootstrap modal window is not playing together with Datatables Editor and particularly select field. Here is my other issue with Bootstrap implementation.

My JSON data structure is exactly what Editor is expecting:

{
    "data": [{
        "id": 2,
        "media": {
            "name": "something here",
            "company": 1
        },
        "companies": {
            "name": "company No1"
        }
    }, {
        "id": 3,
        "media": {
            "name": "test name",
            "company": 2
        },
        "companies": {
            "name": "company No2"
        }
    }],
    "options": {
        "media.company": [{
            "value": 2,
            "name": "company No2"
        }, {
            "value": 1,
            "name": "company No1"
        }]
    }
}

This row '<span data-editor-field="media.company">' + data.companies.name + '</span> ' in my JS populates Company name in panel, so it seems to me data is passed correctly. However values are not shown in drop-down select on adding new record or editing existing one.

I'm a bit confused why I don't see my select drop-down values? My JS code is pretty much the same as in standalone collection editor example, my Bootstrap JS and CSS are in place.

I'll be happy for any hint of how to solve this.

modal.PNG 11.3K

Answers

  • allanallan Posts: 41,550Questions: 1Answers: 5,204 Site admin

    however there are no values in drop-down select. When I manually add some test options for select field, those are populated

    Its happening because the JSON that is used to populate the DataTable includes the options to show in the select. Since you are using a standalone Editor there is no JSON that Editor can automatically scan through and get that information from.

    Instead, what you would need to do is either use the options parameter of the select type, or use the upload() field method with information that you get via Ajax or any other method.

    Regards,
    Allan

  • matissgmatissg Posts: 42Questions: 9Answers: 0

    @allan Thank you for explaining. As I understand at the moment I can pass my JSON to standalone collection editor - please, see my example above. In my JSON I'm sending "options", however I can't make them to work. My fields look like this:

         fields: [{
          label: 'Name:',
          name: 'media.name'
        }, {
          label: 'Company:',
          name: 'media.company',
          type: 'select'
        }]
    

    So far I was expecting to see in my drop-down select list of media.company values.
    Do you think I can do something with my JSON, to make it work or I have to go for that upload() anyway?

  • allanallan Posts: 41,550Questions: 1Answers: 5,204 Site admin

    I'm not clear on how the options get from your JSON above into the form though. If it were linked to DataTables, that would work because Editor listens for the xhr event from DataTables and uses the JSON to population the options. But in standalone mode it can't do that - there is nothing to listen to. You need to populate the options using the update() method of the select field.

    Allan

  • matissgmatissg Posts: 42Questions: 9Answers: 0
    edited August 13

    @allan
    I create JSON above with Jbuilder and get all together with this:

      // Load the initial data and display in panels
      $.ajax({
        url: '/my-url',
        dataType: 'json',
        success: function(json) {
          for (var i = 0, ien = json.data.length; i < ien; i++) {
            createPanel(json.data[i]);
            var options = json.options;
            console.log(options);
          }
        }
      });
    

    I can clearly see in my console.log options are there. So far I've been thinking, if I pass options in my JSON, it should be possible to access them in my form as in some of examples you have.

    As I understand at the moment my editor = new $.fn.dataTable.Editor fields access only json.data, so I cannot get anything from options. For example name: 'media.company' will return error at the moment as it can't retrieve options.media.company.

    Do you think there is a way to get it working or I still have to do that update() thing?

    Update
    I can get options from my JSON and update options like this:

      $.ajax({
          url: '/my-url',
          dataType: 'json'
        })
        .done(callback)
        .done(function(json) {
          for (var i = 0, ien = json.data.length; i < ien; i++) {
            createPanel(json.data[i]);
          }
        });
    
      function callback(response) {
        var options = response.options.company;
        editor.field('media.company').update(options);
      }
    

    however it will not show selected option for edit action.
    I tried to use fields.data however no luck so far - can't get out options data from my JSON into select drop-down.

  • allanallan Posts: 41,550Questions: 1Answers: 5,204 Site admin

    however it will not show selected option for edit action.

    That suggests that the value in the list of options does not match the value being edited. What is the result of JSON.stringify( options ); on line 14 in the above?

    Allan

  • matissgmatissg Posts: 42Questions: 9Answers: 0

    @allan
    JSON.stringify( options ); gives me this:
    [{"value":2,"label":"company No2"},{"value":1,"label":"company No1"}]

    My current JSON looks like this:

    {
        "data": [{
            "id": "2",
            "media": {
                "name": "something here",
                "company": 1
            },
            "companies": {
                "name": "company No1"
            }
        }],
        "options": {
            "company": [{
                "value": 2,
                "label": "company No2"
            }, {
                "value": 1,
                "label": "company No1"
            }]
        }
    }
    

    In my JS createPanel function and Edit action look like this:

    function createPanel(data) {
      var id = data.id;
    
      $(
        '<div class="panel panel-default" data-editor-id="' + id + '">' +
        '<div class="panel-heading">' +
        "Name:" + '&nbsp;' + '<b><span data-editor-field="media.name">' + data.media.name + '</span></b>' +
        '</div>' +
        '<div class="panel-body">' +
        '<dl>' +
        '<dt>Company:</dt>' +
        '<dd>' +
        '<span data-editor-field="media.company">' + data.companies.name + '</span> ' +
        '</dd>' +
        '</div>' +
        '<div class="panel-footer">' +
        '<i class="edit fa fa-pencil" data-id="' + id + '"/>&nbsp;&nbsp;' +
        '<i class="remove fa fa-times" data-id="' + id + '"/>' +
        '</div>' +
        '</div>'
      ).appendTo('#panels');
    }
    
      // Edit
      $('#panels').on('click', 'i.edit', function() {
        editor
          .title('Edit')
          .buttons('Save changes')
          .edit($(this).data('id'));
      });
    

    I can get my company ID with this:

        '<span data-editor-field="media.company">' + data.media.company + '</span> ' +
        '</dd>' +
    

    Then for company id=1 I should see company No1 in my drop-down, however I see company No2 as it is sorted first in list.

  • allanallan Posts: 41,550Questions: 1Answers: 5,204 Site admin

    I've sent you a PM, but for completeness here - I've fairly certain the issue is related to the fact that the data is being read from the DOM, which means its a string.

    If the updated script doesn't help, I've just had another thought - try making your numbers in the select options strings (simply add "" around them) and I think that will solve it.

    Allan

Sign In or Register to comment.