the documented ready pjax:end does not work with Jquery 3.4.1 or 2.2.4

[buttflattery]

The documented code does not work as mentioned

$(document).on('ready pjax:end', function(event) {
  $(event.target).initializeMyPlugin()
})

The above code does not call the initializeMyPlugin() on the first page load with jquery 3.4.1 or jquery-2.2.4,

i am using the following piece of of code

function loader(){
        $('.page-loader-wrapper').fadeOut();

        //assign respective values to the associated hidden fields
        $("#rco,#dco").on('click',function(e){
            var buttonId = $(this).attr('id');
            $("#"+buttonId+"_input").val(1);
        });
    }
    
    $(document).on("pjax:beforeSend",function(e){
        $('.page-loader-wrapper').fadeIn();
    }).on("ready pjax:end",function(){
        loader();
    });

and the loader() function is never called on the first page load, only called on pjax:end . i am using this code in Yii2 framework and the output is like below

</script><script src="/assets/9f3f0907/jquery.js"></script>
<script src="/assets/b6f73355/yii.js"></script>
<script src="/assets/b6f73355/yii.gridView.js"></script>
<script src="/assets/e0e575b7/jquery.pjax.js"></script>
<script src="/assets/27eba27c/js/bootstrap.js"></script>
<script>jQuery(function ($) {

    function loader(){
        $('.page-loader-wrapper').fadeOut();

        //assign respective values to the associated hidden fields
        $("#rco,#dco").on('click',function(e){
            var buttonId = $(this).attr('id');
            $("#"+buttonId+"_input").val(1);
        });
    }
    $(document).on("pjax:beforeSend",function(e){
        $('.page-loader-wrapper').fadeIn();
    }).on("pjax:end",function(){
        loader();
    });
jQuery('#w0').yiiGridView('setSelectionColumn', {"name":"selection[]","class":null,"multiple":true,"checkAll":"selection_all"});
jQuery('#w0').yiiGridView({"filterUrl":"\/site\/test","filterSelector":"#w0-filters input, #w0-filters select","filterOnFocusOut":true});
jQuery(document).pjax("#pjax-container a", {"push":true,"replace":false,"timeout":10000,"scrollTo":false,"container":"#pjax-container"});
jQuery(document).on("submit", "#pjax-container form[data-pjax]", function (event) {jQuery.pjax.submit(event, {"push":true,"replace":false,"timeout":10000,"scrollTo":false,"container":"#pjax-container"});});
     setTimeout(function () {
        $('.page-loader-wrapper').fadeOut();
    }, 50);
});</script></body>
</html>

[drewminns]

Hi there,

You can try using the jQuery Migrate Plugin to add in support for any missing jQuery methods or properties that were removed as jQuery was developed into newer versions.

In my case, I was receiving errors regarding event.props being undefined.

jQuery Migrate Plugin

[buttflattery]

@drewminns i aint getting any errors on console i dont think jquery migrate could work in this situation other than the one you pointed out you were facing

[amywieliczka]

Just dealt with this myself - $(document).on('ready') was deprecated in jQuery 3.0, and even before that, the handler wouldn't run anyway if the DOM is ready before the event is attached: discussed in the documentation here: https://api.jquery.com/ready/ under the list of ways to attach a function that will run when the DOM is ready. (Deprecation note here: https://jquery.com/upgrade-guide/3.0/#breaking-change-on-quot-ready-quot-fn-removed)

I wound up doing something like this:

handler = function() { ... }
$( handler )
$(document).on('pjax:end', handler)

I went to file a PR to the README here, but realized the ready event handler has never received any arguments (as shown in the jquery pjax README), so I'm not sure what event.target in the documentation refers to in the case of the ready event firing.

[TheBoringBOT]

Just dealt with this myself - $(document).on('ready') was deprecated in jQuery 3.0, and even before that, the handler wouldn't run anyway if the DOM is ready before the event is attached: discussed in the documentation here: https://api.jquery.com/ready/ under the list of ways to attach a function that will run when the DOM is ready. (Deprecation note here: https://jquery.com/upgrade-guide/3.0/#breaking-change-on-quot-ready-quot-fn-removed)

I wound up doing something like this:

handler = function() { ... }
$( handler )
$(document).on('pjax:end', handler)

I went to file a PR to the README here, but realized the ready event handler has never received any arguments (as shown in the jquery pjax README), so I'm not sure what event.target in the documentation refers to in the case of the ready event firing.

@amywieliczka
Could you explain a little more on this with your fix. I wasn't sure how to implement what your fix

[MosheGross]

I found this to be the easiest option

$(document).on('pjax:end', function(event) {
    // my code here 
}).trigger('pjax:end');

basically triggers the events attached to pjax:end