Question posted in
You can find the official documentation here.

jQuery – How to bypass a global event – Jquery ajax

There is a global event on my site which fires on every ajax call.

$(document).ajaxStart(function (event, xhr, settings) {
    ShowLoader();
});

There are many ajax functionalities across the website and hence a global method.

And there is this new news feed feature on my site, where a user can click the button to see feed. This service is provided by a third party, who have asked me to place a script and add btn-NewsFeed class to the button, like this:

<script type="text/javascript" src="url to a third party javascript"></script>
   <a class="btn btn-NewsFeed">
      Get News Feed
   </a>

The anchor click makes an ajax call, but this method is in an external file which I cannot modify.

However, I can add another class & write a click event for this anchor tag on my site.

Is there a way, to just stop the global event for this anchor click and still not disturb its functionality.

Tags:

2

Answers


  1. 0

    You can do this in your global eventhandler function, something like this: 

    $(document).ajaxStart(function (event, xhr, settings) {
   if ($(event.target).hasClass('btn-Newsfeed')) { 
     return;
   }
   ShowLoader();
});

    edit

    This won’t work since this is not an .on('click'), ... handler where you have the element. So you have to do something different.

    You can set global to false, then this method will not fire, as per the documentation (you need to scroll down to “Additional Notes”:

    If $.ajax() or $.ajaxSetup() is called with the global option set to false, the .ajaxStart() method will not fire.

    Edit: Further explanation necessary. Read the documentation of jQuery.ajax. Here you see the parameter global which is set to true by default. Set this one to false to not trigger .ajaxStart()

    Login or Signup to reply.
  2. 0

    You can use event.target.activeElement to find which element currently has focus and based on that check if that element also have the class btn-NewsFeed. If true, simply return from the ajaxStart method, so that ShowLoader() function in never called, else continue with it.

    $(document).ajaxStart(function(event, xhr, settings) {
  if ($(event.target.activeElement).hasClass("btn-NewsFeed")) return;
  ShowLoader();
});

function ShowLoader() {
  console.log('ShowLoader called!')
}

$('.btn-NewsFeed').click(function(e) {
  e.preventDefault();
  console.clear();

  $.getJSON("https://jsonplaceholder.typicode.com/todos/1", function(data) {
    console.log('Title: ', data.title)
  });
});
$('.btn-HomeFeed').click(function(e) {
  e.preventDefault();
  console.clear();

  $.getJSON("https://jsonplaceholder.typicode.com/todos/2", function(data) {
    console.log('Title: ', data.title)
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="btn btn-HomeFeed" href="#">Get Home Feed</a><br>
<a class="btn btn-NewsFeed" href="#">Get News Feed</a>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search