Standalone Editor not closing inline form with select and data-editor-value

evanderv

I'm using the standalone editor on a Thymeleaf template and I'm having problems with the inline form not closing after saving. It only occurs when I use a different display value than the value being edited, requiring the data-editor-value property.

I have 2 select fields, status and owner. The status value/display are the same, and works great. The owner has a value of the username, and a display of the user's full name. I'm using the following to update the options after initialization.

dataEditor.field("owner").update(options);

Here are the two field definitions

<dl th:attr="data-editor-id=${task.id}">

<dt data-editor-label="status.name" >Status</dt>
<dd data-editor-field="status.name" th:text="*{task.status.name}" class="p-2 border"></dd>

<dt data-editor-label="owner" >Owner</dt>
<dd data-editor-field="owner" th:attr="data-editor-value=*{task.owner}" th:text="*{task.ownerName}" class="p-2 border"></dd>

</dl>

The field and editor inits

var fields = [
{ label: "Status", name: "status.name", type: "select", options: [ { label: 'Active', value: 'Active' }, { label: 'Canceled', value: 'Canceled' }, { label: 'On Hold', value: 'On Hold' } ] },
{ label: "Owner", name: "owner", type: "select" }
];

var dataEditor = new $.fn.dataTable.Editor( {
        ajax: 'api/tasks/update',
        fields: fields
    } )
    .on( 'preSubmit', function ( e, d, type ) {
        var fieldObj = d.data[Object.keys(d.data)[0]];
        d.id = (Object.keys(d.data)[0]);;
        d.field = Object.keys(fieldObj)[0];
        field = d.field;
        d.value = field == 'status' ? fieldObj[Object.keys(fieldObj)[0]].name : fieldObj[Object.keys(fieldObj)[0]];
        d.projectId = projectId;
    } )
    .on( 'postEdit', function ( e, json, data ) {
        flashSuccess ( $('dd[data-editor-field="' + (field == "status" ? "status.name" : field) + '"]') );
    });

Data field click event

    $('[data-editor-field]').on( 'click', function (e) {
        console.log('click');
        var isOpen = dataEditor.display();
        console.log(isOpen);
//      if (isOpen) { console.log('isOpen'); return false };
        var f = this;
        var fieldToEdit = $(this).attr('data-editor-field');
        var id = $(this).closest('dl').attr('data-editor-id');
        if (!isOpen) {
        if (fieldToEdit == 'instructions') {
            dataEditor
            .title("Instructions")
            .clear()
            .add( {
                name:  'instructions',
                type: 'textarea'
            } )
            .buttons( [  
                { 
                    text: "Update Revision", 
                    className: "btn-primary",
                    action: function () { updateRevision = true; this.submit(); }
                },
                { 
                    text: "Update", 
                    className: "btn-primary",
                    action: function () { this.submit(); }
                }
            ])
            .on( 'open', function ( e, d, dtType ) {
                $('div.modal.DTED .col-form-label').css('display', 'none');
                $('div.modal.DTED textarea').css('min-width', '450px');
                $('div.modal.DTED textarea').css('min-height', '450px');
            } )
            .edit();
        } 
//      else if (fieldToEdit == 'owner') {
//          console.log('owner');
//          var options = [];
//          var obj = {};
//          $.ajax({
//                  url: "api/projects/" + $("#project-id").attr("data-project-id") + "/users",
//              type: "GET",
//              cache: false,
//              dataType: 'json',
//              success: function(json) {
//                  for (var userProject in json.data) {
//                      obj = {};
//                      obj.label = json.data[userProject].user.lastNameFirstName;
//                      obj.value = json.data[userProject].user.userName;
//                      options.push(obj);
//                  }
//                  
//                  dataEditor.field("owner").update(options);
//                  
//                  dataEditor
//                  .inline( f , {
//                      buttons: { label: 'Update', className: 'btn-primary', fn: function () { 
//                          this.submit();
//                      } }
//                  } );
//              },
//              error: function() {
//                  return "A problem occurred while retrieving project users.  Please try again in a few minutes.";
//              }
//          });
//          
//      }   
        else {
            dataEditor.inline( f , {
                buttons: { label: 'Update', className: 'btn-primary', fn: function () { 
                    this.submit();
                } }
            } );
        }
        }
    } );

