I am trying to display a message bar during postback. I am using a jQuery script I found online here. Everything works great separately, but when the jQuery is added to the page my server side event is never called.

Here is my button code:

<asp:Button ID=btnGetReport CssClass=float-left runat=server 

Text=<%$ Glossary:GetReport %> OnClick=btnGetReport_Click />

This is the inline script:

<script type=text/javascript>

$(document).ready(function () {

    $('#<%=btnGetReport.ClientID%>').click(function (event) {

        event.preventDefault();

        $('#message_bar').displayMessage({

            position: 'fixed',

            skin: 'modern',

            message: 'We are fetching your report. Please wait...',

        });

    });

});

</script>

This is the related external .js file:

(function( $ ){



$.fn.displayMessage = function(options) {



    // Default configuration properties.

     var defaults = {

              message       : 'Error message',

              speed         : 'fast',

              position      : 'fixed', // relative, absolute, fixed

              autohide      : true

     }



    var options = $.extend( defaults, options );

    $(this).slideUp('fast');

    $(this).removeClass().empty();

    return this.each(function() {



      var sticky = (options.sticky == false) ? 'relative' : 'absolute';

      $(this).addClass('messagebar-skin-'+options.skin+'_bar').css('position',options.position).css('background-color',options.background);

      $(this).append('<div class=messagebar-skin-'+options.skin+'_inner><span class=messagebar-skin-'+options.skin+'_text></span></div>').css('color',options.color);

      $(this).find('span').html(options.message);



      $(this).slideDown(options.speed ,function(){



         var parent = ($(this).attr('id')) ? #+$(this).attr('id') : .+$(this).attr('class');

         var close_button = ($(this).find('a').attr('id')) ? #+$(this).find('a').attr('id') : .+$(this).find('a').attr('class');



         if(options.autohide == true)

         {

            $(this).delay(2400).fadeOut('slow');

         }



         $(parent+>div>+close_button).bind(click, function (event) {

            event.preventDefault();

            $(parent+>div>+close_button).animate({opacity: hide}, function(){

                $(parent+>div>span).fadeOut(slow).html();

                $(parent+>div>+close_button).parent().parent().slideUp(options.speed);

            });

         });



  });



});



};

})( jQuery );

I have also tried calling the function with the OnClientClick property, but neither one seems to work. I looked at other examples where people were having issues with this but none of them seemed to help either.

Any thoughts would be greatly appreciated!