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: 10Questions: 3Answers: 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: 6,526Questions: 0Answers: 1,122

    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: 10Questions: 3Answers: 0

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

  • evandervevanderv Posts: 10Questions: 3Answers: 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: 50,737Questions: 1Answers: 7,581 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

Sign In or Register to comment.