I'm really stuck. The right json is being returned after saving, the editor just stays open, but it doesn't for that status field.

Any ideas?

colin

Hi @evanderv ,

I just tried it here and it's working as expected. Are you seeing console errors? Also, are you able to link to your page, or could you tweak my example to see if you can show the error there?

Cheers,

Colin

evanderv

@colin here's the closest I can get without having a real api to hit

evanderv

More info: There are no console errors. If I simply use the select value as the display, not using the data-editor-value, everything works great. It's like Editor is prohibiting the inline form from closing. The data returned back after save is updated, so I don't know what's going on.

allan

This is a really interesting one. What's happening is it is actually working as expected and the new value is being written into the document but the click event propagates up the DOM causing the inline() method to be called again, immediately triggering a new inline edit!

This isn't an issue in the example Colin linked to since we use Ajax for the submitting of the data, but in your example it is all synchronous.

The fix unfortunately requires a little change in Editor to pass some extra information into the buttons function so we can call e.stopPropagation(). Fortunately its easy to patch Editor until the 1.9.1 release. You can see the patch and the e.stopPropagation() call here: http://live.datatables.net/jayawuni/4/edit .

Allan

VK2AZ

I am trying to use the data-editor-value property on a standalone page with ver 1.9.1

I am getting the same issues as described above.
I also see that the patch example above does not work.

If you edit the "Owner" and click "Update", it fails in the same way I am experiencing.

Is there a fix or workaround for this?

Hilary

allan

Because you are using data-editor-value things are a little different. Specifically the value is written to that attribute, but not to the document. So what you need to do is write the value you want into the dd that you want to show the label e.g.:

  editor.on('postEdit', function(e, json, data, id) {
    $('dd[data-editor-field="owner"]').html(data.owner);
  })

You'd need to do a look up as well to convert the value into a label. Updated example (without the lookup): http://live.datatables.net/jayawuni/7/edit .

Allan

VK2AZ

Thanks Allan,
That worked.

In my implementation, I do not need the "patch" code or the e.stopPropagation() call, just the postEdit event.

Hilary

DocNC

Hello Allan
is there a way to use the renderer of the field in this context ?
I have a lot of data with a custom renderer and would like to display in the standalone panel.
thanks
Michel

DocNC

sorry for the "stupid" questions (no renderer will exists outside of datatables)
just sharing my dirty solution.
Put renderer in HTML attribute : (data-editor-renderer)

 <dt> Date_creation :&nbsp;</dt>
        <dd data-editor-field='date_creation' data-editor-value='Value_date_creation'
            data-editor-renderer="$.fn.dataTable.render.moment('D/MM/YY')">SOMETHING</dd>
        <dt> Descriptif :&nbsp;</dt>
        <dd data-editor-field='descriptif' data-editor-value='Value_descriptif'>SOMETHING</dd>
        <dt> Maj :&nbsp;</dt>
        <dd data-editor-field='maj' data-editor-value='Value_maj'
            data-editor-renderer="$.fn.dataTable.render.moment('D/MM/YY')">SOMETHING</dd>
 <dt> Nb_employes :&nbsp;</dt>
        <dd data-editor-field='nb_employes' data-editor-value='Value_nb_employes'
            data-editor-renderer="$.fn.dataTable.render.number( '.', ',', 0, '','' )">SOMETHING</dd>

use postedit event

editor.on('postEdit', function (e, json, data, id) {
        $('dd[data-editor-field]')
            .each(function () { SOrenderfield($(this)); }
            );
    });

and eval the stored renderer

function SOrenderfield(fld) {
    render = $(fld).attr('data-editor-renderer');
    if (render) {
        try {
            eval("var jsFunc = " + render);
            if (jsFunc.display)
                jsFunc = jsFunc.display;    // farceur..
            v = jsFunc($(fld).attr('data-editor-value'));
            $(fld).html(v);
        } catch {
            console.log("unable to eval " + v);
        }
    }
    else
        $(fld).html($(fld).attr('data-editor-value'))

}

Hope this can help somebody reading the thread.
MJ

colin

Thanks for sharing,

Colin