update cell on ajax success

crush123

Further to my original question on this thread http://datatables.net/forums/discussion/32872/

i am having problems with updating a cell in my table, which should be done only on ajax success.

What I want to do is simply set the cell value to a string value

table.cell( $(this).closest('tr'), 5 ).data( 'Re-subscribed Successfully' )

which works, but not on success

success: function(data) {
                  console.log('Success!', data);
                  var table = $('#example').DataTable();
                  //table.cell( $(this).closest('tr'), 5 ).data( 'Re-subscribed Successfully' )
                  setTimeout( function () {
                      table.draw();
                  }, 1500 );                       
              },

d0mokun

Is that your exact code above? If so, your problem is with the edited out code:

//table.cell

crush123

i edited out the line as it is this which causes the error within the ajax success function, but works perfectly outside of it

d0mokun

Have you tried it without the setTimeout function at the end?

You can call a redraw via the console to see if it fires then.

crush123

Yes, I think it's the way datatables handles ajax success

d0mokun

I've not had any trouble calling functions in a success return and there's nothing particularly complex about the function you're attempting to call.

One last thing from me.. there is a semi colon missing:

table.cell( $(this).closest('tr'), 5 ).data( 'Re-subscribed Successfully' )
    setTimeout( function () { table.draw(); }, 1500 );  }

Should be

table.cell( $(this).closest('tr'), 5 ).data( 'Re-subscribed Successfully' ) ;
    setTimeout( function () { table.draw(); }, 1500 );  }

crush123

thanks for that spot, and for all of your input.

unfortunately the problem persists, i still get the error

Uncaught TypeError: Cannot read property 'row' of undefined on query.dataTables.min.js:128 

interestingly, if i dont try to update the table cell, and instead just write to the dom it works ok

allan

Thank you for posting the error.

What is this in your Ajax success function? it isn't likely to be the td cell - I think jQuery executes that Ajax success in a window context (although I might be wrong). Have you checked to see what this is? I'd suggest you get the row node before you make the Ajax call so you can keep the scope of execution.

Could you possibly post continuation questions in the same thread in future, it just makes it a little easier to track the issue.

Thanks,
Allan

crush123

sorry, working at the limits of my knowledge here.

I cant work out how to get the row node. I tried the API reference but no joy

The row data is table.row($(this).closest('tr')).data(); but thats as close as i can get

allan

You need to get it before you execute the Ajax request - when this is still the node.

If you are still having problems with that please post the full chunk of code for the event handler.

Allan

crush123

thanks allan

here is my code snippet...

$('#example').on('click', 'td.ajaxresub', function (e) {
    e.preventDefault();     
    var table = $('#example').DataTable();
    var myclass = table.row($(this).closest('tr')).data()[0];
    var email = table.row($(this).closest('tr')).data()[1];     

    $.ajax ({
            url: '/ajax/ajax_mailchimp_resubscribe.php',
            data: {email: email},
            method :'POST',
            success: function(data) {
                  console.log('Success!', data);
                  var table = $('#example').DataTable();
                  console.log($(this));
                  //table.cell( $(this).closest('tr'), 5 ).data( 'Re-subscribed Successfully' );
                  setTimeout( function () {
                      table.draw();
                  }, 1500 );                       
              },
            error: function(e) {
                  console.log('Error!', e);
              }
            } )

    } );

allan

The most minimal change would be:

$('#example').on('click', 'td.ajaxresub', function (e) {
    e.preventDefault();    
    var table = $('#example').DataTable();
    var myclass = table.row($(this).closest('tr')).data()[0];
    var email = table.row($(this).closest('tr')).data()[1];    
    var row = $(this).closest('tr');
 
    $.ajax ({
            url: '/ajax/ajax_mailchimp_resubscribe.php',
            data: {email: email},
            method :'POST',
            success: function(data) {
                  console.log('Success!', data);
                  var table = $('#example').DataTable();
                  console.log($(this));
                  table.cell( row, 5 ).data( 'Re-subscribed Successfully' );
                  setTimeout( function () {
                      table.draw();
                  }, 1500 );                      
              },
            error: function(e) {
                  console.log('Error!', e);
              }
            } )
 
    } );

Obviously it could be tidied up more so row is used to get myclass and email.

Allan

crush123

perfect, thanks (yet again) for your great support