Dynamically add select inputs, with same option values taken from JSON

nettunodev

Hello, basically the user need to select an option from a "select" input field. When he does that, another select with the same set of options should appear. I'm facing two problems:

1. datatables get the data from a JSON. The Editor populates the select with the available options that it gets from the same JSON. This is achieved by simply giving to the select the same name of the JSON "options" node. Here follows a snippet of the end of the JSON, to clarify.

    "options": {
        "descrizione.UFF_INT": [
            {
                "value": "0",
                "label": "-"
            },
            {
                "value": "3",
                "label": "Ufficio Interno"
            },
            {
                "value": "4",
                "label": "Ufficio Acquisti"
            }
        ]

This is a snippet of the editor field configuration:

fields: [{
            label: "Uffici Interessati:",
            name: "descrizione.UFF_INT",
            type: "select"
        }

I tried to implement the editor.add but I'm not allowed to give to the new select field the same name that I gave to the first select (descrizione.UFF_INT). Thus I need to populate the array using an ajax call. So first question, is there a way to add a new field and keep using the options list provided by the JSON?
I also tried to use this name - descrizione.UFF_INT[ ] - because that's the way you create an array of fields in HTML, but datatables doesn't seems to recognise and give value to this nomenclature.

1. I'm using the add() api to add the new field. It seems to work but the field doesn't appear. Here follow a snippet of the code:

editor.on('open', function () { 
    $('.ui_add_remove div select').on( 'change', function () {
        //alert($(this).attr('id'));
        editor.add({
            label: "Ufficio Interno 2:",
            name: "prova2"
        });
    });
});

I know for sure that it works, because the first time that I trigger the select, no js errors are showed, while the second time it (correctly) throw this error "Error adding field 'prova2'. A field already exists with this name". So something happens but the field doesn't show up.

Could someone help me? Thanks in advance!

ThomD

I think that editor.add function should only be called once, when you setup the table. If you call it every time you open an item for editing, then you would (as it says) be trying to add that field to the entire table many times.

I would be careful about populating the select options based on values from the JSON with the data. If your business adds a new option (value: 5, label: Ufficio Spedizioni) and no records have that new value, then the select option will not show that as a choice.

nettunodev

Hi, thanks for your reply. Regarding the editor.add, I tried many different approaches without results. At the end I switched to this code

editor.dependent( 'descrizione.UFF_INT', function ( val ) {
    if(val != null){
        editor.add({
              label: "Ufficio Interessato 2:",
              name: "prova",
              type: "select"
        });
    }
});

This solution works and now I need to further develop on it.
The thing is, I cannot attach any event (like "onchange") to the select in the form, because as long as the popup windows isn't loaded it doesn't exist. Therefore I had to use a trick, but I could also use some logic to avoid adding the field many times.

Also I still would like to populate the select using the JSON. That JSON is created on page load in PHP and data are taken from db, so nothing bad can happen unless someone is adding new options while I'm working on that page and even then I'm not worried about it.

allan

So first question, is there a way to add a new field and keep using the options list provided by the JSON?

Not directly - but you can add the new field and then access the JSON to add the properties from it - ajax.json().

For example:

editor.add( { name: 'newField', ... } );
editor.field( 'newField' ).update( table.ajax.json().options.myOptions );

I'm using the add() api to add the new field. It seems to work but the field doesn't appear.

This I'm afraid is a bit of a bug in 1.4... Basically the field is added to the form, but it isn't automatically redrawn, which is should be. This is resolved in 1.5 which will be out soon, but as a workaround you can use the order() method like this:

editor.order( editor.order() );

It just sets the order to the current order, so it is fairly redundant, but it does cause the form to redraw!

Allan

nettunodev

Thanks!

you can add the new field and then access the JSON to add the properties from it - ajax.json()DT.

I'll try that!

This I'm afraid is a bit of a bug in 1.4... Basically the field is added to the form, but it isn't automatically redrawn, which is should be. This is resolved in 1.5 which will be out soon, but as a workaround you can use the order()E method

Yes, I figured that out a little after I posted the second reply. I thought I had solved the issue using editor.dependent but I didn't notice it was because of the order code that I added after using editor.add.

In the meantime I have found out that the editor doesn't work with fields array, so even if I force it by naming the fields UFF_INT[0], UFF_INT[1], and so on, on submit it sends just UFF_INT and the value is always 0.

Thanks a lot for your answer!