Click a button in Item Details block when user clicks a button in a separate Item List Block

Custom Coding
1

Greetings Custom Coders!

I am looking to execute a button in the Item Details block at the top of a page when the user clicks a button further down the page. The reason is that I need to Open a specific page URL with query parameters from AirTable since the Item List has no context to the Item Details in Open URL.

I have this code here, but it opens BOTH URLs in overlapping modals, the triggerButton URL AND the targetButton URL (with the triggerButton URL on top of the targetButton URL).

Seems like the event.preventDefault() is not working.

<script>
console.log("start loading script");
  // Function to handle the button click
function addLogButtonClick(event) {
      event.preventDefault(); // Prevent the default action of the clicked button
      console.log("ran prevent default");

      // Find the button with the query selector for [data-action-id="_0gqbudsnw"]
      const targetButton = document.querySelector('button[data-action-id="_0gqbudsnw"]');
      if (targetButton) {
          targetButton.click(); // Trigger a click event on the found button
          console.log("target button was executed");
      }
  }


// Function to wait until the triggerButton has loaded
  function waitForTriggerButton() {
    const triggerButton = document.querySelector('button[data-action-button-id="list-timeline-logs-visible-btn-_jgyfeq8js"]');
    if (triggerButton) {
        triggerButton.addEventListener('click', addLogButtonClick);
        console.log("addLogButtonClick event listener created");
        console.log("triggerButton: "+triggerButton);
    } else {
            setTimeout(waitForTriggerButton, 100); // Check again after 100ms if the button is not yet loaded
            console.log("waiting...");
        }
    }

    // Ensure the DOM is fully loaded before starting the button check
    document.addEventListener('DOMContentLoaded', waitForTriggerButton);
    console.log("waitForTriggerButton event listener created");
    console.log("finish loading script");
</script>

Any ideas how to stop the click action on the triggerButton?

2

Hi,
Can you try to add event.stopPropagation(); in addition?

3

BAM! it worked.

Script:

<script>
function addLogButtonClick(event) {
      event.stopPropagation();
      event.preventDefault();
      const targetButton = document.querySelector('button[data-action-id="_0gqbudsnw"]');
      if (targetButton) {
          targetButton.click();
      }
  }
function waitForTriggerButton() {
    const triggerButton = document.querySelector('button[data-action-button-id="list-timeline-logs-visible-btn-_jgyfeq8js"]');
    if (triggerButton) {
        triggerButton.addEventListener('click', addLogButtonClick);
    } else {
        setTimeout(waitForTriggerButton, 100);
    }
}
document.addEventListener('DOMContentLoaded', waitForTriggerButton);
</script>
4

Great :wink: