Capture button-push with Javascript

API & Customization
1

I want to, in a Javascript, capture a click on a menu button to send a Webhook to make.com. I can’t see the class/id of the button, so the event can be handled. They seem similar for the two buttons in the screenshot?

knack_2

knack_1
knack_11104×692 40.6 KB

Code so far (this shoots the code for both buttons):

/******************************************************************************** */
/* Code to implement print pdf for prosjektlogg, make -> documint                 */
/******************************************************************************** */
$(document).on('knack-view-render.any', function(event, view) {
  $(".menu-links__list-item a").click(function(e) {
    console.log("knaypp trykket");
    e.preventDefault(); // Forhindrer standard handlingen for lenken
    // Hente prosjekt-ID fra detaljvisningen. Dette kan kreve tilpasning basert på hvordan dataene dine er strukturert.
    var prosjektId = $('#view_16 .some-class-for-project-id').text();

    // Sjekker om prosjekt-ID er hentet
    if (prosjektId) {
      // Din webhook URL med prosjekt-ID inkludert i spørringsstrengen
      var webhookUrl = `https://hook.eu2.make.com/2rxnxq9bd6sjsybrxckzrni2w6o2tbhb?prosjektId=${prosjektId}`;

      // Sender en GET-forespørsel til webhooken
      $.ajax({
        url: webhookUrl,
        type: 'GET',
        success: function(response) {
          // Behandler suksessrespons
          console.log('Webhook suksess', response);
          alert('Webhook ble utløst med prosjekt-id: ' + prosjektId);
        },
        error: function(xhr, status, error) {
          // Behandler feilrespons
          console.error('Webhook feil', status, error);
          alert('Noe gikk galt med å utløse webhook.');
        }
      });
    } else {
      alert('Prosjekt-id ikke funnet, kan ikke utløse webhook.');
    }
  });
});
2

In your example, the code is firing for both buttons because they share the same selector:
.menu-links__list-item a

Instead of selecting the links by class or id, try selecting by the value of its data-kn-id attribute.

So for example, instead of '.menu-links__list-item a' try using 'a[data-kn-id="123"]' replacing 123 with the unique value in your screenshot. Make sure you’re using single quotes, not double quotes.

To be even more specific, you can try '.menu-links__list-item a[data-kn-id="123"]' and it should work too.

3

The data_kn_id is changing for each load of the page. I was using this id in the beginning, but discovered it changes.

4

@Ronny I experienced a similar issue with adding an event handler to action link in a table. The link Id changes for each record and the action link index number couldn’t be used.

The solution is to target the menu button by its position in the menu. See below:

-right click on the button you want to use as the trigger when viewing from the web and inspect the element to find the position number. The the first menu button would look something like this data-menu-link-count=“1” .

$(document).on(‘knack-view-render.view_16’, function(event, view, data) {
// Target the menu link with data-menu-link-count attribute equal to ‘1’
$(‘a[data-menu-link-count=“1”]’).on(‘click’, function(event) {
event.preventDefault(); // Prevent default button action

    // Log success in the console
    console.log('Menu button with link count 1 clicked successfully');
});

});

5

In that case, if the data-kn-id is changing for each load of the page, then you can target the button by its position in the menu, as Brandon said. You can also target the button by its text (e.g. “Create Invoice”) since the button position may change in the future.

1 Like