Skip to content
{ 2008 11 17 }

Ajax popups

The asp.net community is large and creative. One of the more creative aspects is the development of the ajaxtoolkit available from asp.net website. The toolkit is a collection of class objects for the client side that can be accessed from the server side.  That’s a pretty remarkable feat. Spectacular as it is, it may not have all the functionality you need. It is still sometimes useful to write your own script.

Or, in my case, merely adapt some of the great public domain script from the Yahoo API. In my earlier example, I used the YUI to create a asynchronous drag & drop component for a web page. This time around, I needed a couple of popups. The ajaxtoolkit already has a component called the modalpopupextender, which is very nice. But not as nice if you want to have more than one on the same page, each with its own ajax components. For some reason, I wasn’t able to get the postback function to work with two popup panels on the page, and I couldn’t show nested ajax components in either one. So, I adapted more of the YUI to fill the need.

In particular, I used both the YUI overlay manager to manage two popups on the page.  And, within the popups, I used the YUI tab control as well as the ajaxtoolkit calendar extender and mask. Finally, I used the xmlhttprequest object to post the client side controls to the server. Curiously, the server side controls wouldn’t wouldn’t do a full post with the script objects on the page, so I had to call that through javascript also.

So without more ado, here is the javascript on the aspx page:

  1.  
  2. <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
  3. <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/dragdrop/dragdrop-min.js"></script>
  4. <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/container/container-min.js"></script>
  5. <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/utilities/utilities.js"></script>
  6. <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/button/button-min.js"></script>
  7. <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/connection/connection-min.js"></script>
  8. <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/element/element-beta-min.js"></script>
  9. <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/tabview/tabview-min.js"></script>
  10. <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
  11.  
  12. <script type="text/javascript" language="javascript">
  13. //Begin Yahoo modalpopup ajax controls - unfortunately, cannot display ajaxtoolbox tools in the popup.
  14. YAHOO.namespace("container");
  15. function init() {
  16.    
  17.        
  18.         // Build panel1 based on markup
  19.         YAHOO.container.panelRecurrance = new YAHOO.widget.Panel("panelRecurrance", { xy:[250,250],
  20.                                                                                                                                                 visible:false,
  21.                                                                                                                                                 width:"420px"
  22.                                                                                                                                           } );
  23.         YAHOO.container.panelRecurrance.render();
  24.         // Build panel2 based on markup
  25.         YAHOO.container.panelLocation = new YAHOO.widget.Panel("panelLocation", { xy:[350,350],
  26.                                                                                                                                                 visible:false,
  27.                                                                                                                                                 width:"400px"                                                                                                                                            
  28.                                                                                                                                           } );
  29.         YAHOO.container.panelLocation.render();
  30.         YAHOO.container.manager = new YAHOO.widget.OverlayManager();
  31.         YAHOO.container.manager.register([YAHOO.container.panelRecurrance,
  32.                                                                                           YAHOO.container.panelLocation]);
  33.        
  34.         YAHOO.util.Event.addListener("recurButton", "click", YAHOO.container.panelRecurrance.show, YAHOO.container.panelRecurrance, true);
  35.         YAHOO.util.Event.addListener("recurButton", "click", YAHOO.container.panelRecurrance.focus, YAHOO.container.panelRecurrance, true);
  36.         YAHOO.util.Event.addListener("popRecurOk", "click", YAHOO.container.panelRecurrance.hide, YAHOO.container.panelRecurrance, true);
  37.         YAHOO.util.Event.addListener("popRecurCancel", "click", YAHOO.container.panelRecurrance.hide, YAHOO.container.panelRecurrance, true);
  38.         //YAHOO.util.Event.addListener("focus1", "click", YAHOO.container.panelRecurrance.focus, YAHOO.container.panelRecurrance, true);
  39.  
  40.         YAHOO.util.Event.addListener(‘<%= AddLocation.ClientID %>’, "click", YAHOO.container.panelLocation.show, YAHOO.container.panelLocation, true);
  41.         YAHOO.util.Event.addListener(‘<%= AddLocation.ClientID %>’, "click", YAHOO.container.panelLocation.focus, YAHOO.container.panelLocation, true);
  42.         //YAHOO.util.Event.addListener("hide2", "click", YAHOO.container.panelLocation.hide, YAHOO.container.panelLocation, true);
  43.         //YAHOO.util.Event.addListener("focus2", "click", YAHOO.container.panelLocation.focus, YAHOO.container.panelLocation, true);
  44.  
  45. }
  46. YAHOO.util.Event.onDOMReady(init);
  47.  
  48. //Yahoo tabView Section
  49.     var tabView = new YAHOO.widget.TabView(‘recurTab’);
  50.  
  51. </script>
  52. <!– ************ End Yahoo! ajax API section ***************–>
  53.  

