CODEWITHSUNDEEP
javascriptjqueryhtmlajax
user1907859
user1907859

Reputation: 574

Check if <div> has been asynchronously loaded with data-url

I have a JSP with the following <div>:

<div class="articleInfo" data-url="${article.url}/infoSheet"></div>

If there is any data available for the article, then it will be populated inside the <div> like this:

<div class="articleInfo" data-url="${article.url}/infoSheet">
     <div class="data">This is data</div>
</div>

If no data is available then the <div> is left as is.

I tried to do a check with jQuery if the "articleInfo" div has any children, but it doesn't, even if I put the check in the end of $(document).ready(function () {} of the last javascript file loaded. I suppose this is due to how the data is loaded with the data-url attribute of the <div>.

How can I check if any data has been populated?

Upvotes: 1

Views: 255

Answers (2)

Maciej Sikora
Maciej Sikora

Reputation: 20162

OK, i suppose You have no callback for this ajax downloading staff, and this operation not leave any signs of doing ajax like data attributes. If so - no callbacks and signs in DOM then my proposition is to do setInterval and in there check divs has data or not:

var checkedCount=0;
var maxCheckCount=5;//we check 5 times
var checkInterval=setInterval(function(){

  var $divs=$('div[data-url]');

   $divs.each(function(index){

       if ( $(this).find("div.data") ){

           //our div has data
       }else{

           //our div has no data ( maybe will be downloaded? )

       }
   });

   checkedCount++;

   if (checkedCount==maxCheckCount)
   clearInterval(checkInterval);

},1000); //check every 1 sec

So we check 5 times, one on 1 second ( customise it to Your needs). This is not perfect solution, if ajax will be long, then it will stop working before ajax end.

You can also watch changes in DOM:

$('div[data-url]').bind('DOMSubtreeModified', function(e) {

     if ($(this).find("div.data")){

         //div has data
     }else{

        //div has no data but in this situation this never calls
     }


});

Upvotes: 0

Rohan Kumar
Rohan Kumar

Reputation: 40639

You can use is() with :empty like

$(function(){
    // assuming there is single element having class articleInfo
    alert($('.articleInfo').is(':empty'));
});

And if your articleInfo div is filled asynchronously then you need to check its data in your ajax callback like,

$.ajax({
   url:....
   data:...
   success:function(data){
       if(!data){
          // this div url has no data
       }
   }
});

Upvotes: 1

Related Questions