Dynamically added fields in custom form not showing..

kaustubh.agrawal2000

Hello.
I am trying to add some fields dynamically..
I have the field addition logic in a function and the function gets called at 2 places..
1) during editor creat.. when user clicks a button (Working perfectly)
2) During edit action, when data is already present, so I am trying to show the fields without user action. (Not working)

First I thought the reason might be, that the field to which I am appending new fields is not available...
but when I Inspected the HTML the html is present but the field is not visible...

Details:
function code

        var saudaItem   = [];
        var id          = dispatchSaudaMapObj['sauda_id'];
        var name        = 'dispatch_sauda_map.' + id;
        var flexBoxId   = 'flexBox' + id;
        var targetDivId = "#saudaSpecificInfo #" + flexBoxId;
        
        if ($(targetDivId).length > 0) {
            $(targetDivId).remove();
        }

        $("#saudaSpecificInfo").append("<div class='flexBox' id='"+ flexBoxId +"'></div>");
        // Add hidden ID
        var dispatchSaudaIdName = name + '.dispatch_sauda_map_id';
        var idId        =  dispatchSaudaIdName.replace('.', '-').replace('.', '-');

        if ($("#" + idId).length == 0) {
              $(targetDivId).append("<div data-editor-template='" + dispatchSaudaIdName + "' id='"+ idId + "'></div>");
        }

        if (typeof editor.field(dispatchSaudaIdName) == 'undefined') {
            editor.add({
                'label' : 'Id',
                'name'  : dispatchSaudaIdName,
                'type'  : 'hidden'
             });          
        } else {
            editor.field(dispatchSaudaIdName).show();
        }

        editor.field(dispatchSaudaIdName).val(dispatchSaudaMapObj['dispatch_sauda_map_id']);

inspect

<div data-editor-template="saudaSpecificInfo" id="saudaSpecificInfo"><div class="flexBox" id="flexBox7"><div data-editor-template="dispatch_sauda_map.7.dispatch_sauda_map_id" id="dispatch_sauda_map-7-dispatch_sauda_map_id"></div><div data-editor-template="dispatch_sauda_map.7.sauda_id" id="dispatch_sauda_map-7-sauda_id"></div><div data-editor-template="dispatch_sauda_map.7.weight" id="dispatch_sauda_map-7-weight"></div><div data-editor-template="dispatch_sauda_map.7.number_of_bags" id="dispatch_sauda_map-7-number_of_bags"></div><div data-editor-template="dispatch_sauda_map.7.sauda_rate" id="dispatch_sauda_map-7-sauda_rate"></div></div><div class="flexBox" id="flexBox8"><div data-editor-template="dispatch_sauda_map.8.dispatch_sauda_map_id" id="dispatch_sauda_map-8-dispatch_sauda_map_id"></div><div data-editor-template="dispatch_sauda_map.8.sauda_id" id="dispatch_sauda_map-8-sauda_id"></div><div data-editor-template="dispatch_sauda_map.8.weight" id="dispatch_sauda_map-8-weight"></div><div data-editor-template="dispatch_sauda_map.8.number_of_bags" id="dispatch_sauda_map-8-number_of_bags"></div><div data-editor-template="dispatch_sauda_map.8.sauda_rate" id="dispatch_sauda_map-8-sauda_rate"></div></div></div>

the template tags are present in html but the fields are not visible...

Have been stuck in this for past 2 days..

Any help would be greatly appriciated...

allan

I've got a feeling that the issue here is that the add() method isn't rerendering the template.

Could you try calling editor.order( editor.order() ); immediately after your editor.add(...) call please?

What version of Editor are you using?

Allan

kaustubh.agrawal2000

Hi Allan..
I have tried that, but it still doesnt work..
Actually, there is no change what so ever..

I am using datatables
https://datatables.net/download/#dt/jq-3.2.1/jszip-2.5.0/pdfmake-0.1.32/dt-1.10.16/e-1.6.5/af-2.2.2/b-1.4.2/b-colvis-1.4.2/b-flash-1.4.2/b-html5-1.4.2/b-print-1.4.2/cr-1.4.1/fc-3.2.3/fh-3.1.3/kt-2.3.2/r-2.2.0/rg-1.0.2/rr-1.2.3/sc-1.4.3/sl-1.2.3

1.10.16 ...

allan

Could you update your Editor to 1.7.4 please - that's the latest release. In fact, it might be worth using the download builder to update everything you are using.

I think in Editor 1.6.x there was exactly the issue you described.

Thanks,
Allan

kaustubh.agrawal2000

Allan,
I have used the latest version of editor as you suggested..
but previously I used to check if a field is existing in the form before clearing it like..

if (typeof editor.field(field) != 'undefined') {
          editor.clear(field);
}

but now it started giving me error like :

Uncaught Unknown field name - rmf.2.rebate_matrix_id

on that particular line... (typeof editor.field(field) ...) line..
My question is
1) how can I check and clear a field in editor 1.7.4... I cant find specific documentation....
2) I hope its allowed to use a dot(.) in field name ...

Please confirm..

allan

Yes a field name can contain a dot and clear() is the correct method to delete a field.

The error suggests that there is no field of that name. fields() will tell you the list of fields that have been configured.

Allan

kaustubh.agrawal2000

Thanks a lot Allan,

Although I didnt use the template() API but still updating the plugin made the fields showup..

Thanks a lot..!!