DTE dependent API issue

DTE dependent API issue

x1484x1484 Posts: 11Questions: 1Answers: 0

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

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 50,506Questions: 1Answers: 7,508 Site admin

    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

  • x1484x1484 Posts: 11Questions: 1Answers: 0

    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

  • allanallan Posts: 50,506Questions: 1Answers: 7,508 Site admin

    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

  • x1484x1484 Posts: 11Questions: 1Answers: 0

    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

  • x1484x1484 Posts: 11Questions: 1Answers: 0

    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

  • x1484x1484 Posts: 11Questions: 1Answers: 0

    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

  • allanallan Posts: 50,506Questions: 1Answers: 7,508 Site admin

    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

  • x1484x1484 Posts: 11Questions: 1Answers: 0

    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

  • allanallan Posts: 50,506Questions: 1Answers: 7,508 Site admin
    Answer ✓

    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

  • x1484x1484 Posts: 11Questions: 1Answers: 0

    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

  • x1484x1484 Posts: 11Questions: 1Answers: 0

    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

  • allanallan Posts: 50,506Questions: 1Answers: 7,508 Site admin

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

    Allan

Sign In or Register to comment.