jquery 'load()' event methods is not working inside jquery ready() event method on mobile browsers

Question

I tested on firefox mobile and chrome mobile browser. Perfectly working on computer browsers

Here is my code inside ready() and load() event method:

$(document).ready(function(){
    $(window).on('load hashchange', function(event) {
       alert();
    });
});

Why alert() is not working after page completed loading.

And here is my another code:

$(function({
   $.ajaxSetup({
    headers : {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
   });
});
$(window).on('load hashchange', function(event) {
    $.ajax({
      //ajax request faild due to csrf token mismatch
    });
});

I didn't found any X-CSRF-TOKEN request header on chrome devtools.

According to the w3schools 'The ready() method should not be used together with <body onload="">'. But I'm not using any html inline load event. Please help me to find out this issue.

I'm using jquery v3.6.0 on my project. Also I used usb remote debugging for check request headers. Thanks in advance

acdcjunior · Accepted Answer · 2022-10-19 03:27:00Z

1

In Chrome Desktop $(document).ready(fn) will run before $(window).on('load', fn).

In Desktop/Mobile Firefox and Mobile Chrome, ready runs after load.

Try:

const print = (s) => out.innerHTML += '\n' + s;
$(document).ready(function() { print('ready'); });
$(window).on('load', function() { print('load'); });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<pre id="out"></pre>

So, you shouldn't rely on their order for code that has some kind of time-related coupling.

For instance, you could run both on either ready or load, or even run that .ajaxSetup directly (not wrapped into a ready).

answered Oct 19, 2022 at 3:27

acdcjunior

136k37 gold badges341 silver badges312 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mohammudullaha Khan Over a year ago

Hi, Thanks for the answers, that means codes inside ready function is executing after load function executes. That's why I'm not getting any headers included request. Thanks again for solve this

fdomn-m Over a year ago

As noted in the answer, but worth re-iterating: doc.ready is there to run code when the DOM is has finished loading and is ready for manipulation. Your $.ajaxSetup({ needs the meta tag from the header so should be ok to run immediately, without needing to be in a doc.ready or onload - as long as your code exists in the page content after that meta tag

Collectives™ on Stack Overflow

jquery 'load()' event methods is not working inside jquery ready() event method on mobile browsers

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related