Question 36089 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How do I trigger a "cellClick" event in tabulator from javascript? – Jquery

I hava a page that uses tabulator to make a table. On each row of the table I habe a small thumbnail. When I click on the thumbnail a gallery opens. I want to classify the image by clicking some buttons (yes, no etc). When I click on one buttons I want to close the gallery and then have javascript go to the next cell gallery: trigger a click on the next row’s cell. I can get the cell but I cannot manage to trigger the cell click form the javascript portion. I have tried (on the cell I want to use):

//inside btn-clicked function
//after closing the gallery just want to trigger default tabulator cellClick event!
cellEl = cell.getElement();
$(cellEl).trigger('click')

and

$("document").trigger('cellClick', cell)
$("#main-table").trigger('cellClick', [cell])

None of these work.

Here is a JSFiddle: https://jsfiddle.net/q5fuon6z/

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Apparently the correct syntax for tabulator is:

     $(cell.getElement()).trigger('click')

  2. 0

    This is a totally artificial example but this demonstrates a cycle of the children when clicked.

    $("#main-table").on('click', '.cell-mate', function(event) {
  let cells = $('.cell-mate');
  cells.toggleClass("occupied next-up", false);
  $(this).toggleClass("occupied");
  let myIndex = $(this).index();
  let clickNext = $(this).index() == cells.last().index() ? cells.first() : $(this).next('.cell-mate');
  clickNext.trigger('cellClick', [$(this), myIndex, clickNext]);
});
$('.cell-mate').on('cellClick', function(event, cell, prevIndex, nextUp) {
  nextUp.toggleClass('next-up');
  $('#monitor').html(cell.html() + " at " + prevIndex + " nudged " + nextUp.html() +
    " at " + nextUp.index());
});
//start it all off (or comment out to start with a user action)
$("#main-table").find('.cell-mate').eq(0).trigger('click');
    .occupied {
  border: solid 1px #0000ff;
}

#monitor {
  border: dashed 2px #ddffdd;
  margin: 1em;
}

.next-up {
  background-color: #ffdddd;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main-table">
  <div class="cell-mate">bunk Able</div>
  <div class="cell-mate">bunk Bravo</div>
  <div class="cell-mate">bunk Cat</div>
  <div class="cell-mate">bunk Dog</div>
  <div class="cell-mate">bunk Elephant</div>
  <div class="cell-mate">bunk Giraffe</div>
</div>
<div id="monitor"></div>

    Here is another example with targets specified as "next". With this example, it does not matter what order they are in since they specify a target; which I assume exists and did not account for any missing.

    $("#main-table").on('click', '.cell-mate', function(event) {
  let cells = $('.cell-mate');
  cells.toggleClass("occupied next-up", false);
  $(this).toggleClass("occupied");
  let mytarget = $(this).data("nextup");
  let nextOne = cells.filter(function() {
    return $(this).data("iam") == mytarget;
  });
  let clickNext = $(this).index() == cells.last().index() ? cells.first() : $(this).next('.cell-mate');
  nextOne.trigger('cellClick', [$(this), $(this).index()]);
});
$('.cell-mate').on('cellClick', function(event, cell, prevIndex) {
  $(this).toggleClass('next-up');
  $('#monitor').html(cell.html() + " at " + prevIndex + " nudged " + $(this).html());
});
//start it all off (or comment out to start with a user action)
$("#main-table").find('.cell-mate').eq(0).trigger('click');
    .occupied {
  border: solid 1px #0000ff;
}

#monitor {
  border: dashed 2px #ddffdd;
  margin: 1em;
}

.next-up {
  background-color: #ffdddd;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main-table">
  <div class="cell-mate" data-iam="able" data-nextup="beans">bunk Able</div>
  <div class="cell-mate" data-iam="g" data-nextup="able">bunk Giraffe</div>
  <div class="cell-mate" data-iam="beans" data-nextup="dog">bunk Bravo</div>
  <div class="cell-mate" data-iam="cat" data-nextup="elephant">bunk Cat</div>
  <div class="cell-mate" data-iam="dog" data-nextup="cat">bunk Dog</div>
  <div class="cell-mate" data-iam="elephant" data-nextup="g">bunk Elephant</div>

</div>
<div id="monitor"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search