如何在按钮单击/下拉打开时将JS发送到PHP？

Question

I'm developing a Notification System on my web application and I'm new to JS/Ajax. What I need to do is to send a variable to my PHP which runs a Update code on my server to set the notifications as read, ideally, when the user opens the Notification Dropdown.

I've tried to use OnClick functions, however, the button didn't seem to activate the Ajax as no data was updated. Currently I'm also trying to use a 'data-role' on my a tag + $(document).on('click','a[data-role=...) on the dropdown a tag, and yet the ajax doesn't seem to activate. I've look around and I didn't seem to find anything related to such a thing. I don't know if since the a tag is already toggling the dropdown it's unable to also toggle the ajax?
Disclaimer: This is my first question here, so sorry if I oversimplify/overcomplicate things.

Ajax Code

$(document).ready(function(){
  $(document).on('click','a[data-role=update]',function(){
    var read  = 'Y';
    $.ajax({
      url      : 'Notification.php',
      method   : 'post',
      data     : {read : read},
      success  : function(response){
        // now update user record in table
        alert("Ajax sent the info!");
      }
    });
  });
});

Which should be activated when user clicks on the dropdown toggle

<a href="#" class="m-nav__link m-dropdown__toggle" data-role="update">
  <span class="m-nav__link-badge badge badge-square badge-danger">
      <?php  echo $count; ?>
      //This var is just a badge w/ a number of notifications
  </span>
  <span class="m-nav__link-icon">
     <i class="flaticon-music-2"></i>
  </span>
</a>

My Notification.php has the following code.

include_once("../app_config.php");
  $read = $_POST['read'];
  if ($read='Y') {

  $conexaon = new Connection();
  $sqlu = "UPDATE tbl_prinotificacao SET pn_unread = 'N' ORDER BY pn_datetime desc";
  $resultu = $conexaon->consulta($sqlu);

  if($resultu){
    echo 'data updated';
  }
}

I expect to ajax to send the var via post for the PHP when the user opens the dropdown and when the user changes pages, the notifications should be gone. I tested the PHP alone and it does updates the data on the table. However, nothing ajax related happens when I open the dropdown, it only opens the dropdown normally and doesn't activate the ajax.

Answer 1

Thanks to @NicoHaase's Suggestion of the Network debugging, I was able to find the problem. the ajax url was incorrect. I corrected the url and the code worked.

I had to change the url to get the correct path to Notification.php

$(document).ready(function(){
  $(document).on('click','a[data-role=update]',function(){
    var read  = 'Y';
    $.ajax({
      url      : '../../resource/include/Notification.php',
      method   : 'post',
      data     : {read : read},
      success  : function(response){
        // now update user record in table
        alert("Ajax sent the info!");
      }
    });
  });
});

The problem seemed to happen since even though the Notification.php was on the same folder as the Menu file that I was using the a tag, it was being imported on the index file on another folder, so I had to adapt to that path. Thank you Nico Hasse.