Below is the javascript for my xmlhttprequest object. The id parameter indicates the control - either popup or the server control to post - that calls the object. Note the use of clientId server tags to get the client markup Id for asp.net server controls. Also note the manner in which I was able to catch the select values for radio buttons, a checkbox list, and a couple of dropdown lists.

  1.  
  2. <script language="javascript" type="text/javascript" >
  3.  
  4. //////////////////////////////////////////////////////////////////////////////
  5. // XMLHttpRequest
  6. //////////////////////////////////////////////////////////////////////////////
  7.  
  8. var bodyList;
  9. var sendStr;
  10. var xmlHttp;
  11. var requestURL = parent.document.URL;
  12.  
  13. function send_data(id)
  14. {
  15.     if (id.length > 0)
  16.     {
  17.         //alert(id);
  18.         //items = document.getElementById(id).getElementsByTagName("li");        
  19.         bodyList="";
  20.         /*
  21.         for (i=0;i<items.length;i=i+1) {
  22.                 bodyList += items[i].id + ",";
  23.         }
  24.         */
  25.                
  26.        
  27.         sendStr = "Input="+id;
  28.         sendStr += "&StartDate="+document.getElementById(‘<%= _startDate.ClientID %>’).value;
  29.         sendStr += "&StartTime="+document.getElementById(‘<%= _startTime.ClientID %>’).value;
  30.         sendStr += "&EndDate="+document.getElementById(‘<%= _endDate.ClientID %>’).value;
  31.         sendStr += "&EndNumber="+document.getElementById(‘<%= _endNumber.ClientID %>’).value;
  32.         sendStr += "&DayOption="+document.getElementById(‘<%= _dailyButton.ClientID %>’).checked;
  33.         sendStr += "&WeekDaysOption="+document.getElementById(‘<%= _dayWeekdays.ClientID %>’).checked;
  34.         sendStr += "&WeekOption="+document.getElementById(‘<%= _weeklyButton.ClientID %>’).checked;
  35.         sendStr += "&MonthDayOption="+document.getElementById(‘<%= _monthlyDayButton.ClientID %>’).checked;
  36.         sendStr += "&MonthWeekOption="+document.getElementById(‘<%= _monthWeekButton.ClientID %>’).checked;
  37.         sendStr += "&RandomOption="+document.getElementById(‘<%= _randomButton.ClientID %>’).checked;
  38.         sendStr += "&DayInterval="+document.getElementById(‘<%= _dayInterval.ClientID %>’).value;
  39.         sendStr += "&WeekInterval="+document.getElementById(‘<%= _weekInterval.ClientID %>’).value;
  40.         //alert(’<%= _weekDay.ClientID %>’);
  41.         var containerRef = document.getElementById(‘<%= _weekDay.ClientID %>’);
  42.         var inputRefArray = containerRef.getElementsByTagName(‘input’);
  43.         var weekdays="";
  44.          for (var i=0; i<inputRefArray.length; i++)
  45.          {
  46.           var inputRef = inputRefArray[i];
  47.  
  48.           if ( inputRef.type.substr(0, 8) == ‘checkbox’ )
  49.           {
  50.            if ( inputRef.checked == true )
  51.             weekdays += i+",";
  52.           }
  53.          }
  54.          sendStr +="&WeekDay="+weekdays;
  55.         sendStr += "&MonthDay="+document.getElementById(‘<%= _monthDay.ClientID %>’).value;
  56.         sendStr += "&MonthDayInterval="+document.getElementById(‘<%= _monthDayInterval.ClientID %>’).value;
  57.         sendStr += "&MonthWeek="+document.getElementById(‘<%= _monthWeek.ClientID %>’).selectedIndex;
  58.         sendStr += "&MonthWeekDay="+document.getElementById(‘<%= _monthWeekDay.ClientID %>’).selectedIndex;
  59.         sendStr += "&MonthWeekInterval="+document.getElementById(‘<%= _monthWeekInterval.ClientID %>’).value;
  60.         xmlHttp = GetXmlHttpObject(stateChangeHandler);
  61.         //Send the xmlHttp get to the specified url
  62.  
  63.      
  64.         xmlHttp.open("POST",requestURL,false);
  65.         xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  66.         xmlHttp.setRequestHeader("Content-length", sendStr.length);
  67.         xmlHttp.setRequestHeader("Post", "true");
  68.         xmlHttp.send(sendStr);
  69.        
  70.         if (id == "bNext")
  71.         {
  72.             __doPostBack(‘__Page’, ‘MyCustomArgument’);
  73.         }
  74.      }
  75. }
  76.  
  77. //stateChangeHandler will fire when the state
  78. //has changed, i.e. data is received back
  79. //This is non-blocking (asynchronous)
  80. function stateChangeHandler()
  81. {
  82.     //readyState of 4 or ‘complete’ represents that data has been returned
  83.     if (xmlHttp.readyState == 4 || xmlHttp.readyState == ‘complete’)
  84.     {
  85.         //Gather the results from the callback
  86.         var str = xmlHttp.responseText;
  87.  
  88.         //Populate the innerHTML of the div with the results
  89.         //document.getElementById(’ul1′).innerHTML = str;
  90.     }
  91.    
  92.     if (xmlHttp.readyState == 1)
  93.     {
  94.         //Populate the innerHTML of the div with the results
  95.         //document.getElementById(’ul1′).innerHTML = ‘LOADING…’;
  96.     }
  97. }
  98.  
  99. // XMLHttp send GET request
  100. function xmlHttp_Get(xmlhttp, url)
  101. {
  102.     xmlhttp.open(‘GET’, url, true);
  103.     xmlhttp.send(null);
  104. }
  105.  
  106. // XMLHttp send POST request
  107. function xmlHttp_Post(xmlhttp, url) {
  108.    
  109.     xmlhttp.open(‘POST’, url, true);
  110.     xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  111.     xmlhttp.setRequestHeader("Content-length", params.length);
  112.     xmlhttp.setRequestHeader("Connection", "close");
  113. }
  114.  
  115.  
  116. function GetXmlHttpObject(handler)
  117. {
  118.     var objXmlHttp;
  119.    
  120.     try
  121.     {
  122.         // Firefox, Opera 8.0+, Safari  
  123.         objXmlHttp=new XMLHttpRequest();  
  124.         objXmlHttp.onload = handler;
  125.         objXmlHttp.onerror = handler;  
  126.     }
  127.     catch (e)
  128.     {  
  129.         // Internet Explorer6+  try
  130.         try
  131.         {
  132.             objXmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  133.             objXmlHttp.onreadystatechange = handler;  
  134.         }
  135.         catch (e)
  136.         {    
  137.             try
  138.             {      
  139.                 objXmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  140.                 objXmlHttp.onreadystatechange = handler;                  
  141.             }
  142.             catch (e)
  143.             {      
  144.                 alert("Your browser does not support AJAX!");      
  145.                 return false;      
  146.             }
  147.         }        
  148.     }
  149.     return objXmlHttp;
  150. }  
  151. </script>
  152.  

