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

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

evandervevanderv Posts: 12Questions: 4Answers: 0

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?

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • evandervevanderv Posts: 12Questions: 4Answers: 0

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

  • evandervevanderv Posts: 12Questions: 4Answers: 0

    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.

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • VK2AZVK2AZ Posts: 4Questions: 1Answers: 0

    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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • VK2AZVK2AZ Posts: 4Questions: 1Answers: 0

    Thanks Allan,
    That worked.

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

    Hilary

  • DocNCDocNC Posts: 24Questions: 6Answers: 0

    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

  • DocNCDocNC Posts: 24Questions: 6Answers: 0

    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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Thanks for sharing,

    Colin

Sign In or Register to comment.