Working With Multiple Inputs

[coder4life]

Really love this. Been very fun to play around with. I am stuck with a very circumstantial scenario though I need some help with.

I have a large amount of data being outputted in a table format. Each row in the table is related to a specific record id. Each column in the row is a specific input type depending on the type of data (input for text, input for textarea, select, date, ect.)

The behavior I am looking for is being able to click one of the anchor tags in the column fields and changing all the anchor tags in the associated row to their correct input type. X-editable seems to work with one element at a time, unless of course there is a way to override this through some parameter control. The reason why I want all fields to show is to convey the focus that your editing everything for this one row/record. As soon as the focus is moved away from the row through a tab (we are at the last field in the row) or click event (we click a tag on another row) I like the current fields to submit.

I would really appreciate any help to point me in the right direction.

[vitalets]

ok, first of all you should set onblur option to ignore - this allows to have several editable fields open.
Then by clicking on some edit row button you open all fields in particular row:

$row.find('a').editable('show');

And finally, when you click on another row you call submit:

$row.find('a').editable('submit', {
    url: ...
    success: ...
    error: ...
});

have a look on new record creation

Also I think you would like to hide submit buttons - just set showbuttons to false.

Let me know in case of more questions.

[coder4life]

Thanks vitalets, will take a look.

[coder4life]

Still having a little trouble.

I am guessing I need to bind some click event then have the row selection.

$row.find('a').editable('show');

I am applying this to all editable elements for now. Contains some PHP variables, but these are set correctly after looking at source.

(function($){
    $.find('a.editable').editable({
        type: 'select',
        tpl: '<select></select>',
        inputclass: '$inputClass',
        prepend: '$prepend',
        sourceCache: '$sourceCache',
        showbuttons: false,
            onblur: 'ignore'
    }).editable('show');
})(jQuery);

[vitalets]

I've reserched this more and unfortunatly not found an elegant solution with current version.
As it works more as regular form (submit whole row of data), x-editable structure is not suitable enough.
I think, I will investigate into it for the next version.

My testing fiddle:
http://jsfiddle.net/xBB5x/348/

[coder4life]

Thanks Vitalets for all the help. Really appreciate the time. Hopefully we can find a good solution.

[vitalets]

Issue is in fact hte same as #74
Definetly should be done in future versions.

[usubhash]

Hey Vitalets, This looks very promising and very nice UI.

I want to use but I am limited because of the fact that we can only change one row at a time. Can you please let me know if you were able to proceed with this http://jsfiddle.net/xBB5x/348/ ?

Also, it will be good to support custom input types like timepicker etc.

Please let me know.

Thanks,
Subhash

[vitalets]

hi @usubhash
could you explain your task? do you need edit entire table?

[usubhash]

Hi Vitalets,
Yes. I want to edit any row in a table either inline or by displaying them at the top so that we can edit the particular row.

[vitalets]

Do you mean something like this: http://jsfiddle.net/xBB5x/2275/
(save not working now...)

[techcto]

Any progress with a way to save? Even a hack to get the value would be appreciated.

[azmodii]

I like many stumbled across this when trying to implement this. With little to no help from my google fu, I made this quick and dirty workaround. Please bear in mind that this was done with enablebuttons: false.

First, we set up some options for our editables;

toggle: 'manual',
onblur: 'ignore',
enablebuttons: false

Then we wire up the events. I have done this via a row click, but the premise is simple.

$('.editable-table-row').on('click', function (e) {
    e.stopPropagation();
    e.preventDefault();
});

I then wired up an event to show the editables, and added a manual submit on keydown (I also wired up an event on click elsewhere but the current row).

function submitEditable() {
    $('.editable-table-row .editableform').editable().submit();
}

$('.editable-table-row').on('click', function (e) {
    e.stopPropagation();
    e.preventDefault();
    if ($(this).find('.editableform').length < 1) { submitEditable();} // This enables you to select other inputs of the same class and still get submit behaviour
    $(this).find('a').each(function () { $(this).editable('show'); });
    $(this).find('.editableform').each(function () { $(this).on('keydown', function (e) { if ((e.keyCode || e.which) == 13) { submitEditable(); } }) });
// 13 = enter
});

$(document).click(function () {
    submitEditable();
});

And then to grab the value of the saved inputs;

success: function (response, newValue) {
        console.log(newValue);
    }

The event fires for each editable saved this way, so its not the cleanest solution - but it works none-the-less. It also fires the first editables success event twice? Not sure why and its too late to fix it!

http://jsfiddle.net/xWnwt/

[roshan3133]

Hi i am new for jquery i am using x-editable to update multiple filed like address.js directly to mongodb
can any one tell me how do i write code for that.

[quantumsized]

Ok, I think this falls in line with much of these.
I have a statistics page where I'm using DataTables (https://www.datatables.net/) to show all the hit records and there are some fields I wanted to use X-Editable to edit inline. This only has to happen one field at a time but I seem to not be getting my brain locked on the solution.
I'm using PHP to pull from my DB and generate the table that then gets sorted/organized and paginated by DataTables.
Some of the fields show "Unknown" as I have them marked and as I figure out what they should be, I'd like to use the inline editor to enter the correct values that will update the DB.
I can later implement some way to update all similar records.
My data-pk is set to the primary key in the DB and the name of the anchor is set to the column name currently.
Any help would be good.
Thanks