Notice the use of __doPostBack(’__Page’, ‘MyCustomArgument’) to force a full postback to the server. You can study the Yahoo examples for the html script. Finally, the code for the server-side page_load

  1.  
  2. this.bNext.Attributes.Add("onClick", "JavaScript:send_data(’bNext’);");        
  3.         if (Request.Headers["Post"] != null)
  4.         {
  5.             string panel = string.Empty;
  6.             panel = Request.Form["Input"];
  7.             if (panel == "panelRecurrance")
  8.             {
  9.                 StartDate = Request.Form["StartDate"];
  10.                 StartTime = Request.Form["StartTime"];
  11.                 EndDate = Request.Form["EndDate"];
  12.                 EndNumber = Request.Form["EndNumber"];
  13.                 DayOption = bool.Parse(Request.Form["DayOption"]);
  14.                 WeekDaysOption = bool.Parse(Request.Form["WeekDaysOption"]);
  15.                 WeekOption = bool.Parse(Request.Form["WeekOption"]);
  16.                 MonthDayOption = bool.Parse(Request.Form["MonthDayOption"]);
  17.                 MonthWeekOption = bool.Parse(Request.Form["MonthWeekOption"]);
  18.                 RandomOption = bool.Parse(Request.Form["RandomOption"]);
  19.                 DayInterval = Request.Form["DayInterval"];
  20.                 WeekInterval = Request.Form["WeekInterval"];
  21.                 WeekDay = Request.Form["WeekDay"];
  22.                 MonthDay = Request.Form["MonthDay"];
  23.                 MonthDayInterval = Request.Form["MonthDayInterval"];
  24.                 MonthWeek = Request.Form["MonthWeek"];
  25.                 MonthWeekDay = Request.Form["MonthWeekDay"];
  26.                 MonthWeekInterval = Request.Form["MonthWeekInterval"];        
  27.                 _presenter.UpdateSchedule();
  28.             }
  29.             else if (panel == "panelLocation")
  30.             {
  31.                 CommandEventArgs args = new CommandEventArgs("Post", "");
  32.                 CommandButton_Click(this, args);
  33.             }
  34.             else
  35.             {
  36.                 string returnPath = Request.Url.AbsolutePath + Request.Url.Query;
  37.                 HttpContext.Current.Session["CurrentView"] = Views.GridView;
  38.                 //HttpContext.Current.Response.Redirect(returnPath);
  39.             }
  40.         }
  41.         MultiView1.ActiveViewIndex = (int)HttpContext.Current.Session["CurrentView"];  
  42.  
Posted by james on Monday, November 17, 2008, at 8:52 pm. Filed under Web Development, asp.net. Follow any responses to this post with its comments RSS feed. You can post a comment or trackback from your blog.

Post a Comment

You must be logged in to post a comment.