Question

Good afternoon all

Here is my scenario:

I have user controls within a master page and within a user control, I may have an update panel. I have the following bit of code I place within a usercontrol that maintains various control styling during partial postback i.e. those controls affected within by an asp update panel.

function pageLoad(sender, args) {
        if (args.get_isPartialLoad()) {
            $("select, span, input").uniform();

Indeed, when an update panel does its thing, the Fancy Dan styling is maintained.

However, I have one gripe – when a ‘large’ partial postback occurs, occassionally you’ll see the default, generic control styling reappear breifly and then the uniform kicks in to reapply the new fancy styles.

Is there any way I can avoid seeing the nasty old, default, bland stylings?

Any suggestions greatly appreciated.

Answer 1

Check out working with PageManagerRequests: MSDN Working With PageRequestManager

1. Sys.WebForms.PageLoadingEventArgs Class

2. Sys.WebForms.PageRequestManager pageLoading Event

   $(function() {
       Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(beautify);
   });
   
   
   function beautify(sender, eventArgs) {
       // If we have event args
       if (eventArgs != null) {
           // for each panel that is being updated, update the html by adding color red
           // to select, span, input elements
           // must remember to call .html() to put html back into the panelsUpdating[i], otherwise it puts in the jQuery Object
           for (var i = 0; i < eventArgs.get_panelsUpdating().length; i++) {
               //My test code
               //var content = eventArgs._panelsUpdating[i].outerHTML;
               //var jContent = $(content);
               //$("input", jContent).css("color", "red");
               //jContent = $('<div>').append(jContent)
               //var jContentToContent = jContent.html();
               //alert(jContentToContent);
               //eventArgs._panelsUpdating[i].outerHTML = jContentToContent;
   
   
           //Cleaned up
           var jContent = $(eventArgs._panelsUpdating[i].outerHTML);
           $("select, span, input", jContent).uniform();
           jContent = $('&lt;div&gt;').append(jContent);
           eventArgs._panelsUpdating[i].outerHTML = jContent.html();
       }
   }
   
   }
   
   

Edit: I think you understood that the issue was the elements were being placed into the DOM (and therefore painted) before your javascript had a chance to make them uniform(). This intercepts the UpdatePanel and uniform()’s the code prior to it inserted into the DOM

Edit 2 Alright, I’ve updated it a bunch, I tested this with my test code there and then included the code you’re likely to add. Also, I took a short cut in eventArgs._panelsUpdating – i should really be using the get and set functions, but this works.