Thus far, we have seen how to use the first and second parameter of .load() method and we have not touched the third one. Let's refresh our memory on all three parameters of .load(), the third parameter is a callback function that invoked after the response data has been loaded into the selected elements (in our case, "#result1").

Parameters Type Description
url String URL of Server Resource to which the request is sent. If you only want to display a portion of the loaded document, add a space to the URL and follow it with a JQuery selector. $('#div1').load('http://www.ajax-tutor.com/demo/data1.html #article');
data String or Object Data to append to the URL or to send along with the request. If you pass a string, it is appended to the URL (after a ? or &, as needed). If you pass an object, it is converted to a string of ampersand-separated name=value pairs and sent along with the request. If specified as an object, the request is made using the POST method. If omitted or specified as a string, the GET method is used.
callback Function A callback function that will be invoked when the Ajax request completes. If you don't specify any data, you can pass this callback function as the second argument.

By using the same star rating example, let's make use of the callback function to disable the select element the moment the div element has been inserted response from server.

Meaning the moment a user has clicked a star, they are not allowed to change their mind anymore (obviously, this is not practical in most cases).

To disable the select element, we will have to set the readonly attribute of the JQuery Bar Rating plugin to "true".

To set readonly to true, I realize that we cannot change the setting once the plugin is initialized, therefore, I need to "destroy" it and re-initialize again by using the new setting.

function(){
    $("#movie-rating2").barrating('destroy'); we must first "destroy" the existing widget

    $("#movie-rating2").barrating({
            theme: 'css-stars',
            readonly: true, set readonly attribute to true
    });
}
                        

Let's add the third parameter of .load() and make the code looks like below.

$("#movie-rating1").change(
    function(){
        $("#result1").load(
            'http://www.ajax-tutor.com/demo/movie-rating-response.php',
            $("#movie-form2").serializeArray(),
            function(){ callback function added here
                    $("#movie-rating2").barrating('destroy');

                    $("#movie-rating2").barrating({
                            theme: 'css-stars',
                            readonly: true,
                    });
                }
            );
    });
                        

You will notice that, once you have rated it, the element will become readonly and you can't change your rating unless you reload this web page.

The Godfather (1972)

The Godfather (1972) widely regarded as one of the greatest films of all time, this mob drama, based on Mario Puzo's novel of the same name, focuses on the powerful Italian-American crime family of Don Vito Corleone (Marlon Brando).

When the don's youngest son, Michael (Al Pacino), reluctantly joins the Mafia, he becomes involved in the inevitable cycle of violence and betrayal. Although Michael tries to maintain a normal relationship with his wife, Kay (Diane Keaton), he is drawn deeper into the family business.

On scale of 1 to 10, 10 being terrific and 1 being terrible, please rate The Godfather (1972).

div id = "result1"