Need help adding dynamic field to custom template

wblakenc

I am in the process of putting together a prototype for a client and need some assistance modifying the custom template. I have a very simple 'toolbar' (for lack of a better term) that allows users to indicate what kind of field they wish to add (text,checkbox/radio, select, etc.). After choosing the type, they can enter in data about that field (name, id, label, length, etc.) and indicate where on the form they want the field added. Once they are done they click a button that submits the new field to the server (to alter the table to add the new field) and calls the add api function to add the new field. However, the new field does not show in the editor form. I assume it is because I haven't updated or redrawn the template to add the new field to the editor form.

Here is my function:

$("#addField").click(function(e) {
    $.post( "cfc/Database.cfc?method=AddColumn", $("#toolbar_form").serialize());
    var fl = $("#field_label").val();
    var fn = $("#field_name").val();
    var af = $("#afterField").val();
    
    editor.add( {
        label: fl,
        name: fn
    }, af ); 
    
});

As you can see the above is pretty simple. It takes the toolbar form and submits it to the database and the add function is used to add the field to the form, however no form field is displayed. If I click the 'addField' button again, I see in the console that datatables/editor already knows about this new field and cannot add another one with the same name. I am sure it is something simple, but I dont know what I am missing.

Any assistance would be appreciated.

colin

Hi @wblakenc ,

Yep, the field would also need to be added to the template. As you can see in this example here, just adding the field, doesn't add it to the template, since the template is independent of those declarations.

Cheers,

Colin

wblakenc

Thank you @colin. When Allen answered a question from another user he said:

You'll need to modify your template to include the new field. You can get the template element using template() and then modify it using jQuery or DOM methods.

I assumed he was saying we could modify the template (in editor's memory so that it would show to the end user). I guess this is not the case? I know that once the user refreshes the screen the new field will no longer show (unless it is actually added to the template before editor is initialized again). In my case the template is created by the server and passed to the client before the page is rendered, so this would not be a problem. I would just like to see the new field without reloading the page.

colin

Hi @wblakenc ,

Yep, you can modify that template with template() as Allan said, see example here. That test field is added in there.

Cheers,

Colin

wblakenc

@colin Thanks so much! That was what I was looking for. I knew you could modify it with the api but couldn't figure out how! That's perfect!

I'm not sure how to mark this question as answered, but thanks again!

wblakenc

@colin,
Question. It seems that you can add a new field before the editor form opens. Is it possible to add a field after it is already open, close it and reopen it to show the new field?

I tried to use close() and open() but after it closes it will not reopen. Even if I select a new row and click the 'Edit' button again. Thoughts?

JS Bin Example

colin

Hi @wblakenc ,

Yep, open() opens a basic form, that you would then do something with. I suspect you'd either want to edit a row with edit() (like this example here), or create() to create a new record.

Cheers,

Colin