additional button in editor to change input fields

bayeni

Hello,
I would like to add a button into an editor window on the right side of a select field. If this button is pressed, the input field should become invisible and a input text field should become visible.
I tried to do add the button with

$('.DTE_Field_Type_Name_name').append('<button>test</button>');

in an initCreate or preOpen, but at least in this 2 it don't work. How can this be done?
Thanks for hints.

Tester2017

editor.on( 'open', function ( e, mode, action ) 
{
here your code to add the button
});

But be aware that this will add a button every time you are opening the edit form. So in the close event, you have to remove the button.

And you probably need to change the selector. At least I could not append a button to an input field, but yes to its parent.

Tester2017

One correction. Instead of using editor.on you can better use editor.one which will be fired only 1 time and eviting the addition of more buttons.

bayeni

thank you for the hint. I tried to add the button in the div around the text field (class DTE_Field_Name_formatSelect) with

editor.one( 'open', function ( e, mode, action ) {
      $('.DTE_Field_Type_Name_nameSelect').append('<button>test</button>');
 });

but the button is still not shown.

<div class="DTE_Field DTE_Field_Type_select DTE_Field_Name_formatSelect ">
  <label data-dte-e="label" class="col-lg-4 control-label" for="DTE_Field_formatSelect">Format
       <div data-dte-e="msg-label" class="DTE_Label_Info"></div>
   </label>
   <div data-dte-e="input" class="col-lg-8 controls"><div data-dte-e="input-control" class="DTE_Field_InputControl" style="display: block;">
      <select id="DTE_Field_formatSelect" class="form-control">
   ...
   </div>
</div>

Tester2017

Try the following, get the selector of the label of your field, and append a button to this label. That will work without any problem. Maybe from there, you can find out how to get it near the field itself.

allan

Try using field().input() in combination with $().insertAfter() - e.g.:

$( '<button>Test</button>' ).insertAfter(
  editor.field( 'myFieldName' ).input()
);

That works okay with this example (using first_name as the field name).

Allan

allan

Oh - worth pointing out that it doesn't need to be in an event handler - it will work as long as the Editor has been initialised since it is using the Editor API to get the field's input element.

Allan

bayeni

thank you both for your great hints, it is working with editor.one('open', ... combined with the part from Allan.

bayeni

I tried it without event and it that is working for me, too, thank you.

bayeni

The button is shown below the select or input, I think it is because of the "display : block". But it seems that I can't change the block to inline-block (I tried editor.field( '...' ).input().parent().css('display', 'inline-block')). Is it possible to have the button behind the field in the same line?

bayeni

as a second I would like to know how I can change with the click on the button, an input field to a select field and vice versa. I saw the hide, that is working, but I want to use input and select for the same data field, because only one can be used, but the value from the visible one has to be used as data.

allan

Yes - you would need to use CSS to change the location of the button. Perhaps using display:absolute; right: 0; top: 0; would work for you.

Allan

bayeni

unfortunately this display: block seems not to allow any change. If I try your css for the button, it don't change anything. The toggle object to make a field visible or not should be in the line, bor all I try, nothing changes in the layout.I tried to insert it after the label, too, but it seems that I'm not able to select the label as object.
Changing the label to an href would work as an alternative, I tried that and this works. Mabye I should use that.
But hiding a complete line in editor with
messagetypeEditor.field( 'nameSelect' ).input().parent().parent().parent().hide();
is sometimes working, but if I try with
messagetypeEditor.field( 'nameText' ).input().parent().parent().parent().show();
to make a hidden line visible, it don't change anything.
I fear I don't know which object I have to use to show a hidden field in editor and which I have to hide.
I normally want to have a select, but if the necessary value is not in the list, the user should be able to put the new value to a text field and than this value has to be be send to the server instead of selected value. If I have both fields with different names in editor, I could create the structure to send to the server.
But how can I arrange, that normally the select is visible and only if a link or button is pressed the text field appears and the select hides? Can it be done with the same field name or are for that 2 different names necessary, too?
What I want is to exchange a select with a text field for link/button pressed.

allan

Using:

$( '<button style="position:absolute;top:0;right:0">Test</button>' ).insertAfter(
  editor.field( 'first_name' ).input()
);

on this example appears to put the button on the right and the same line as the input for me.

Allan