how to run function on bootstrap modal pop-up (javascript, jquery)

Question

I've made a test, where each question is shown in a modal. The same modal, only the content inside is changed after each question. The result must also be shown in the same modal. To show the result, I use progressbar.js ( http://kimmobrunfeldt.github.io/progressbar.js/#examples ). This is how it looks like in my index file:

 function result() {

    $('.progress1').css('display', 'block');

    var startColor = '#FC5B3F';
    var endColor = '#6FD57F';

    var circle = new ProgressBar.Circle('.progress1', {
        color: startColor,
        easing: 'easeIn',
        strokeWidth: 8,
        trailWidth: 0,
        duration: 2000,
        text: {
            value: '0',
            style: {
                color: '#000'
            }
        },

        step: function(state, bar) {
            bar.setText((bar.value() * 100).toFixed(0));
        }
    });


    function rangeToPercent(number, min, max){
        return ((number - min) / (max - min));
    }
    var value = rangeToPercent(counterAnswer, 0, counterQ)





    // This will determine the circumference of the circle
    circle.animate(value, {
        from: {color: startColor},
        to: {color: endColor}, 
        step: function(state, circle, bar) {
            circle.path.setAttribute('stroke', state.color);
            console.log(circle);
            circle.setText((circle.value() * 100).toFixed(0));
        }
    });
}

After the last question is done (when the modal is not visible yet) I change modal content to

 <h2 style='text-align: center; font-weight: bold;'>Your score is:</h3><br>
 <div style='margin: auto;' class='progress1' value='0'></div>

and add new class to the modal $('#myModalTest').addClass('result'); . In my script I have: $(".result").on('shown.bs.modal', function () { result(); });

But this doesn't work. I tried to put result(); in setTimeOut (and run it without $(".result").on('shown.bs.modal', function () {result();}); ), but then it runs 4 times creating 4 circles (I have no idea why). Please help.

Answer 1

Are you loading the modal content dynamically?

We had this problem and got it working by using adding this at the end of the modal content:

(function() {
    // Your code here
})();

When the content is loaded by the modal it will run the javascript.

Answer 2

Having read through your question again, I think the code to add the shown event to the modal is being run before you add the result class to it.

So page loads and runs (presumably in a script tag at the end of the page?):

$(".result").on('shown.bs.modal', function () {
    result();
});

The selector $(".result") won't find anything at this point so your shown event is not bound on anything.

You then add the class result to the modal

$('#myModalTest').addClass('result');

and fire up the modal but the modal doesn't have the event wired up.

I think you need to either do this in the first place:

$("#myModalTest").on('shown.bs.modal', function () {
    result();
});

because why is the result class needed? Or do:

$('#myModalTest').addClass('result').on('shown.bs.modal', function () {
    result();
});

when you add the class to add the event.

I havent tested any of that but the logic seems right, depending on what is in the code I can't see.