Question

I have implemented a jquery plugin ratings widget. It works great until i make an ajax call to go get data. I need the plugin to add to the new elements.

I have tried to encapsulate the script in a function and call the function again on success but with no luck.

I also cant call the function without the success so that is my main issue.

How would I turn this into a function and call it on page load and ajax call. As you can see below i tried surrounding it.

function RatingWidget(e) {
    //    jQuery.noConflict();
    $(document).ready(function() {

        //we bind only to the rateit controls within the products div
        //$('#products .rateit').bind('rated reset', function (e) {
        $(".rateit").bind('over', function(event, value) {
            $(this).attr('title', value);
        });
        $(" .rateit").bind('rated reset', function(e) {

            var ri = $(this);
            // var msg = ri.next();
            // var msg = ri.next('div .ratemsg');
            var msg = $(this).parents().nextAll("div.ratemsg:first")


            //if the use pressed reset, it will get value: 0 (to be compatible with the HTML range control), we could check if e.type == 'reset', and then set the value to  null .
            var value = ri.rateit('value');
            //var productID = ri.data('productid'); // if the product id was in some hidden field: ri.closest('li').find('input[name="productid"]').val()
            var ratingid = ri.data('ratingid');
            //   var ratingtest = ri.data('ratingtest');
            var currentTime = new Date()
            var month = currentTime.getMonth() + 1
            var day = currentTime.getDate()
            var year = currentTime.getFullYear()
            var dateoftweet = (month + "/" + day + "/" + year)
            //  var dateoftweetparse = Date.parse(dateoftweet);
            var hours = currentTime.getHours()
            var minutes = currentTime.getMinutes()
            if (minutes < 10) {
                minutes = "0" + minutes
            }
            var timeoftweet = (hours + ":" + minutes + " ")
            //  var timeoftweetparse = Date.parse(timeoftweet);


            //maybe we want to disable voting?
            ri.rateit('readonly', true);

            $.ajax({
                url: '/Home/GetRating',
                //your server side script
                data: {
                    id: ratingid,
                    value: value,
                    tweetday: dateoftweet,
                    tweettime: timeoftweet
                },
                //our data
                type: 'POST',
                success: function(data) {
                    //$('#ratemsg').html(data);
                    msg.html("<B>The TweetId is " + ratingid + " the vote value is " + value + " " + dateoftweet + "  " + timeoftweet + "</b>");
                },
                error: function(jxhr, msg, err) {
                    //  $('#response').append('<li style="color:red">' + msg + '</li>');
                    msg.html(data);
                }
            });
        });

    });
}​​

Answer 1

The ready() event gets fired once the DOM is loaded; from the documentation:

Specify a function to execute when the DOM is fully loaded.

Rather than having your RatingWidget() function re-bind the ready event once the AJAX call is done, you should have it bind the elements, e.g.

function RatingWidget() {
      $(".rateit").bind( ... )
}
$(document).ready(RatingWidget);

As @adeneo mentioned, using jQuery’s on() method (documentation here) allows you to latch on to events matching a selector regardless of which elements existed when the event was binded, so if you add new elements matching the selector, the events will trigger for them as well. This will save you the trouble of figuring out when you need to re-bind event because your elements were replaced. e.g. you may call this once and not worry about it again:

$(".rateit").on("over", function() { ... } )

Since on works differently than bind, this might introduce a performance penalty, but that depends on how often you replace elements, how many elements there are etc. — it could just might be a performance gain.