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

Re: [ydn-javascript] Re: Hyperlinks disabled behind SimpleDialog after it is opened in IE

Expand Messages
  • Cody Burleson
    The first option did not work, but the second option did. 2. After hiding the dialog, you can force it to become invisible.
    Message 1 of 4 , Jan 3, 2009
    • 0 Attachment
      The first option did not work, but the second option did.

      2. After hiding the dialog, you can force it to become invisible.

      YAHOO.util.Dom.setStyle(YAHOO.orcww.dialog.element, "display", "none");

      Of course, I had to also modify my showDialog function to set the style back:

      YAHOO.util.Dom.setStyle(YAHOO.orcww.dialog.element, "display", "block");

      Thank you so much for taking the time to give me some recommendations! One worked, and I was able to resolve my defect. You're a good man. :-)

      Cody Burleson



      On Sat, Jan 3, 2009 at 9:51 AM, Caridy Patino <caridy@...> wrote:

      Hey Cody,

      I have been using a similar approach for a long time, and I never face
      such a problem.

      About the destroy, yes, you're right. The destroy method destroy the
      dialog and also remove its DOM structure from the DOM. In your case
      you're creating the dialog from markup, so the second time things will
      become odd.

      I think the problem with the method "hide" is, for some unknown
      reason, the container element become invisible (visibility: hidden)
      but still get the events over that area. You can check this using the
      FireBug, just inspect the DOM and you should be able to select the
      element.

      Solutions? two solutions come to my head:

      1. After hiding the dialog, you can set the position manually.
      YAHOO.orcww.dialog.cfg.setProperty("XY", [-999, -999]);

      2. After hiding the dialog, you can force it to become invisible.
      YAHOO.util.Dom.setStyle(YAHOO.orcww.dialog.element, "display", "none");

      Try that, and let us know... :-)

      Best Regards and Happy New Year,
      Caridy



      --- In ydn-javascript@yahoogroups.com, "Cody Burleson" <cody@...> wrote:
      >
      > Help! I have an issue where the hyperlinked items behind the
      SimpleDialog
      > are rendered disabled after the SimpleDialog has been displayed
      above them
      > and then closed. Has anyone experienced this problem before? If I use
      > destroy() on the dialog when it is closed, it seems my hyperlinks
      are then
      > operable. But this does not work for me because then and successive
      attempt
      > to open the dialog on the same page is ruint.
      >
      > Here's how I am initializing the widget:
      >
      >
      > <div style="display:none">
      >
      > <div id="dlg-hd">Show Helpers</div>
      >
      > <div id="dlg-bd"><img src="/icsweb/img/ajax-loader-bar.gif"
      alt=""></div>
      >
      >
      > <div id="dlg-ft">&nbsp;</div>
      >
      > </div>
      > <div id="dlg"></div>
      >
      >
      >
      >
      > <script type="text/javascript">
      > var handleCancel = function() {
      >
      > YAHOO.orcww.dialog.hide();
      > // YAHOO.orcww.dialog.destroy();
      >
      >
      >
      > this.setBody('<img src="/icsweb/img/ajax-loader-bar.gif" alt=""/>');
      >
      > // initDialog();
      > };
      >
      >
      > function initDialog() {
      >
      > YAHOO.orcww.dialog = new YAHOO.widget.Dialog("dlg",
      >
      > { width : "500px",
      > fixedcenter : true,
      > visible : false,
      > draggable: true,
      >
      > modal: true,
      > close: false,
      > constraintoviewport : true,
      > autofillheight : "body",
      >
      > buttons : [{ text:"Close", handler:this.handleCancel,
      isDefault:true }]
      > } );
      >
      >
      > YAHOO.orcww.dialog.setHeader($('dlg-hd').innerHTML);
      > YAHOO.orcww.dialog.setBody($('dlg-bd').innerHTML);
      >
      > YAHOO.orcww.dialog.setFooter($('dlg-ft').innerHTML);
      >
      > YAHOO.orcww.dialog.render();
      >
      > };
      >
      > Event.addListener(window, "load", initDialog);
      > </script>
      >
      >
      > Here is my function to display the dialog:
      >
      > /*
      > Displays the YUI Simple Dialog with content that is retrieved via
      > ajax request.
      > url: the url from which to retrieve content (required)
      > reqParams: array of YAHOO.com.orcww.keyValPair objects for adding
      request
      > params to the URL (optional)
      > */
      > function showDialog(url,reqParams){
      >
      > // Build up the URL with request parameters if they exist
      > // in the requestParams array...
      > if(reqParams !== null){
      > var reqParamsLen = reqParams.length;
      > for (var i=0; i < reqParamsLen; i++){
      > if(i === 0){
      > url += "?";
      > } else {
      > url += "&";
      > }
      > url += reqParams[i].key + "=" + reqParams[i].value;
      > }
      > }
      >
      > var handleSuccess = function(o) {
      > YAHOO.orcww.dialog.setBody(o.responseText);
      > YAHOO.orcww.dialog.show();
      > }
      >
      > var handleFailure = function(o) {
      > YAHOO.orcww.dialog.setBody(o.status + " " + o.statusText);
      > }
      >
      > var getDialogCallback = {
      > success: handleSuccess, failure: handleFailure
      > };
      >
      > YAHOO.util.Connect.asyncRequest('POST', url, getDialogCallback);
      > }
      >
      >
      > The dialog is displayed on a page that has a layout control on it,
      within
      > the Tab widget, and the view is patched through the Dispatcher plugin.
      >
      > Thanks in advance if anyone has any ideas about this.
      >
      > Cody Burleson
      >


    • Caridy Patino
      Hey Cody, I m glad to help... I wonder why the first one didn t work, I think was a type, should be xy in lowercase... my bad.
      Message 2 of 4 , Jan 5, 2009
      • 0 Attachment
        Hey Cody, I'm glad to help... I wonder why the first one didn't work,
        I think was a type, should be xy in lowercase... my bad.

        YAHOO.orcww.dialog.cfg.setProperty("xy", [-999, -999]);

        Best Regards,
        Caridy

        --- In ydn-javascript@yahoogroups.com, "Cody Burleson" <cody@...> wrote:
        >
        > The first option did not work, but the second option did.
        >
        > 2. After hiding the dialog, you can force it to become invisible.
        >
        > YAHOO.util.Dom.setStyle(YAHOO.orcww.dialog.element, "display", "none");
        > Of course, I had to also modify my showDialog function to set the style
        > back:
        >
        > YAHOO.util.Dom.setStyle(YAHOO.orcww.dialog.element, "display", "block");
        >
        > Thank you so much for taking the time to give me some
        recommendations! One
        > worked, and I was able to resolve my defect. You're a good man. :-)
        >
        > Cody Burleson
        >
        >
        >
        > On Sat, Jan 3, 2009 at 9:51 AM, Caridy Patino <caridy@...> wrote:
        >
        > > Hey Cody,
        > >
        > > I have been using a similar approach for a long time, and I never face
        > > such a problem.
        > >
        > > About the destroy, yes, you're right. The destroy method destroy the
        > > dialog and also remove its DOM structure from the DOM. In your case
        > > you're creating the dialog from markup, so the second time things will
        > > become odd.
        > >
        > > I think the problem with the method "hide" is, for some unknown
        > > reason, the container element become invisible (visibility: hidden)
        > > but still get the events over that area. You can check this using the
        > > FireBug, just inspect the DOM and you should be able to select the
        > > element.
        > >
        > > Solutions? two solutions come to my head:
        > >
        > > 1. After hiding the dialog, you can set the position manually.
        > > YAHOO.orcww.dialog.cfg.setProperty("XY", [-999, -999]);
        > >
        > > 2. After hiding the dialog, you can force it to become invisible.
        > > YAHOO.util.Dom.setStyle(YAHOO.orcww.dialog.element, "display",
        "none");
        > >
        > > Try that, and let us know... :-)
        > >
        > > Best Regards and Happy New Year,
        > > Caridy
        > >
        > >
        > > --- In ydn-javascript@yahoogroups.com
        <ydn-javascript%40yahoogroups.com>,
        > > "Cody Burleson" <cody@> wrote:
        > > >
        > > > Help! I have an issue where the hyperlinked items behind the
        > > SimpleDialog
        > > > are rendered disabled after the SimpleDialog has been displayed
        > > above them
        > > > and then closed. Has anyone experienced this problem before? If
        I use
        > > > destroy() on the dialog when it is closed, it seems my hyperlinks
        > > are then
        > > > operable. But this does not work for me because then and successive
        > > attempt
        > > > to open the dialog on the same page is ruint.
        > > >
        > > > Here's how I am initializing the widget:
        > > >
        > > >
        > > > <div style="display:none">
        > > >
        > > > <div id="dlg-hd">Show Helpers</div>
        > > >
        > > > <div id="dlg-bd"><img src="/icsweb/img/ajax-loader-bar.gif"
        > > alt=""></div>
        > > >
        > > >
        > > > <div id="dlg-ft"> </div>
        > > >
        > > > </div>
        > > > <div id="dlg"></div>
        > > >
        > > >
        > > >
        > > >
        > > > <script type="text/javascript">
        > > > var handleCancel = function() {
        > > >
        > > > YAHOO.orcww.dialog.hide();
        > > > // YAHOO.orcww.dialog.destroy();
        > > >
        > > >
        > > >
        > > > this.setBody('<img src="/icsweb/img/ajax-loader-bar.gif" alt=""/>');
        > > >
        > > > // initDialog();
        > > > };
        > > >
        > > >
        > > > function initDialog() {
        > > >
        > > > YAHOO.orcww.dialog = new YAHOO.widget.Dialog("dlg",
        > > >
        > > > { width : "500px",
        > > > fixedcenter : true,
        > > > visible : false,
        > > > draggable: true,
        > > >
        > > > modal: true,
        > > > close: false,
        > > > constraintoviewport : true,
        > > > autofillheight : "body",
        > > >
        > > > buttons : [{ text:"Close", handler:this.handleCancel,
        > > isDefault:true }]
        > > > } );
        > > >
        > > >
        > > > YAHOO.orcww.dialog.setHeader($('dlg-hd').innerHTML);
        > > > YAHOO.orcww.dialog.setBody($('dlg-bd').innerHTML);
        > > >
        > > > YAHOO.orcww.dialog.setFooter($('dlg-ft').innerHTML);
        > > >
        > > > YAHOO.orcww.dialog.render();
        > > >
        > > > };
        > > >
        > > > Event.addListener(window, "load", initDialog);
        > > > </script>
        > > >
        > > >
        > > > Here is my function to display the dialog:
        > > >
        > > > /*
        > > > Displays the YUI Simple Dialog with content that is retrieved via
        > > > ajax request.
        > > > url: the url from which to retrieve content (required)
        > > > reqParams: array of YAHOO.com.orcww.keyValPair objects for adding
        > > request
        > > > params to the URL (optional)
        > > > */
        > > > function showDialog(url,reqParams){
        > > >
        > > > // Build up the URL with request parameters if they exist
        > > > // in the requestParams array...
        > > > if(reqParams !== null){
        > > > var reqParamsLen = reqParams.length;
        > > > for (var i=0; i < reqParamsLen; i++){
        > > > if(i === 0){
        > > > url += "?";
        > > > } else {
        > > > url += "&";
        > > > }
        > > > url += reqParams[i].key + "=" + reqParams[i].value;
        > > > }
        > > > }
        > > >
        > > > var handleSuccess = function(o) {
        > > > YAHOO.orcww.dialog.setBody(o.responseText);
        > > > YAHOO.orcww.dialog.show();
        > > > }
        > > >
        > > > var handleFailure = function(o) {
        > > > YAHOO.orcww.dialog.setBody(o.status + " " + o.statusText);
        > > > }
        > > >
        > > > var getDialogCallback = {
        > > > success: handleSuccess, failure: handleFailure
        > > > };
        > > >
        > > > YAHOO.util.Connect.asyncRequest('POST', url, getDialogCallback);
        > > > }
        > > >
        > > >
        > > > The dialog is displayed on a page that has a layout control on it,
        > > within
        > > > the Tab widget, and the view is patched through the Dispatcher
        plugin.
        > > >
        > > > Thanks in advance if anyone has any ideas about this.
        > > >
        > > > Cody Burleson
        > > >
        > >
        > >
        > >
        >
      Your message has been successfully submitted and would be delivered to recipients shortly.