rowReorder not submitting ajax for reorder

drewturk

HI,

here is my editor implementation of rowReorder:

var editor = new $.fn.dataTable.Editor({
        ajax: '/client/information/updatecontacts',
        table: '#contacts',
        idSrc: 'id',
        fields: [
            {
                name: "position",
                type: "hidden"
            },
            {
                label: "Name",
                name: "name",
                labelInfo: "Required"
            },
            {
                label: "Title",
                name: "title"
            }
        ]
    }).on('postCreate postRemove', function() {
        console.log('postCreate postRemove');
        datatable.ajax.reload(null, false);
    }).on('initCreate', function() {
        console.log('initCreate');
        editor.field('position').enable();
    }).on('initEdit', function() {
        console.log('initEdit');
        editor.field('position').disable();
    });

here is my datatable implementation:

    var datatable = $("#contacts").DataTable({
        ajax: '/client/information/getcontacts',
        responsive: true,
        order: [[0,'asc']],
        rowReorder: {
            selector: 'td:not(:first-child, :last-child)',
            dataSrc: 'position',
            editor: editor
        },
        columns: [
            //0
            {
                data: "position",
                visible: true,
                colvis: false,
                //className: 'never',
                render: function(data) {
                    return parseInt(data)+1;
                }
            },
            //1
            {
                title: "Name",
                name: "name",
                data: "name",
                searchable: false
            },
            //2
            {
                title: "Title",
                name: "title",
                data: "title",
                searchable: false
            },
        ],
        columnDefs: [
            {
                className: 'reorder',
                targets: [1,2,3,4,5,6,7,8]
            }
        ]
    });

I want to utilize the editor for updating the rows after a reorder, but the editor is never called via AJAX. I can reorder just fine in UI, but the AJAX does not work and therefore I can't 'save' the changes. Thanks.

p.s. using DataTables v 1.10.12 and RowReorder v1.1.2

drewturk

Hi dataTables staff,

We discovered a bug with idSrc: 'id' option when used with rowReorder extension. We can not use id's other than the default DT_RowId. This does however work with all of our other datatables, just not when the rowRerorder extension is used.

we are temporarily resolving the issue by replacing id with DT_RowId:

foreach ($contacts as $contact) {
            $contact->DT_RowId = $contact->id;
        }

allan

Hi,

Thanks for your messages. The idSrc option is only used for Editor, it isn't a property that DataTables itself, or RowReorder has access to. Instead, the property to use is DataTables' rowId property. By default that is DT_RowId which is why it works when using your workaround above, but if you just have an id property you want to use, add rowId: 'id' into your DataTables initialisation.

Regards,
Allan

drewturk

Thank you so much Allan.

One more thing...when I am trying to persist my row order changes in a database, I am missing other fields which are necessary for the record. What I mean is that rowReorder only posts the data as such:

action:edit
data[2317][position]:0
data[12204][position]:1

Therefore other data fields are not available for the update. My idea around this is to request the particular record when editing the order sequence (as you can see in my edit() method below) and then use this to build (applyFormData($object)) my object for updating. Does that make sense? How would you suggest this normally be handled?

    protected function create()
    {
        $contact = new stdClass();
        $this->applyFormData($contact);
        $soap = Gpx_Generic_Helpers_SoapClientHelper::getNuSoapClientWithSession('airportal', true);
        return $soap->updateClientContact(array("contact" => $contact));
    }

    protected function edit($id)
    {
        $soap = Gpx_Generic_Helpers_SoapClientHelper::getNuSoapClientWithSession('airportal', true);
        $contact = $soap->getClientContactById(array("contactId" => $id));
        $this->applyFormData($contact);
        return $soap->updateClientContact(array("contact" => $contact));
    }

    protected function delete()
    {
        $soap = Gpx_Generic_Helpers_SoapClientHelper::getSoapClient('airportal');
        $soap->removeClientContact(array("contactId" => $this->getId()));
    }

    protected function applyFormData($object)
    {
        $data = $_REQUEST['data'][$this->getId()];
        $object->position = !empty($data["position"]) ? $data["position"] : 0;
        // if field is set in request than use these values, otherwise use values from database. This is for rowReorder
        $object->name = isset($data["name"]) ? $data["name"] : $object->name;
        $object->title = isset($data["title"]) ? $data["title"] : $object->title;
        $object->phone = isset($data["phone"]) ? $data["phone"] : $object->phone;
        $object->phone2 = isset($data["phone2"]) ? $data["phone2"] : $object->phone2;
        $object->email = isset($data["email"]) ? $data["email"] : $object->email;
        $object->address1= isset($data["address1"]) ? $data["address1"] : $object->address1;
        $object->address2= isset($data["address2"]) ? $data["address2"] : $object->address2;
        $object->city= isset($data["city"]) ? $data["city"] : $object->city;
        $object->state= isset($data["state"]) ? $data["state"] : $object->state;
        $object->zip= isset($data["zip"]) ? $data["zip"] : $object->zip;
        // hidden data, always present
        if (!empty($data["client"]["id"])) {
            $object->client = new stdClass();
            $object->client->id = $data["client"]["id"];
        }
    }

    protected function defineValidation()
    {
        if ($_REQUEST['action'] != 'edit') {
            return array(
                Field::inst("name")
                    ->validator("Validate::required")
                    ->validator("Validate::maxLen", array("max" => 255))
            );
        }
    }

Additionally, I have problems with the validator giving errors on a reorder because the name field is not present only position. My work around for that is checking the action for non-edit which works for row reorder, but this won't work for actual form editing. What are your suggestions there?

Thanks.

allan

This is caused by the submit option of the form-options object. RowReorder is setting that option to be changed so only the changed values are submitted.

That's actually hard coded into RowReorder at the moment so you need to modify the source to change it. It would need to be changed to be allIfChanged to submit all of the data.

Regards,
Allan

jgessinger

Allan, just to let you know, I also need to set the option to 'allIfChanged', because my reordering has to trigger also a reorder in another table and therefore I need some more data from the reordered set than just the sequence.

So it would be great if you could implement this to the next release!

allan

I've committed the required change here. The documentation included in the commit includes an example, but basically you just need to add:

        formOptions: {
            submit: 'allIfChanged'
        }

to your rowReorder object.

The nightly version will be up-to-date with that change in a few minutes. Not yet sure when the next RowReorder release will be.

Regards,
Allan