Problem with Jquery UI Position: target's position in the window matters?

Question

Working with DataTables + UI Position. The goal is to place a toolbar at the top of each DataTable row (the cell contents are padded down to make room.) I'm creating the toolbar on the 'draw' event, appending it to the first cell in the row, then positioning it at the row's top left. It works fine for the first row, but not for subsequent rows - unless I scroll down so each row is visible on screen as the toolbar is drawn.

CLARIFICATION: the toolbars are being drawn with the correct information and in their correct rows, they're just not being placed where I want them unless their row is in the viewport.

    // create an array of reference objects for the toolbars
    var aReviews = [];
    $("tbody tr[role=row] div.place-review").each(function () {
        aReviews.push($(this));
    })
    var safetyCounter = 0; // if there's a problem, don't just run forever
    // run in an interval so I can scoll along and watch the toolbars draw
    var reviewInterval = setInterval(() => {
        if (aReviews.length == 0 || safetyCounter == 50) {
            // we've done what there is to do or there's an issue.
            // in any case, quit.
            clearInterval(reviewInterval);
            return;
        }
        // get the first reference objects in the array
        const C = $(aReviews[0]);
        // get the stuff to display in the toolbar
        const data = dashboard.getColumnData($, C);
        const idapp = data.idapp;
        const iddeal = data.iddeal;
        const e = $(`<div class='review-interview-bar'>Hello World ${idapp} ${iddeal}</div>`);
        // append the toolbar to the cell
        C.closest('td').append(e);
        // put my toolbar at the top of the cell 
        e.position({ my: 'left top', at: 'left top', of: C.closest('td') });
        // remove the reference class so we don't draw more than once.
        C.removeClass("place-review");
        // take the current item off the list
        aReviews.shift();
        safetyCounter++;
    }, 2000);
}

Obviously I can't ask my users to scroll down to let the toolbars load correctly. How can I get the toolbars where they need to be? I'm fine with moving the toolbar into position as the row scrolls into view if that's what it takes, but how would I detect a row scrolling into view?

question from:https://stackoverflow.com/questions/65909214/problem-with-jquery-ui-position-targets-position-in-the-window-matters

Answer 1

Consider the following.

$(function() {
  // create a jQuery Object of the Table Body Rows
  var aReviews = $("tbody tr[role=row]");

  // Function to add the Toolbar to a Target (Row)
  // Data Input, and Target to append to
  function addItem(d, t) {
    var idapp = d.idapp;
    var iddeal = d.iddeal;
    var e = $("<div>", {
      class: "review-interview-bar"
    }).html("Hello World. " + idapp + ", " + iddeal).appendTo(t);
    e.position({
      my: 'left top',
      at: 'left top',
      of: t
    });
    t.closests("tr").find(".place-review").removeClass("place-review");
  }

  // Iterate each row
  aReviews.each(function(i, row) {
    // Check for place-review class inside the Row
    if ($(".place-review", row).length) {
      // Wait 2 seconds. then add the toolbar
      setTimeout(function() {
        addItem(dashboard.getColumnData($, $(".place-review", row)), $("td:first", row));
      }, 2000);
    }
    // Move on to next row
  });
});

See More:

• https://api.jquery.com/each/

The .each() method is designed to make DOM looping constructs concise and less error-prone. When called it iterates over the DOM elements that are part of the jQuery object. Each time the callback runs, it is passed the current loop iteration, beginning from 0. More importantly, the callback is fired in the context of the current DOM element, so the keyword this refers to the element.

As the loop runs, you will then use .position() and a unique target each time. You might need .offset(), it's hard to tell. If you need more help, you will have to provide a Minimal, Reproducible Example.