Answers

• allan Posts: 63,478Questions: 1Answers: 10,467 Site admin

  August 2017

  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
• matissg Posts: 63Questions: 15Answers: 0

  August 2017

  @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?
• allan Posts: 63,478Questions: 1Answers: 10,467 Site admin

  August 2017

  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
• matissg Posts: 63Questions: 15Answers: 0

  August 2017 edited August 2017

  @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.
• allan Posts: 63,478Questions: 1Answers: 10,467 Site admin

  August 2017

  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
• matissg Posts: 63Questions: 15Answers: 0

  August 2017

  @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.
• allan Posts: 63,478Questions: 1Answers: 10,467 Site admin

  August 2017

  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