Load JavaScript file using jQuery.getScript()

[ghost]

I just tried to load the .JS file using jQuery.getScript() :

$.getScript("templates/js/bootstrap-rating.min.js", function() {
    $('input.rating').rating({
        filled: 'fa fa-star',
        filledSelected: 'fa fa-star',
        empty: 'fa fa-star-o'
    });
});

I found that customized rating symbols not override defaults, while work just fine when it was first included in HTML file!. Any help?

[dreyescat]

Short answer first.

Don't use .rating class for input elements that are going to be explicitly initialized. Change the class name to other like .custom-rating or whatever name you prefer.

<input type="hidden" class="custom-rating" />

See example.

Long answer second

It is due to auto init of .rating inputs. All input elements with class .rating are auto/implicitly initialized.

As of #9 we prevent multiple initialization. So your rating is auto initialized with the default symbols first, when the $.getScript() loads the plugin file. Then, when you try to initialize the rating again with the custom symbols, this call is ignored, and hence, it looks like as if it was not properly working.

In issue #9 I considered about keeping or removing the auto initialization. It is handy, because you can declaratively define your rating elements without having to explicitly call the initialization function. However, it can also be confusing because of this hidden functionality under the hood.

Hope it solves your problem and explains why.