jQuery load element not working for ajax

Question

I need to preload ajax data before attaching it to a div and for that I have this code:

$.ajax({ 
   url: 'ajax.php',
   data: { modelID:id },
   type: 'post',
   success: function(result){

      $(result).load(function(){
         $('.view_'+id).html(result)
         $('.view_'+id).find('.brandModelGallery').bxSlider({})
         $('.view_'+id).addClass('loaded')
      })

   }
})

And this doesn't return anything. If write it as $('.view_'+id).load(result) then I can see all the contents of result in console as a syntax error so it fetches them alright, but not this way. Why is that?

http://api.jquery.com/load/ I think you need to read the docs again about the `.load()` function — Mivaweb, Jun 30 '15 at 09:47
`load()` ajax method is different than `load()` method shorthand for `load` event — A. Wolff, Jun 30 '15 at 09:47
@Mivaweb in that case, how can I check if the data has loaded? — Xeen, Jun 30 '15 at 09:48
When it get to success function, the `result` is already loaded. — fuyushimoya, Jun 30 '15 at 09:49
@Xeen Which data? `html()` is synchronous method so i'm really not sure to understand what you mean — A. Wolff, Jun 30 '15 at 09:49
@fuyushimoya then why do I get `bxSlider` images still loading after the content displays? — Xeen, Jun 30 '15 at 09:49
@Xeen see e.g: http://stackoverflow.com/questions/11658605/how-to-get-bxslider-to-hide-the-slides-until-the-page-loads — A. Wolff, Jun 30 '15 at 09:52

fuyushimoya · Answer 1 · 2015-06-30T10:46:28.223

I've create an example on jsfiddle

Html:

<div id="d1"></div>
<div id="d2"></div>

js:

$.ajax({ 
   url: './',
   data: { modelID: '1' },
   type: 'post',
   success: function(result){
     console.log(result);
     $('#d1').html(JSON.stringify(result));
     // A fake object as your result.
       var bxSlider =  $('<ul class="bxslider"><li><img src="https://i.imgur.com/KsV6jS5.png" /></li><li><img src="https://i.imgur.com/bqcK47I.png" /></li></ul>');       

       // Do thing only when all img loaded.
       var unLoadimges = bxSlider.find("img").length;
       bxSlider.find('img').load(function() {
           --unLoadimges;
           console.log("loaded, left: " + unLoadimges);
           if (unLoadimges === 0) {
               bxSlider.appendTo($("#d2")).bxSlider();
           }
       });
   }
})

When you append img element to your page, it doesn't mean its loaded. Listen to its load event.

Edit: Just make the bxSlider works on my example now. Not sure if there's a better way to check whether all images loaded or not.

jQuery load element not working for ajax

1 Answers1