How to keep Editor modal window open (single entry) for further editing?

timwoolley

Hello,

I would like to edit a single entry and allow the user to submit the form without it closing thus allowing them to continue editing the entry/form.

I have enabled this editor option:

formOptions: {
    main: {
        onComplete: 'none'
    }
},

Which keeps the modal window open, but it unfortunately disables any further interaction with the form.

I have tried:

.on("submitSuccess", function(e, o, action) {
    user_table.ajax.reload(function(json) {
        var index = user_table.rows({
            selected: true
        });
        editor.edit(index);
    }, false);
})

But I am getting weird results, where the editor modal window will go blank after one or two interactions (I think it's losing the index and/or it's going into multi-edit mode?)

With that said, can anyone suggest the best way to allow an editor modal window to stay open for further edits?

My end goal is to do a server-side validation of an email address; if the email is valid, I will programatically close the modal window on submitComplete/submitSuccess; otherwise I will mark the field with as an error with an error message using .error().

Thanks!

colin

Hi @timwoolley ,

I would've expected the onComplete to be the place to go, but I'm seeing it not working here too. I've raised it internally (DD-858) - we'll look into it and report back here.

Cheers,

Colin

allan

Try using submitComplete rather than submitSuccess. The ordering is important here - submitComplete is fired off when Editor has finished everything else, while submitSuccess happens immediately after the Ajax data has been loaded, but before Editor has updated the page and closed down the form. The odd timing you are seeing might relate to that combined with the async behaviour of ajax.reload().

Allan

timwoolley

Awesome, thanks so much for the replies and help Colin and Allan, I really appreciate it! Looking into the events you guys mention.

Thanks for that example @colin, it's very helpful to see. Next time I will post an example when I ask a question in order to make my question more clear.

I will post back my findings/results.

Thanks again!

timwoolley

As an update, I'm still heading down the path of using editor.edit(index); to bypass the onComplete: 'none' feature (bug?)

I did just realize that a primary problem with my setup is, I'm filtering the table to show one item (out of a larger data set); when I do an ajax.reload() the index is "1". I discovered this when using jQuery (as last resort) to get index:

user_table.ajax.reload(function() {
    var selected = $('#user_table').find('tr.selected')[0];
    var index = user_table.row(selected).index();
    editor.edit(index);
}, false); // For `resetPaging` option.

The above works! But it's giving me row index 1 from the larger data set, not the filtered visible data set.

Though, I guess this makes sense, as jQuery is just looking at what is filtered vs. what is hidden.

I've tried combinations of:

var index = user_table.row({
    selected: true
}).index();

… and:

var index = user_table.rows({
    selected: true
}).indexes();

When calling editor.edit(index);, the former returns undefined and the latter makes my editor modal form blank.

Anyway, I feel like I'm close!

Optimally, it would be cool to call onComplete: 'none' and not have it disable the form; but I'm sure there's a reason for this functionality.

Thanks for reading!

colin

Hi @timwoolley ,

It's not a bug (or even a feature!) - it was just me confusing things. When the form remains open, it loses it's state - so you need to initiate another edit/create. The onComplete: 'none' is useful as it stops the form from flickering as it closes and then quickly re-opens again.

This here is another example that I think is doing what you want - it filters the table to a single row (searches for 'Ashton'), then the edit form now stays open so you can keep editing that row.

Hope that does the trick,

Cheers,

Colin

timwoolley

Whoa! Awesome!

That works perfectly! I was in the process of saving the selected row, when clicked, to a variable so I could use it later in the editor ... Your solution is so straight forward and simple. Thank you so much for the complete code example and for taking the time to help me out, I greatly appreciate it!

Have an excellent day!

timwoolley

Just wanted to say, not only did your demo worked perfectly, but when applied to my code, it's also working perfectly. Thanks again @colin, and @allan, I really appreciate your help!

colin

Thank you, glad to have helped!

Restful Web Services

I am trying to do the same thing, well similar, and found this thread which is a great start.

I want to do things slightly differently. I want to save the changes every time a field is edited and keep only the selected row/rows open in the editing modal so I have tried the following which seems to work:

editor.one('open', function( e, type, action ) {
    $('input#DTE_Field_position, input#DTE_Field_office').on('blur', function () {   
              editor.submit().edit(table.rows({ selected: true }).indexes())
    });
});

However, as I am using server-side I was wondering if there was a method to only return new data for the row/rows which are actually being edited rather than returning all of the records?

I would only need all the data to be returned when the modal window was actually closed?

Just trying to reduce the amount of data sent back and forth?

allan

I was wondering if there was a method to only return new data for the row/rows which are actually being edited rather than returning all of the records?

Currently no - sorry. Editor will cause the DataTable to do a draw, when when using server-side processing will always cause it to Ajax load the page's data. It isn't ideal I acknowledge, and making it possible to have it update the DataTable with just the Editor response is something that we want to look into in future. However, its not actually clear how to do that since all the processing is done at the server-side. Consider for example if you change the data in the current ordering column - the server would need to be called to get the new order. Likewise with search.

Unfortunately its quite a tricky problem which is why we haven't introduced that ability yet.

Allan

Restful Web Services

Hi Allan. Thanks for the response. I totally understand the issue in the context where the modal is closed. However, for my scenario I want to keep the modal window open so at this stage it is irrelevant if the table needs to be, for example, re-ordered. Because I am keeping the modal window open I know that I only need the data for the rows I am currently editing. The full table redraw would only happen when the modal window is closed and I agree that would require a full redraw.

Do you think it is possible in anyway in my scenario where the modal window is staying open?

allan

If you want to submit an Editor form without redrawing the table, you can tell it to do that with the drawType option of the form-options object. Set it to be none and no draw will happen.

Allan

jettyapp

unfortunately the link in the 'accepted' answer is not longer valid

kthorngren

@jettyapp Do you mean this link posted by Colin?
http://live.datatables.net/hasuqubo/1/edit

It does work. Could be a browser issue.

Kevin

colin

Ah yep, it has changed - we split out the DateTime extension, so that also needs to be included now. This example here is the same functionality as before but with the correct sources,

Colin