event.preventDefault() on specific a tags in the panel

Kirby 2 Solved ✅
1

Hi there.

I’m using the jQuery library https://datatables.net/ in a project, but inside the panel. As you can see, the table uses for it’s pagination anchor tags without the href attribute. Still, when I’m clicking on the anchor, the kirby panel app JS fires a new request and reloads the page, so that the pagination starts at 1 again, although I’m trying to paginate through the table.

So I tried to integrate an event event.preventDefault() script on this anchors below the table, but still it won’t work.

Does anyone have an idea how I can prevent the app JS to load a new page when clicking on anchors?

Thanks in advance for your help!

2

Since the Panel uses event handlers as well, you need event.stopPropagation(). I don’t know if that helps though. It depends on the order the event handlers are called.

3

If you look at kirby’s panel’s source code

you can see how they handle the click event -

$(document).on('click', 'a', function(e) {      
  
          var link = $(this);
  
          var href = link.attr('href') || "";
  
          if(link.is('[data-dropdown]') || href.match(/^#/)) {

            return true;
  
          } else {
      
            if(link.is('[data-modal]')) {
              app.modal.open(link.attr('href'));
              return false;
            } else if(link.is('[target]')) {
              return true;
            } else {
              app.content.open(href);        
              return false;
            }
  
       }
 });

So all you need is to make sure the anchors have a “#” or are set with a target, or drop-down attribute.

1 Like
4

Thanks again. My aim of this request was solved in another posting…you know where :wink: