DTE dependent API issue

x1484

Hello

I have an issue with the DTE dependent API.

I have a DTE with an employee id column. When entered, the ajax call
returns the employee name.

My problem is that the employee_name column is always set to the previous value

gridedit.dependent( 'emp_id', function ( val, data, callback ) {

   $.ajax( {
    url: 'ajax.php',
    cache: false,
    async: false,
    data:'emp=' + val,            
    dataType:"json",
    type:"POST",
    dataType: 'json',
    success: function ( data ) {            
        emp_name = data[0].employee_name;
        gridedit.set("emp_name", emp_name );
    }
   });
});

When i insert an alert box, it gives me the right result :

success: function ( data ) {    
        emp_name = data[0].employee_name;
        alert('emp_name is ('+emp_name+')');
        gridedit.set("emp_name", emp_name );
    }

What am i doing wrong here ? is it the gridedit.set() which is wrong or
do i need to set column values somewhere else ?

Thanks so much, Bye
x1484

allan

I'd really need a link to a page showing the issue please. Is emp_name a text field or a select list?

Thanks,
Allan

x1484

Hello Allan

In fact it's a pure text field.

I found a way but as soon as i set the value after the ajax call the field becomes readonly.

This is what i do. Column 0 is emp_id, Column 1 is emp_name

During the onclick event, i store the current row in a global variable :

$('#grid').on('click', 'tbody td:not(:nth-child(2))', function() {
        current_row = table.row( this ).id();
        gridedit.inline(this, {submit: 'all'});
    }); 

and in the ajax success:

success: function ( data ) {   
        emp_name = data[0].employee_name;
        table.cell( current_row-1, 1 ).data(emp_name).draw();
    }

Immediately after the AJAX call, the value is correctly set in the current row but it's no longer editable... even if i click on it.

I will try to post a jsfiddle here but not easy to replicate.

Thanks
x1484

allan

Thank you. Yes if you are able to put it into a fiddle that would be great, or otherwise give me a link to your page. I wasn't aware you were using inline editing for example, so a working example would be really useful.

Allan

x1484

Hello,

I could reproduce it here
http://live.datatables.net/cotumegi/1/edit
But i could not upload my ajax.php file. Here it is :

    <?php

        $employee_id = strval($_POST['employee_id']); 
        $userData = array();

        switch($employee_id) {

            case '100' : 
                $data['employee_name'] = 'John';
                $data['salary'] = '10';
                array_push($userData, $data);   
                break;
            case '200' : 
                $data['employee_name'] = 'Bryan';
                $data['salary'] = '20';
                array_push($userData, $data);   
                break;
            default :
                $data['employee_name'] = '';
                $data['salary'] = '';
                array_push($userData, $data);   
                break;
        }               
        echo json_encode($userData);
    ?>

The funny thing is that it's working nice on live.datatables.net : the salary and city columns are editable. If you can upload my ajax.php file, you will see that it's not working. Once the employee_name and salary are filled, the salary column is no longer editable.

Thanks so much, Bye
x1484

x1484

Hello again Allan,

The problem is really linked to AJAX "success" part. If i remove the

// Set salary
table.cell( current_row-1, 2 ).data(salary).draw();

It's working as on live.datatables.net (where there is nothing filled in).

Please note that the 2nd column works as well (because it's not editable and i don't want it to be editable)

// Set name
table.cell( current_row-1, 1 ).data(employee_name).draw();

So the real question is how can i fill correctly a field value returned by an AJAX call so that this field remains editable after ?

Thanks so much !! Bye
x1484

x1484

Hello again

Can someone help me with this ?

I could not find any example on how to achieve this but if there is any it would be appreciated.

Thanks again
x1484

allan

So the real question is how can i fill correctly a field value returned by an AJAX call so that this field remains editable after ?

Agreed - that's the key thing here. And the answer is not to use cell().data(). Instead use the Editor field().val() method - e.g.:

gridedit.field('employee_name').val(employee_name);

The issue with using cell().data(), as you have seen, is that it will redraw the content of the cell.

There is a catch with this method though - the cell won't be visibly updated until you submit the form and the table is redrawn. This is because you are using inline editing. If it were full form it wouldn't be an issue, but Editor will only edit a single cell at a time.

It would be possible to change the HTML for the cell directly, but you'd also need to consider the case of if the submit fails or the user presses escape to not submit it. In those cases the name would need to be reverted back.

Another option would be not to show the employee id - just show the name, but have it edit the id, like in this example.

Regards,
Allan

x1484

Hello Allan

Thanks a lot for those explanations !

I have made the change using the cell().data() API as you recommended and it gaves exactly the results you mentionned (table redrawn issue).

How can i change the HTML for the cell directly ?

I mean here i'm sure the end user will not press escape or anything else...

Thanks again
x1484

allan

Try:

$(table.cell( current_row-1, 1 ).node()).html(employee_name);

That will just write the new employee name directly into the HTML without informing DataTables of the change.

Allan

x1484

Hi Allan

It works !!! ==> thanks a zillion times !!!

One latest question. If one of the cell is inline editable (let's say the salary here) and that cell, once changed, makes a calculation and displays the result in another inline editable cell (let's say an additional column called 'rate per hour')

What is the best event i can use to do such online calculation ?

Sorry again for my lack of knowledge about this nice product. I'm just starting to use it in a real life scenario but the possibilities are incredible....

Thanks, Bye
x1484

x1484

Hi Allan,

I found the answer here :
https://datatables.net/forums/discussion/41251/how-to-add-calculated-column-in-editor

Thanks again for your help
Bye
x1484

allan

Great to hear you've got it working - thanks for the update!

Allan