Question

I am using a jQuery rating plugin inside a asp:listview with in a asp:update panel. Below is the function which is being called on click of rating stars.

function DisplayRatings() {            
            $('DIV.ratingBar').each(function() {
                var id = $(this).attr('id');
                var count = $(this).attr('rel');
                $('#' + id).raty({
                    showCancel: false,
                    readOnly: false,
                    showHalf: true,
                    start: count,
                    onClick: function(score) {                    
                      // I have to pass the score and ID to server side                    
                    }
                });
            });
        }

Now I have to pass the ‘score’ and ‘ID’ to server side and call a method which rebinds the listview and updates the rating on the screen without screen refresh.
Please suggest how to go about this.( I can’t use ajax toolkit rating as it doesn’t support half star rating)

Answer 1

To pass data to the server, just store it in hidden form fields (in the UpdatePanel):

<asp:HiddenField id="score" runat="server" name="Score" ClientIDMode="Static" />
<asp:HiddenField id="id" runat="server" name="Score" ClientIDMode="Static" />

If you had a lot of data to pass back and forth, probably it would make sense just to use one hidden field and use serialization/deserialization to store it all there. Then in your onClick function, set the values of those fields, and initiate an async postback:

$('#score').val(score);
$('#id').val(id);
__doPostBack('UpdatePanelID', '') 

This will cause an async update of your UpdatePanel, same as if a bound submit control was clicked by the user.

Note that if the jQuery control itself is in the UpdatePanel, you will have to reconfigure it after the async postback, since the effect is just as if the page had been reloaded as far as it is concerned. However, any javascript code which you may have run in $(document).ready() will not run after an async postback, since the whole page wasn’t actually reloaded.

Ideally, keep the rating control outside the update panel, since you probably don’t want it to change as a result of an event it initiated. If this isn’t possible for some reason, or you just need a dynamic way to configure it the first time it is visible, then add a hook from the end of a page refresh:

// Page startup script - this adds a hook after an update panel is refreshed
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(onRefresh);

function onRefresh(sender, args) {
    // You can try to check which panel was updated
    var panelsUpdated  = args.get_panelsUpdated();
    var panelsCreated = args.get_panelsCreated();
    // but usually it's easier to just track the state of your jquery stuff
    if (my_jquery_thing_is_visible &&
        my_indicator_that_it_has_already_been_configured===false) {
        configureJqueryThing();
    }
}