IE Not Waiting for content to load from ajax call

StackOverflow https://stackoverflow.com/questions/19522093

Pergunta

I am trying to apply a jquery scrollbar to a div that is populated with content from another local jquery call. My problem is that IE does not seem to wait for the content in the div to load, before calling the script for the scrollbar...hence, the scrollbar does not work correctly.

  • All other browsers work fine, IE (ver. 8, 9 ) is the only one not working.
  • when the div contains static html code, IE works fine
  • the call to the scroll function is inside a window.load

The strange thing: IF i stick an alert() call before calling the scroll code, it will work.

I have tried adding a setTimeout() function, but that did not work.

The code looks like this

<head>
  <script>
      $(document).ready(function() {
          // ajax call to populate scrollable div with html content
       });
  </script>
</head>
<body>

    <div class="scrollableDiv">

       // content populated by script call above

    </div>

    <...... lots more html here .....>
    <!-- very bottom of page -->
    <script>
       $(window).load(function(){
          // alert ("IF I ADD THIS ALERT, EVERYTHING WORKS FINE IN IE");
         $('.scrollableDiv').ClassyScroll();

       });
    </script>
  </body>

Any ideas???

Foi útil?

Solução 2

Jquery Ajax will help

It appears that you're loading the content of scrollableDiv via an ajax call perhaps? If so then that data probably will not be there when the window.load occurs. window.load does not wait for asychronous calls to complete.

The solution for that would be to put the $('.scrollableDiv').ClassyScroll(); at the end of your $(document).ready(function() {}); or put it in the success callback of an ajax call.

I do the ajax thing all the time in jquery it would look something like this:

$.ajax({
    beforeSend: function(req, settings) {
        // display a please wait spinner
    },
    complete: function(req, status) {
        // hide the please wait spinner
        // also a possible place to put code you want run after the DOM has changed
    },
    async: true,  // could omit as this is the default
    data: {param1:foo, param2:bar},
    dataType: "html",
    error: function(req, status, err) {
        // report the bad error
    },
    success: function(data, status, req) {
              // do the fun stuff here
    },
    type: "POST",
    url: someURL
});

Outras dicas

$(document).ready(function() {

Your div's content is populated when document is ready.

$(window).load(function(){

Your ClassyScroll function is called whenever your page is totally loaded.

We would need to know what you're doing to populate your div but it's probably async and doesn't block load event from firing.

Anyway, it's usually a bad idea to use both of them for a same functionality. What's i'd suggest is to simply call ClassyScroll whenever you know your div is populated (right after if synchronous, on a callback if asynchronous).

Something like :

$(document).ready(function() {
    // call function to populate scrollable div with html content
    populateDivWhatever();
    // call your classyscroll function
    $('.scrollableDiv').ClassyScroll();
});
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top