Why would transpose give me the incorrect column index?

thegamechangerpro

Can't seem to get this one working right in this situation:

I'm getting the correct column index, but when I transpose it to get the header name and the transposed index, it's one off (unless I hide a column)...

This comes after my column reorder.

$('button#calendardrop').datepicker({
  dateFormat: "mm/dd/yyyy", 
  showOn: "button",
  buttonText: '<i class="fa fa-calendar"></i>',   
}).on('changeDate', function(ev, col, e, row){
    $('button#calendardrop').datepicker('hide');
       var $currentTr = $(this).closest('tr');
       var  colidx = $('td:visible',$currentTr).index($(this).closest('td'));
       var newidx =  table.colReorder.transpose( colidx );
       var title = table.column( newidx ).header(); 
       var unix = ev.date.valueOf();
       var tsdate = moment.utc(unix).format("MM/DD/YYYY");
       var data = table.row( $(this).parents('tr') ).data();
       var rowidx = table.row( $(this).parents('tr') ).index();
      table.cell(rowidx, newidx).data(tsdate).draw();
      var id = data.id; 
      var sp =  id  + ' | ' + $(title).html() + ' | ' + tsdate;
      FileMaker.PerformScriptWithOption('webPort - edit info', sp, 0);
});

If it's not obvious what the problem is with that, I will happily post a fiddle.

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

It's working in this example, so yep, we would need to see a fiddle demonstrating the problem, please.

Colin

thegamechangerpro

https://jsfiddle.net/thegamechangerpro/kdb0c1gu/11/

Essentially i want to pull the column index of the the clicked button so that I can get the name which I need to pass to my external script service.

allan

Sorry, I'm not quite following it yet. Could you give me the steps for what you do and what you would expect to see happen? At the moment it is giving an error about FileMaker not being present when blurring a cell. Perhaps it needs a console.log to show the issue there?

Allan

thegamechangerpro

Hi Allan,

I appreciate the interest. So, essentially I have created an columnDef that adds that calendar button to various date columns. Essentially I'm trying to get the column header of the edited date column to pass the changed into filemaker (my database backend).

My method of accomplishing this (as I have done in the createdCell blurring event) is to get the transposed column index then use that to get the header, which is passed to my filemaker backend.

If there is an easier way to do this, I would be happy to try something new.

kthorngren

I might be wrong but I don't think you need to worry about getting the column index. See the column-selector for all the options to select the column. Looks like you can just pass in the td the button is in, for example:

$('button#calendardrop').datepicker({
  dateFormat: "mm/dd/yyyy", 
  showOn: "button",
  buttonText: '<i class="fa fa-calendar"></i>',   
}).on('changeDate', function(ev, col, e, row){
    $('button#calendardrop').datepicker('hide');
       var td = $(this).closest('td');
       var title = table.column(td).header();
       var $currentTr = $(this).closest('tr');
       var  colidx = $('td',$currentTr).index($(this).closest('td')); 
       var newidx =  table.colReorder.transpose( colidx );
       //var title = table.column( colidx ).header(); 
       alert($(title).html());

Specifically:

       var td = $(this).closest('td');
       var title = table.column(td).header();

See the updated test case:
https://jsfiddle.net/4d381yo9/

Kevin

thegamechangerpro

Oh man...

This is so obvious. Thanks so much guys. I appreciate this greatly!

thegamechangerpro

Any idea why the buttons only work once? I imagine it has something to do with bubbling, no? How does one solve that?

kthorngren

You will probably want to use delegated events instead of the selector $('button#calendardrop'). See this example.

Also it looks like you are using the same id of calendardrop more than once on the page. The id needs to be unique on the page. jQuery will only find one id. Instead maybe use a classname or the name attribute for the buttons to use as part of the selector.

Kevin

thegamechangerpro

I'll give that a shot.

I am also still running into the issue of getting the wrong column index when trying to set the cell in the calendar column.

  table.cell(rowidx, newidx).data(tsdate).draw();

Is there a different way i should be doing this?

kthorngren

Maybe you can do the same with the cell-selector and just use the td variable from var td = $(this).closest('td');. For example:

table.cell( td ).data(tsdate).draw();

Kevin