How to call function inside ajaxComplete from document ready in jquery?

Question

I want to execute function inside .ajaxComplete() from document ready.

$(function() {

      $(document).on('click', '.woof_radio_label', function(e) {
        if($(this).siblings('.woof_radio_term').is(':checked')) {
          $('.page-secondary-content').removeClass('open');
          $('.page-primary-content').removeClass('close');

          $(this).siblings('.woof_radio_term_reset').click();

          refineUrl();

        } else {
          $('.page-primary-content').addClass('close');
          $('.page-secondary-content, .bottom-content').addClass('open');
        }
      });

});

$(document).ajaxComplete(function() {
  function refineUrl() {
   console.log('it works');
  }
}); 

I am prompted with an error below:

Uncaught ReferenceError: refineUrl is not defined at HTMLLabelElement. (scripts-custom.js?ver=4.9.7:15) at HTMLDocument.dispatch (jquery.js?ver=1.12.4:3) at HTMLDocument.r.handle (jquery.js?ver=1.12.4:3)

When I click the class woof_radio_label it will trigger an ajax event(Product Filter), I want to call a function on ajaxComplete().

Do you know how to do this?

Answer 1

You should declare function refineUrl() globally and then it can be called from anywhere. From ajaxComplete and from document.ready as well.

Like:

$(function () {
    $(document).on('click', '.woof_radio_label', function (e) {
        if ($(this).siblings('.woof_radio_term').is(':checked')) {
            $('.page-secondary-content').removeClass('open');
            $('.page-primary-content').removeClass('close');

            $(this).siblings('.woof_radio_term_reset').click();

            refineUrl();

        } else {
            $('.page-primary-content').addClass('close');
            $('.page-secondary-content, .bottom-content').addClass('open');
        }
    });

});

$(document).ajaxComplete(function () {
    //DO another stuff
});
function refineUrl() {
    console.log('it works');
}

Answer 2

Declare your refineUrl() at the top of your script to prevent from such type of errors like,

function refineUrl() {
    console.log('it works');
}
$(function(){
     .....
});
$(document).ajaxComplete(function() {
   refineUrl(); 
});