Showing posts with label Javascript. Show all posts
Showing posts with label Javascript. Show all posts

March 18, 2013

IE10: ImageButton PageRequestManagerServerErrorException

And behold the puzzling cryptic error message above, kindly displayed by Internet Explorer 10 when viewing a page from an application which is flawlessly displayed in any other browser....
Yes, including IE9 and below?!?!

They dit it again...

The boys at Redmond kept me busy for an hour or so! To make a long story short: IE10 has a problem with ImageButtons. Only God knows why, but somebody decided the image button click post back location values should change from integer to decimal and somehow jQuery doesn't agree with that.

Now what?

Roaming the web I've found numerous references to this issue and some fixes. One of them was updating the .Net framework version to 4.5 of the clients another 'fix' suggested to replace the image buttons with another control all together..
Both were not an option. After some more extensive search I've found the best solution (imho):

By forcing IE9 compatibility the problem was fixed. Adding the X-UA-Compatible tag to the master page the problem was solved and all things works as designed....

Don't you love wild goose chases once in a while?

July 25, 2012

ASP.Net: Wait for postback response

We have a ASP.Net application where some postbacks might take some time to be handled by the server. When the user triggers a postback, we want the client to be forced to wait until the postback is handled by the server.

My Problem

I want this mechanism to kick in on every page of the site, though some pages do not realy require it.

Problem solved?

Obviously you end up in the master page, but as in animal farm: "All pages are equal, but some pages are more equal then others". I want certain pages to handle the postback slightly different from the default...

Problem Solved!

The solution contains 3 elements: html, css and a little javascript. It's the javascript that helped me out.

     <div id="mainContent">  
       <div class="loadinggs" id="loadingoverlay">  
         <div class="loadingmsg">  
           <img src="../../Images/ajax-loader.gif" align="middle" alt="busy" />  
           Bezig met verwerken...  
       <asp:ContentPlaceHolder ID="MainContent" runat="server" />  
The place of the code depends on what part you want to block. The example code 'blocks' the main content, leaving the menu (in another placeholder) accessible.

   background:rgba(255, 255, 255, 0.5);  
   border:2px solid #196DC1;  

HTML & CSS by Gio! (thanks again!)
The CSS is primarily IE9 (as by my requirement), but you can easily tweak it to support other browsers aswell.


     Initializing the Page PageRequestManager, handling 4 key events:  
     1 - BeginRequest - Start of a postback  
     2 - Endrequest  - Server response on postback event  
     3 - PageLoading - ... (self explainatory I guess)  
     4 - PageLoaded  -  
     By default on each page a animated loading img is shown. But certain pages have additional functionality.  
     In appl_init we check if additional functions were provided for each event. If not the default behaviour is applied.  
 <script type="text/javascript">  
   var pgRegMgr;  
   // add an event handler to 'pageload'  
   The PageRequestManager contains postback information.  
   When this page initializes, we can add handlers to this manager to catch events.  
   NOTE: This javascript code need te be placed AFTER the </body> tag !!!!  
   function appl_init() {  
     // if we do not have the PageRequestManager instance, get it AND add the handler(s)  
     if (pgRegMgr == null) {  
       if (Sys != null) {  
         if (Sys.WebForms != null) {  
           pgRegMgr = Sys.WebForms.PageRequestManager.getInstance();  
           // check for specific event handlers, if not found use the default  
           if (window.pageBeginRequest) { pgRegMgr.add_beginRequest(pageBeginRequest); } else { pgRegMgr.add_beginRequest(BeginHandler); }  
           if (window.pageEndRequest) { pgRegMgr.add_endRequest(pageEndRequest); } else { pgRegMgr.add_endRequest(EndHandler); }  
           if (window.pageLoading) { pgRegMgr.add_pageLoading(pageLoading); } else { pgRegMgr.add_pageLoading(BeginHandler); }  
           if (window.pageLoaded) { pgRegMgr.add_pageLoaded(pageLoaded); } else { pgRegMgr.add_pageLoading(EndHandler); }  
   Default pageBeginRequest and pageLoading behaviour.  
   function BeginHandler() {  
     document.getElementById('loadingoverlay').style.display = 'block';  
   Default pageEndRequest and pageLoaded behaviour.  
   function EndHandler() {  
     document.getElementById('loadingoverlay').style.display = 'none';  
 <asp:ContentPlaceHolder ID="AfterBody_AddedHandlers" runat="server" />  

Now on each postback of a control the content part of the screen is 'locked' until the server responds. The script supports the usage of  a specific handler on the content page hosted by the master. Just add the handlers in the <asp:Content> tag and do enclose them with <script></script> tags. And -if applicable- don't forget to hide the loading message...

 <asp:Content ID="Content2" ContentPlaceHolderID="AfterBody_AddedHandlers" runat="Server">  
   <script type="text/javascript">  
     When a postback was handled by the server (Code behind was executed...)  
     we want to check if a specific control was causing the postback...  
     function pageEndRequest() {  
       //do specific page stuff...  
     Catch the pageLoaded event.  
     function pageLoaded() {  
      //eg. call a specific function like a body onload  
       document.getElementById('loadingoverlay').style.display = 'none';