Loading ...
Sorry, an error occurred while loading the content.

Re: Problem with YUI Dialog under ASP.NET

Expand Messages
  • steve.klee
    I had the same issue but I modified the Dialog prototype to do what I needed. If you are open to modifying the YUI source then you could leverage the changes
    Message 1 of 3 , Sep 15, 2006
    View Source
    • 0 Attachment

      I had the same issue but I modified the Dialog prototype to do what I needed.  If you are open to modifying the YUI source then you could leverage the changes I made.  There is a function in the Dialog prototype called "registerForm" that sets the form for your dialog and also registers the first and last form element for setting focus and tab behavior in a modal situation.  I needed to change the behavior of this function for 2 reasons:

      1) The fact that all of my ASP.NET pages have 1 and only 1 form and I wanted to take advantage of that.

      2) I want more control over what the first and last element for my dialog should be, because I often use links (anchors) that are not considered form elements and the standard code only considers form elements.

      I commented my mods so you can see what changes I made.  In the container.js file I made the following changes:

      1) Just before the   YAHOO.widget.Dialog.prototype.registerForm = function() {      statement I added 3 properties to the Dialog prototype which allow me to externally tell the dialog the id of the controls I consider to be first and last for my dialog and to explcitly set the form:

      /* start of mod */
      YAHOO.widget.Dialog.prototype.firstFormElementId = null;
      YAHOO.widget.Dialog.prototype.lastFormElementId = null;
      YAHOO.widget.Dialog.prototype.useFirstForm = false;

      /* end of mod */

      2) Here is the complete text of the registerForm function showing the changes I made to the behavior, notice that I explicitly set the form object if the property I created is set to true:

      /**
      * Prepares the Dialog's internal FORM object, creating one if one is not currently present.
      */

      YAHOO.widget.Dialog.prototype.registerForm = function() {
          /* start of mod */
          var form = null;
         
          if(this.useFirstForm)
              form = document.forms[0];
          else
              form = this.element.getElementsByTagName("FORM")[0];
       
          var dialogFirstFormElementId = this.firstFormElementId;
          var dialogLastFormElementId = this.lastFormElementId;
          /* end of mod */

          if (! form) {
            var formHTML = "<form name=\"frm_" + this.id + "\" action=\"\"></form>";
            this.body.innerHTML += formHTML;
            form = this.element.getElementsByTagName("FORM")[0];
          }

       this.firstFormElement = function() {
           /* start of mod */
           if(dialogFirstFormElementId)
               return document.getElementById(dialogFirstFormElementId);
           /* end of mod */
          
           for (var f=0;f<form.elements.length;f++ ) {
                var el = form.elements[f];
                if (el.focus) {
                     if (el.type && el.type != "hidden") {
                       return el;
                     }
                }
            }
           return null;
        }();

       this.lastFormElement = function() {
           /* start of mod */
           if(dialogLastFormElementId)
               return document.getElementById(dialogLastFormElementId);
           /* end of mod */
          
           for (var f=form.elements.length-1;f>=0;f-- ) {
                var el = form.elements[f];
                if (el.focus) {
                     if (el.type && el.type != "hidden") {
                          return el;
                     }
                }
            }
            return null;
       }();

       this.form = form;


       if (this.cfg.getProperty("modal") && this.form) {

        var me = this;
        
        var firstElement = this.firstFormElement || this.firstButton;
        if (firstElement) {
         this.preventBackTab = new YAHOO.util.KeyListener(firstElement, { shift:true, keys:9 }, {fn:me.focusLast, scope:me, correctScope:true} );
         this.showEvent.subscribe(this.preventBackTab.enable, this.preventBackTab, true);
         this.hideEvent.subscribe(this.preventBackTab.disable, this.preventBackTab, true);
        }

        var lastElement = this.lastButton || this.lastFormElement;
        if (lastElement) {
         this.preventTabOut = new YAHOO.util.KeyListener(lastElement, { shift:false, keys:9 }, {fn:me.focusFirst, scope:me, correctScope:true} );
         this.showEvent.subscribe(this.preventTabOut.enable, this.preventTabOut, true);
         this.hideEvent.subscribe(this.preventTabOut.disable, this.preventTabOut, true);
        }

          }

      };

      3) My ASP.NET server side control spits out a DIV container that has my module layout the way I want my dialog to look.  My client-side code is notified of the control ids I am interested in, so in my client-side dialog code I set the following properties on my Dialog instance before I call render():

      dialog.useFirstForm = true;
      dialog.firstFormElementId = this.ContainerId + "Value";
      dialog.lastFormElementId = this.ContainerId + "Link";
          
      dialog.render();

       

      This may not be exactly what you need but it might give you an idea of where to start if you are like me and want to take advantage of the YUI with ASP.NET.  This could be done by sub-classing the YUI Dialog and overriding the behavior instead of modifying the source file like I did.

      HTH,

      Steve

    Your message has been successfully submitted and would be delivered to recipients shortly.