JQuery selector not working from external js file

Question

1. I am using a library jquery.peity.min.js and loading it first.

2. Then I have myscript.js which uses the function in above library as follows.

   $(".donut-mult").peity("donut", {
     width: 82,height:82,
     innerRadius:35,
     fill: ["#2ac7d7", "#fff"]
   })  
   

This myscript.js is loaded after jquery.peity.min.js.

3. Now I make ajax call to sample.jsp.

4. sample.jsp has a span as follows

   <span class="donut-mult">5/5</span>
   

The javascript function in myscript.js is not getting bound to this span class and hence I cannot see the expected visualization.

Any suggestions ?

Answer 1

If you make a jquery selection before loading contents via ajax it will not work because they don't yet exist in the document. You need to load the content first before calling any functions that uses those html elements.

Use this code in your myscript.js

$(document).ready(function() {
    // The container where you will load the content of sample.jsp
    var $container = $('#donut-container'); 

    // Load via ajax
    $.ajax({
        url: 'sample.jsp',
        type: 'GET',
        success: function(data) {
            // load sample.jsp content to the container
            $container.html(data); 

            // process the spans with class="donut-mult" loaded in the container
            // you can also use $('#donut-container .donut-mult').peity(...) 
            // instead of `$container.find`
            $container.find('.donut-mult').peity("donut", {
                width: 82,height:82,
                innerRadius:35,
                fill: ["#2ac7d7", "#fff"]
            })  
        }
    })
});